Noise of Web Programming

主にHTML/CSS/JavaScriptやWebサービスの情報を配信しています。可能な限り実装方法まで書いていくつもりです。

ブログを移転しました。

Tecuration.com

このサイト同様、HTML/CSS/JavaScriptなどのフロントサイドWeb開発に関する最新情報やライフハックを配信しています。

これからはてなブログを始める人向け!知らなきゃ損する10個の機能

僕はWordPressを運用した経験がある。WordPressでは豊富なプラグインが用意されており、それらを取り込むことで様々な機能の拡張が可能であった。自由度が高い分、プラグイン同士の干渉など考慮すべき点も多く、難しくもあったのだが。


一方、はてなブログでは既に用意されている機能しか使用できない。しかし外部サービスから生成されたコードを埋め込むことで機能を拡張(?)することが可能なようだ。というわけで、僕がはてなブログを始めるにあたり調べた僕自身が欲する「既に用意されている機能」 & 「外部サービスを利用することで拡張することのできる機能」について書いておく。


既に用意されている機能

はてな記法


これははてなブログを使ったことの無い人も一度は聞いたことがあるんじゃないかな。
[設定] -> [基本設定] -> [編集モード]から"はてな記法モード"を選択することで使用可能。何だろうこのHTMLタグを挟んでも何事もなく記事が出来上がる感じは。違和感を感じるがとても便利。


はてな記法の使い方は以下にまとめられている。
はてな記法一覧


中でも特にこれは使えると思ったものを抜粋。

  • シンタックスハイライト

コードを書くときには必須。書き方は以下の通り。一行目の||の間に対象とする言語を書く。

>|javascript|
......
||<

e.g.

var a = 0;
(function func(){
  console.log(a);
})();

最低限なハイライトだな。別にハイライト必要なかったら||の間に何も書かなければ良いようだ。


  • blockquote

まぁ結構使うよねこれは。書き方は以下の通り。もちろん普通にHTMLタグで書いても良い。

>>
......
<<


写真


編集画面の右側に写真を投稿ボタンがある。記事に写真を挿入するとデフォルトでは":plain"となる。これはupload画像へのリンクを持たない。スマホなどで大きな画像を見せたい時は":image"に変更するとupload画像へのリンクつき画像を挿入できる。
はてな記法モードでの話だと思うので、その他の編集モードを選択している人は各自お調べください。


twitterフォローボタン


[デザイン] -> [カスタマイズ] -> [サイドバー] -> [プロフィール]に最初から用意されている。


続きを読む機能


編集画面にデフォルト搭載。Class名は"entry-see-more"。CSSでいじってみようと思う。


外部サービスを利用することで拡張することのできる機能


はてなブックマークブログパーツ


よくブログで見かけるこれね。

以下から簡単にコードを生成できる。[デザイン] -> [カスタマイズ] -> [サイドバー]に埋め込めばOK。はじめたばかりのうちに設置しても空しいだけだが。
はてなブックマークブログパーツ


サムネイル画像生成ツール


リンク先のサムネイル画像を生成してくれるツール。これはなかなかいいね。
HeartRails Capture


ソーシャルボタン、関連する記事、関連するみんなの記事


これも良く見かける。zenbackで即解決。すごい簡単なステップで埋め込みコードを生成することが可能。zenbackすげぇ。。。[デザイン] -> [カスタマイズ] -> [記事]に埋め込む。
zenback


2013/05/16追記
zenbackより使い勝手のよいWebサービスを発見したので追記。

LinkWithIn related posts with thumbnails


このブログでも設置しているが、こんな具合にサムネイル画像つきで関連する記事を紹介してくれる。


LinkWithInのサイトへ移動し、必要情報を入力。PlatformはOthersを、Widthはお好みで選択(このブログでは5 stories)。生成されるscriptをデザインから記事下に貼り付け。"こちらの記事もあわせてどうぞ"の文言は以下の一行を追加することで変更することが可能。

<script>linkwithin_text='こちらの記事もあわせてどうぞ'</script>

これあればzenbackいらないよなー。


固定ページ


以下の記事で紹介されているやり方で可能なようだ。僕ははてなブログでは固定ページを用意する気はないので使う予定はない。
このブログについて


リンクチェッカー


これは本当に必須。自分の記事から紹介した他の記事へのリンクが切れていないかチェックしてくれる。せっかく読みにきてくれた人がリンククリックして404じゃ申し訳ないよね。定期的にチェックしていく。
リンクチェッカー(リンク切れチェックツール)


お問い合わせフォーム


欲しい人は欲しいよね。一応設置しておくと、嬉しい話~苦情まで舞い込んでくるかも。。。?
FormMailer


始めたばかりでは必要ない機能も多々あるが、知っておいて損はないかと。さぁさぁ、どんどん記事書いていこう。