はてなブログで行ってきたカスタマイズをまとめました。
全くの初心者が、他のサイトで紹介されているコードを見ながら何とかここまで来れました。確かに素人ですが、紹介されているカスタマイズ一覧をそのままコピペするのではなく、「もしこれが出来れば、もっと見やすくなるのに」と思ったことがあれば、自分で調べて推測しつつまさに手探りでサイトを作ってきました。
確かに無駄にはまってしまったりして記事内容そっちのけになることもありますが、サイト構成の見やすさを改善することは一般的に以下のような効果があります。
- サイトへの信頼度・親近感のアップ
- 回遊率の上昇・直帰率の減少→PVアップ
- ブログでの収益率アップ
そのため、サイトデザインは自己満足にしかすぎないと馬鹿にしてはいけません。デザインを馬鹿にするものはデザインで泣きます。
PC、スマホ共通
GDPRへの対応
2018年からEUによって導入された個人情報の保護に関する規制に対応するために、サイトを開けた際に画面下にポップアップが登場するようにカスタマイズする必要があります。その時に便利なのが以下のサイトです。
簡単に、コードが作成でき、できたコードをヘッダーに挿入するだけで、完成です。
Cookie Consent by Insites - The most popular solution to the EU cookie law
目次を自動で生成
記事の冒頭に、目次を自動で入れてくれます。記事に毎回、目次を埋め込む必要がありませんし、過去の記事にも自動的に挿入されます。目次機能に後で気が付いて、全部変更するのが面倒な場合にいいのではないでしょうか。
ちなみに目次はあった方が読みやすくなります。何が記事に書いてあるのかを予告することにもなりますので。
記事下に関連記事を表示
表示されている記事と同じカテゴリーから関連記事をきれいに作成する方法が紹介されています。直帰率の改善につながるでしょう。
外部サイトに頼ったプラグインは読み込みが遅くなります。そこで、はてなブログ標準装備の「関連記事」を使って、記事下に関連記事を表示させる方法もあります。
この場合、同カテゴリーの最新5記事が表示されますが、ランダム表示ではないという点と表示できる記事数が5つと限られていることがネックです。
パンくずリストの作成方法
〇〇＞〇〇＞〇〇というように記事が属しているカテゴリが記事上や下に表示される機能です。これによって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に切り替えてからは、少なくとも払った分は取り戻したいと思うようになりました。そこで、楽天とアマゾン両方のリンクを同時に貼れるようにカエレバとヨメレバを導入しました。
その表示がデフォルトでは何かぎこちないので、以下の記事を参考にカスタマイズしています。
カエレバでうまく楽天リンクが表示されない場合の対処法の記事も以下に備忘録として載せています。
アドセンス・広告関連
記事下かつシェアボタンの前にアドセンスを配置する際に参考にさせていただきました。デフォルトではシェアボタンの下にしかアドセンスは配置できず、一番おいしい場所である記事直下には配置できません。
広告を記事の中に自動で入れる方法については以下の記事が参考になります。
挿入したYouTubeビデオの読み込みを速くする方法
複数のビデオをYouTubeサイトから直接はめ込むとサイトの読み込みが遅くなります。Javascriptを使うことでビデオの読み込みが、表示画像をクリックした時点で行われるようにすることができます。
結果、サイトの読み込みが遅くなることはありません。
ドメイン変更時の作業一覧
ドメインを独自ドメインにしたので、そのドメイン取得方法と、その後の必要作業を確認する上で以下のサイトを参考にいたしました。
メタディスクリプションの設定
メタディスクリプションは設定してしまいがちですが、実ははてなブログで設定すると、HTMLが重複して表示されてしまうので、グーグルからの評価が下がってしまいます。空欄にするのが上策です。
PC専用
ドロップダウン型グローバルナビの設置
せっかくブログに来てもらっても見たい記事が見当たらないから直帰、というのは非常に残念です。他にも記事を書いているので、それが簡単に見つかるようにという思いでグローバルナビを作りました。
サイドバーをタブ化
サイドバーでは、デフォルトで縦に並んでいた、最新記事や人気記事、月別というものをタブで切り替えられるようにしています。直感的に操作できるため、かなり見やすくなっていると思います。
サイドバーのカスタマイズ
サイドバーの各欄の上にアイコンが表示されています。これをカスタマイズする方法や、各欄のデザインの変更方法が以下の記事で紹介されています。
画面右下に「上に戻る」ボタンを表示させる
長い記事だと、スクロールして上に戻るのが面倒です。そのため、ボタンを押せば自動で上まで戻ってくれる機能を実装しました。これさえあれば、長い記事のデメリットも解消できます。
スマホ専用
下部に固定メニューバーを設置する方法
スマホ用画面ではどこにどんな記事があるのかがすぐに見つからないことも多く、そうなると直帰率が上がります。人気やはてブ数の多い記事、新着やカテゴリー一覧がすぐに見つかるように固定のバーを画面下に設置しています。基本は読者の方に「探さなくても面白そうな記事が自動的に見つかる」というのが理想と考えています。
個人的にはかなり気に入っており、直帰率の大幅改善につながっているのではないかと思います。
ヘッダーをすっきり（未使用）
ヘッダーはデフォルトだと写真とブログ説明文があり、ごちゃごちゃした印象を与えてしまいます。その一つの解決方法を下の記事は紹介してくれています。
不要な要素を削除（Pro用）
はてなブログだと、不要な要素が画面表示されてしまします。
絶対消しましょう！
スクロールバーの二重表示解消
Chromeでスマホ用画面を確認しているときに気付いたのですが、ブログ全体と記事で二重にスクロールバーが表示されてしまいます。
携帯においてChromeを使って閲覧されている方には不便になってしまうので、対策は取っておきましょう。
その他
データバックアップの方法
いつ何が起きるかわかりません。はてながつぶれることはないとしても、障害が起きて、記事がなくなるかもしれないことを考えて、記事のバックアップは取っておきましょう。クリック一つで出来ます。
但し、このバックアップは記事しかカバーしていないので、デザインは別途自分でバックアップをとっておく必要があります。
私のブログデザインを更新していく毎に、本記事も逐次更新していきます。参考になれば幸いです。
