はてなブログで行ってきたカスタマイズをまとめました。
全くの初心者が、他のサイトで紹介されているコードを見ながら何とかここまで来れました。確かに素人ですが、紹介されているカスタマイズ一覧をそのままコピペするのではなく、「もしこれが出来れば、もっと見やすくなるのに」と思ったことがあれば、自分で調べて推測しつつまさに手探りでサイトを作ってきました。
サイト構成の見やすさを改善して、回遊率を上げたい人はぜひ参考にしてみてください。
PC、スマホ共通
目次を自動で生成
記事の冒頭に、目次を自動で入れてくれます。記事に毎回、目次を埋め込む必要がありませんし、過去の記事にも自動的に挿入されます。目次機能に後で気が付いて、全部変更するのが面倒な場合にいいのではないでしょうか。
ちなみに目次はあった方が読みやすくなります。何が記事に書いてあるのかを予告することにもなりますので。
記事下に関連記事を表示
表示されている記事と同じカテゴリーから関連記事をきれいに作成する方法が紹介されています。直帰率の改善につながるでしょう。
パンくずリストの作成方法
〇〇＞〇〇＞〇〇というように記事が属しているカテゴリが記事上や下に表示される機能です。これによってGoogleからの評価がよくなるようです。
実際にどれほどよくなるのかわかりませんが、読者にとって、今どのカテゴリーの記事を読んでいるのかがわかり、一つの記事を読み終わった後に同じカテゴリーの記事を探す手がかりになります。
グローバルナビの設置
グローバルナビがあると、カテゴリー分類もわかり易くなり、どのサイトにも2クリック以内で到達できるようになります。
できるだけ訪問者にクリックさせないで見たいものにたどり着けるようにサイトを設計することで、訪問者の満足度も上がります。そのうえ、自分で自サイトの特定の記事を探す際にも便利です。
タイトルを画像に変更する
タイトル画像としてはPC画面用には200（高さ）×960（幅）、スマホは320（高さ）×200 （幅）の画像を用意しました。PC用は個々のブログの設定で異なりますのでChromeでコードを直接見て確認してください。
しかし、そのように作った画像をアップロードしても、タイトル下とグローバルメニューの間に余白が出来てしまいます。
この余白分だけ、記事が表示されるスペースが少なくなることを考えると、タイトル・ヘッダーは出来るだけ少ないスペースを与えるのがいいでしょう。そこで参考にしたのが以下のサイトです。
画面の大きさによって画像の端が切れてしまうことがあります。これを何とかしたい、ということでPC版は以下のサイトを参考にしました。
Googleウェブマスターツール
Googleからどのような言葉による検索で自分のどのページがクリックされているのかがわかるようになります。これで、検索されていないページを見つけて重点的にSEO対策を行うことも可能となります。
Bingウェブマスターツール
Googleのウェブマスターツールのマイクロソフトバージョンです。
はてなブログでGoogleウェブマスターツールへ登録してグーグル検索を気にしている人は多いかもしれませんが、Bingウェブマスターツールに登録している人は少ないかもしれません。
確かにBingはグーグルに比べて使っている人は少ないでしょうが、登録しておいて損はないはずです。
シェアボタンのカスタマイズ
記事のシェアボタンやフォローボタンはデフォルトだと見た目に統一感がないのでカスタマイズしています。特にはてブボタンは被リンク数を上げて検索順位向上にも寄与するキーとなるボタンです。
かっこいいのを作りましょう！
太字に背景マーカーを付ける
デフォルトの太字表記だけでは強調が足りず、文章の中に埋もれてしまいます。そこで、背景にマーカーを付けるとより文章の中の濃淡がはっきりして、強調した箇所に読者の注意を向けられます。
リンクの色の変更
リンクの色はデフォルトでは青＋下線です。確かに青だとリンクだとすぐ認識してもらえますが、個性がないように見える場合があります。自分のカラーとして決めている色に合わせることでサイトの統一感も生まれます。
Webアイコンの使い方
文字と写真だけのサイトだったらつまらないかもしれません。そのため、アイコンを使ってみてはどうでしょうか。
私ははてなのアイコンを、スマホ用の下部メニューバーで使用しています。視認性が少しは向上しているのではないでしょうか。
Webアイコンのカスタマイズ方法（色、大きさ、角度等の調整）
上に紹介したアイコンですが、灰色がデフォルトになっていることが多いです。しかし、背景から浮かび上がらせるために、白抜きにしたいという場合もあるでしょう。
素人だったので、この方法が全くわかりませんでしたが、下のサイトを参考にすれば可能です。
オブジェクトに透過性を持たせる方法
これは、スマホ画面の下部メニューバーを半透明にするために、利用しました。
メニューバーを半透明にすることで、バーの後ろにも記事がうっすらと見え、それによって逆にバーの存在に気付いてくれるようにという考えからです。
トップページを「～/archive」へ変更する方法
トップページをクリックしたときに、「～/archive」ページに飛ばす方法です。個人的には「続きを読む」で記事を省略して紹介した一覧ページよりも、「サイトURL/archive」の記事一覧ページのほうが見やすいと考えています。
アフィリエイト系
これまではアマゾンのリンクを記事に張り付けて終わりでした。
しかしはてなProに切り替えてからは、少なくとも払った分は取り戻したいと思うようになりました。そこで、楽天とアマゾン両方のリンクを同時に貼れるようにカエレバとヨメレバを導入しました。
その表示がデフォルトでは何かぎこちないので、以下の記事を参考にカスタマイズしています。
カエレバでうまく楽天リンクが表示されない場合の対処法の記事も以下に備忘録として載せています。
アドセンス関連
記事下かつシェアボタンの前にアドセンスを配置する際に参考にさせていただきました。デフォルトではシェアボタンの下にしかアドセンスは配置できず、一番おいしい場所である記事直下には配置できません。
私は使用していませんが、アドセンス広告を記事の中に入れたりする方法についての記事が以下の記事になります。ただ私は当分の間はアドセンスを記事中に入れることはありません。あくまで広告はおまけで、記事が中心というスタンスをとっています。
ドメイン変更時の作業一覧
ドメインを独自ドメインにしたので、そのドメイン取得方法と、その後の必要作業を確認する上で以下のサイトを参考にいたしました。
PC専用
ドロップダウン型グローバルナビの設置
せっかくブログに来てもらっても見たい記事が見当たらないから直帰、というのは非常に残念です。他にも記事を書いているので、それが簡単に見つかるようにという思いでグローバルナビを作りました。
サイドバーをタブ化
サイドバーでは、デフォルトで縦に並んでいた、最新記事や人気記事、月別というものをタブで切り替えられるようにしています。直感的に操作できるため、かなり見やすくなっていると思います。
サイドバーのカスタマイズ
サイドバーの各欄の上にアイコンが表示されています。これをカスタマイズする方法や、各欄のデザインの変更方法が以下の記事で紹介されています。
スマホ専用
下部に固定メニューバーを設置する方法
スマホ用画面ではどこにどんな記事があるのかがすぐに見つからないことも多く、そうなると直帰率が上がります。人気やはてブ数の多い記事、新着やカテゴリー一覧がすぐに見つかるように固定のバーを画面下に設置しています。基本は読者の方に「探さなくても面白そうな記事が自動的に見つかる」というのが理想と考えています。
個人的にはかなり気に入っており、直帰率の大幅改善につながっているのではないかと思います。
ヘッダーをすっきり（未使用）
ヘッダーはデフォルトだと写真とブログ説明文があり、ごちゃごちゃした印象を与えてしまいます。その一つの解決方法を下の記事は紹介してくれています。
不要な要素を削除（Pro用）
はてなブログだと、不要な要素が画面表示されてしまします。
絶対消しましょう！
スクロールバーの二重表示解消
Chromeでスマホ用画面を確認しているときに気付いたのですが、ブログ全体と記事で二重にスクロールバーが表示されてしまいます。
携帯においてChromeを使って閲覧されている方には不便になってしまうので、対策は取っておきましょう。
その他
データバックアップの方法
いつ何が起きるかわかりません。はてながつぶれることはないとしても、障害が起きて、記事がなくなるかもしれないことを考えて、記事のバックアップは取っておきましょう。クリック一つで出来ます。
但し、このバックアップは記事しかカバーしていないので、デザインは別途自分でバックアップをとっておく必要があります。
私のブログデザインを更新していく毎に、本記事も逐次更新していきます。参考になれば幸いです。
他にも以下のような記事も書いております。