- 広告の設定について追記しました（2017.1.7）
はてなブログを始めてからこのブログでも様々なカスタマイズを行ってきました。
そこで今回は私が行ってきたカスタマイズをまとめておきたいと思います。
どのカスタマイズも簡単にできるものばかりなので、はてなブログを始めたばかりの方は参考にしてみてください。
また、項目ごとに参考にさせていただいた記事を張り付けているので、実際の導入方法についてはそちらを参照してください。
新しくカスタマイズを行った際には随時更新していきますので、よろしくお願いします。
初期設定
はてなブログの使い方
はてなブログを始めたばかりの方は、まずこちらの記事ではてなブログの使い方・初期設定について学んでおきましょう。
記事の書き方やプロフィールの設定などはこの記事を読めばOKですね。
ヘッダーのカスタマイズ
グローバルメニューの追加
ブログタイトル下にメニューバーがあると、初めてブログを訪れてくれた方にもどんな記事があるブログなのか一目でわかっていいですよ。
こちらのメニューは画面の幅に合わせてサイズが変わっていくというメニューになります。
画面の表示が崩れないのはすごくいいですね。
検索窓をつける
スマホで表示する場合、デフォルトでは検索窓が画面の下の方に表示されています。
始めてブログに訪れた方には目に触れにくい場所なので、ヘッダーに検索窓をつけるのは回遊率を上げる意味でもおすすめですね。
フッターのカスタマイズ
Milliard関連記事のカスタマイズ
Milliard関連記事プラグインは、はてなブログに搭載されていない関連記事を入れることができるプラグインです。
記事数が増えてくると、関連記事のリンクをその都度貼るのも面倒になってきますよね。
関連記事プラグインを利用することで回遊率を上げることにつながります。
Milliard関連ページプラグインについて | シスウ株式会社
この関連記事のデザインをカスタマイズすることで使い易いMilliardをさらに使いやすくすることができます。
フッター固定メニュー
こちらは画面の下に固定されているメニューバーです。
スマホの場合は多くの方が利用されているこちらのメニューがおすすめですね。
私のブログの場合は「TOPに戻る・カテゴリ・人気記事・HOMEに戻る」の4つのボタンが常に表示されています。
スマホでの回遊率を上げるためには必須だと思いますよ。
メニューバーの透過
記事下を覆ってしまう固定メニューバーですが、透過させることによって圧迫感がなくなります。
メニューに隠れていた部分も見えるようになるので、利便性も向上しますよ。
記事内のカスタマイズ
記事タイトルのカスタマイズ
ブログの記事を見るときに一番初めに目に入ってくる「タイトル」も簡単にデザインを変更することができます。
タイトルを変えるだけでブログの雰囲気が変わりますよ。
見出しのカスタマイズ
「大見出し・中見出し・小見出し」について、文字の大きさや色、形などを自由に決めることができます。
よく使用する見出しを変えるだけで、記事全体の印象がガラッと変わりますよ。
目次のカスタマイズ
はてなブログでは「:contents」と入力することで簡単に利用できる見出し機能。
こちらもカスタマイズをすることで番号表示に変えたり、文字の大きさを変更することができます。
また、クリックすることで表示されるようなカスタマイズも可能です。
シェアボタンのカスタマイズ
はてなブックマークやツイッターで記事をシェアしてもらうためのボタンもお洒落なものがたくさんあります。
デフォルトのものよりも見た目がシンプルでいいですね。
わたしはこちらのシェアボタンを利用しています。
強調部分にアンダーラインを引く
下線や太字などはデフォルトで利用できますが、さらに強調表示をしたい場合にはアンダーラインが便利です。
蛍光ペンのような見た目がいいですね。カラーも自由に変更できるので、ブログにあった色を選んでみてください。
引用のカスタマイズ
引用部分もデフォルトだと少し物足りないんですよね。
カスタマイズすることで文字サイズの大きさや文字の色などを変更することができます。
こちらのサイトのカスタマイズはシンプルで見やすくていいですね。
カエレバのカスタマイズ
Amazonや楽天市場での商品紹介を簡単にすることが出来る、とても便利なツール「カエレバ」のカスタマイズも行いました。
カエレバについてはこちらの記事を参考にしてみてください。
そのままでも便利なのですが、カスタマイズして使用すると、とても見栄えが良くなりますね。
こちらもゆきひーさんのカスタマイズを使用させていただきました。
アプリーチのカスタマイズ
こちらはアプリの紹介に利用する「アプリーチ」のカスタマイズです。
上記のカエレバカスタマイズのデザインに合わせているので、統一感が出ていいですね。
サイドバーのカスタマイズ
サイドバーモジュールをタブメニューにする
サイドバーにタブメニューを追加することで回遊率を上げることが出来るカスタマイズですね。
フォローボタンのカスタマイズ
はてなやツイッターなどのフォローボタンもシェアボタン同様、お洒落なものがそろっています。
スクエアタイプや丸っこいタイプなど様々ですね。
記事の下部や、記事上、サイドバーなどに置いておくといいでしょう。
その他の部分のカスタマイズ
グーグルフォントを利用する
GoogleFont（グーグルフォント）を利用すると簡単に文字のフォントを変更することが出来ます。
フォントを変更するだけで、ブログの印象が一気に変わるので印象を変えたいなという方におすすめですね。
私の場合はタイトルとサイドバーの見出しにグーグルフォントを利用しています。
記事全体のフォントを変更すると、読み込みに少し時間がかかる点には注意が必要です。
お洒落なGoogleフォントとGoogleフォントの導入方法についてはこちらの記事で紹介されています。
カラーを変更する
カラーコードを変更することで、文字の色やメニューバーの色を簡単に変更することができます。
ブログ全体の統一感を出すためにも、一度使用したカラーコードはメモしておくといいですね。
同系色のカラーコードはこちの記事にまとめられています。
アイコンWebフォントの使用
はてなブログでは簡単なコードを入力することでいくつかのアイコンを使用することが出来ます。
このブログの場合はメニューに使用させていただいております。
こちらの記事でアイコンの一覧と使い方についてまとめられています。
TOPに戻るボタンの設置
ブログの性質上、文字数が多くなると、どうしても縦に長いページになってしまいます。
そういった時に便利なのが「TOPに戻る」ボタンの設置ですね。
簡単に実装できるので試してみてください。
「続きを読む」のカスタマイズ
デフォルトだと文字で表示されている「続きを読む」ですが、こちらもカスタマイズをすることでボタンで表示したりすることができます。
以下のサイトで紹介されている方法ではお洒落な動きがついた表示にすることができるので、参考になりますね。
YouTube動画の埋め込み
動画をそのまま貼り付けるよりも動作が重くならないので、1つの記事に複数の動画を紹介する時に利用するといいですね。
必要のない部分を消す
スマホ表示の場合デフォルトで様々なものが表示されていますが、その中でも必要ないと感じたものは消すことが出来ます。
シンプルなデザインにしたい時におすすめです。
グーグルアドセンスについて
はてなブログProにするとGoogle Adsense（グーグルアドセンス）等の広告を自由に設置することができます。
コードなどをペーストするだけで簡単に設置することができますが、こちらもカスタマイズをすることで、記事中に自動表示させたりすることができます。
設置方法
記事中やサイドバーに広告を挿入するのはコードをコピーペーストするだけなので簡単にできますよ。
詳しくはこちらの記事がおすすめです。
affiliate-hatekun.hatenablog.com
記事中に自動挿入する方法
上記の方法では自分の好きな場所に広告を貼ることができますが、すべての記事にコードを貼るのは大変ですよね。
そのため、サイドバーや記事下には上記の方法で、記事中には以下のような自動挿入を利用すると便利です。
あとがき
以上、はてなブログをカスタマイズする際に参考になる記事のまとめでした。
HTMLやCSSの知識がなくてもコピペでOKといったカスタマイズがたくさんあるので、誰でもブログのデザインを楽しめると思いますよ。
はてなブログを始めたばかりの方はこちらで紹介した記事を参考にブログのカスタマイズをしてみてください。
