読者です 読者をやめる 読者になる 読者になる

元コンサルタントな歴史家―ドイツから見た日本

大学で近代日独軍事史を研究する伊藤智央のエッセイ。ドイツと日本に関する批判的な評論を中心に海外生活(留学や移住)の実態をお伝えしています。その際には元戦略コンサルタントとしての経験も踏まえてわかり易くお伝えできればと思います。

【完全保存版】はてなブログでのカスタマイズはこれを見ればすべてわかる!

ブログ運営

はてなブログで行ってきたカスタマイズをまとめました。

全くの初心者が、他のサイトで紹介されているコードを見ながら何とかここまで来れました。確かに素人ですが、紹介されているカスタマイズ一覧をそのままコピペするのではなく、「もしこれが出来れば、もっと見やすくなるのに」と思ったことがあれば、自分で調べて推測しつつまさに手探りでサイトを作ってきました。

確かに無駄にはまってしまったりして記事内容そっちのけになることもありますが、サイト構成の見やすさを改善することは一般的に以下のような効果があります。

  • サイトへの信頼度・親近感のアップ
  • 回遊率の上昇・直帰率の減少→PVアップ
  • ブログでの収益率アップ

そのため、サイトデザインは自己満足にしかすぎないと馬鹿にしてはいけません。デザインを馬鹿にするものはデザインで泣きます。

PC、スマホ共通

目次を自動で生成

記事の冒頭に、目次を自動で入れてくれます。記事に毎回、目次を埋め込む必要がありませんし、過去の記事にも自動的に挿入されます。目次機能に後で気が付いて、全部変更するのが面倒な場合にいいのではないでしょうか。
ちなみに目次はあった方が読みやすくなります。何が記事に書いてあるのかを予告することにもなりますので。

nohack-nolife.hatenablog.com

記事下に関連記事を表示

表示されている記事と同じカテゴリーから関連記事をきれいに作成する方法が紹介されています。直帰率の改善につながるでしょう。

www.yukihy.com

tsundoku-diary.scriptlife.jp

外部サイトに頼ったプラグインは読み込みが遅くなります。そこで、はてなブログ標準装備の「関連記事」を使って、記事下に関連記事を表示させる方法もあります。
この場合、同カテゴリーの最新5記事が表示されますが、ランダム表示ではないという点と表示できる記事数が5つと限られていることがネックです。

www.aritai.net

パンくずリストの作成方法

〇〇>〇〇>〇〇というように記事が属しているカテゴリが記事上や下に表示される機能です。これによってGoogleからの評価がよくなるようです。
実際にどれほどよくなるのかわかりませんが、読者にとって、今どのカテゴリーの記事を読んでいるのかがわかり、一つの記事を読み終わった後に同じカテゴリーの記事を探す手がかりになります。

bulldra.hatenablog.com

(追記)
はてなブログではパンくずリストが標準装備となりました。但し子カテゴリが表示されないのとスマホ未対応なのがネックです。

staff.hatenablog.com

グローバルナビの設置

グローバルナビがあると、カテゴリー分類もわかり易くなり、どのサイトにも2クリック以内で到達できるようになります。

できるだけ訪問者にクリックさせないで見たいものにたどり着けるようにサイトを設計することで、訪問者の満足度も上がります。そのうえ、自分で自サイトの特定の記事を探す際にも便利です。

weboook.blog22.fc2.com

theorthodoxworks.com

タイトルを画像に変更する

タイトル画像としてはPC画面用には200(高さ)×960(幅)、スマホは320(高さ)×200 (幅)の画像を用意しました。PC用は個々のブログの設定で異なりますのでChromeでコードを直接見て確認してください。
しかし、そのように作った画像をアップロードしても、タイトル下とグローバルメニューの間に余白が出来てしまいます。
この余白分だけ、記事が表示されるスペースが少なくなることを考えると、タイトル・ヘッダーは出来るだけ少ないスペースを与えるのがいいでしょう。そこで参考にしたのが以下のサイトです。

www.future-nova.com

katamarichan.hatenablog.jp

画面の大きさによって画像の端が切れてしまうことがあります。これを何とかしたい、ということでPC版は以下のサイトを参考にしました。

kurosuke.org

会話を吹き出し形式にする

タイトルのままですが、こういう吹き出しです。

 
完成イメージです

 

 
なるほど、これで見やすくなるね

 

 

georges.hatenablog.jp

アコーディオンのように開閉式のボックスを埋め込む

記事の中で、クリックしてもらうと開くような仕組みを作りたいときがあります。そのような場合に便利なのが以下のカスタマイズです。

例えば、これをクリックして開いてみてください。新しい文が出てくると思います。

これが完成イメージです

質問と回答をクリックで開閉する方法 - Jimdo虎の巻

Googleウェブマスターツール

Googleからどのような言葉による検索で自分のどのページがクリックされているのかがわかるようになります。これで、検索されていないページを見つけて重点的にSEO対策を行うことも可能となります。

wispyon.com

Bingウェブマスターツール

Googleのウェブマスターツールのマイクロソフトバージョンです。
はてなブログでGoogleウェブマスターツールへ登録してグーグル検索を気にしている人は多いかもしれませんが、Bingウェブマスターツールに登録している人は少ないかもしれません。
確かにBingはグーグルに比べて使っている人は少ないでしょうが、登録しておいて損はないはずです。

www.41web.jp

シェアボタンのカスタマイズ

記事のシェアボタンやフォローボタンはデフォルトだと見た目に統一感がないのでカスタマイズしています。特にはてブボタンは被リンク数を上げて検索順位向上にも寄与するキーとなるボタンです。
かっこいいのを作りましょう!

www.minamisouju.com

www.yukihy.com

太字に背景マーカーを付ける

デフォルトの太字表記だけでは強調が足りず、文章の中に埋もれてしまいます。そこで、背景にマーカーを付けるとより文章の中の濃淡がはっきりして、強調した箇所に読者の注意を向けられます。

www.ituore.com

リンクの色の変更

リンクの色はデフォルトでは青+下線です。確かに青だとリンクだとすぐ認識してもらえますが、個性がないように見える場合があります。自分のカラーとして決めている色に合わせることでサイトの統一感も生まれます。

midori32.hatenablog.com

Webアイコンの使い方

文字と写真だけのサイトだったらつまらないかもしれません。そのため、アイコンを使ってみてはどうでしょうか。
私ははてなのアイコンを、スマホ用の下部メニューバーで使用しています。視認性が少しは向上しているのではないでしょうか。

shirokai.hatenablog.com

Webアイコンのカスタマイズ方法(色、大きさ、角度等の調整)

上に紹介したアイコンですが、灰色がデフォルトになっていることが多いです。しかし、背景から浮かび上がらせるために、白抜きにしたいという場合もあるでしょう。
素人だったので、この方法が全くわかりませんでしたが、下のサイトを参考にすれば可能です。

serinaishii.hatenablog.com

オブジェクトに透過性を持たせる方法

これは、スマホ画面の下部メニューバーを半透明にするために、利用しました。
メニューバーを半透明にすることで、バーの後ろにも記事がうっすらと見え、それによって逆にバーの存在に気付いてくれるようにという考えからです。

hataraku-ikiru.com

トップページを「~/archive」へ変更する方法

トップページをクリックしたときに、「~/archive」ページに飛ばす方法です。個人的には「続きを読む」で記事を省略して紹介した一覧ページよりも、「サイトURL/archive」の記事一覧ページのほうが見やすいと考えています。

www.ito-tomohide.com

アフィリエイト系

これまではアマゾンのリンクを記事に張り付けて終わりでした。
しかしはてなProに切り替えてからは、少なくとも払った分は取り戻したいと思うようになりました。そこで、楽天とアマゾン両方のリンクを同時に貼れるようにカエレバとヨメレバを導入しました。
その表示がデフォルトでは何かぎこちないので、以下の記事を参考にカスタマイズしています。

www.ituore.com

www.yukihy.com

カエレバでうまく楽天リンクが表示されない場合の対処法の記事も以下に備忘録として載せています。

mitsuyahideto.com

アドセンス・広告関連

記事下かつシェアボタンの前にアドセンスを配置する際に参考にさせていただきました。デフォルトではシェアボタンの下にしかアドセンスは配置できず、一番おいしい場所である記事直下には配置できません。

chipspd.hatenadiary.jp

広告を記事の中に自動で入れる方法については以下の記事が参考になります。

uxlayman.hatenablog.com

最後の見出しの前に広告を入れる方法については、以下の記事が参考になります。私は最後の見出しの下に関連記事を3-4個リンクの形で紹介しているので、その前に広告を入れる方法を探していました。

www.toma-g.net

挿入したYouTubeビデオの読み込みを速くする方法

複数のビデオをYouTubeサイトから直接はめ込むとサイトの読み込みが遅くなります。Javascriptを使うことでビデオの読み込みが、表示画像をクリックした時点で行われるようにすることができます。
結果、サイトの読み込みが遅くなることはありません。

shiromatakumi.hatenablog.com

ドメイン変更時の作業一覧

ドメインを独自ドメインにしたので、そのドメイン取得方法と、その後の必要作業を確認する上で以下のサイトを参考にいたしました。

www.olmo-mig.com

www.meguminimal.com

メタディスクリプションの設定

メタディスクリプションは設定してしまいがちですが、実ははてなブログで設定すると、HTMLが重複して表示されてしまうので、グーグルからの評価が下がってしまいます。空欄にするのが上策です。

www.pojihiguma.com

PC専用

ドロップダウン型グローバルナビの設置

せっかくブログに来てもらっても見たい記事が見当たらないから直帰、というのは非常に残念です。他にも記事を書いているので、それが簡単に見つかるようにという思いでグローバルナビを作りました。

blog.sukecom.net

サイドバーをタブ化

サイドバーでは、デフォルトで縦に並んでいた、最新記事や人気記事、月別というものをタブで切り替えられるようにしています。直感的に操作できるため、かなり見やすくなっていると思います。

www.yukihy.com

サイドバーのカスタマイズ

サイドバーの各欄の上にアイコンが表示されています。これをカスタマイズする方法や、各欄のデザインの変更方法が以下の記事で紹介されています。

www.a-s-blog.com

画面右下に「上に戻る」ボタンを表示させる

長い記事だと、スクロールして上に戻るのが面倒です。そのため、ボタンを押せば自動で上まで戻ってくれる機能を実装しました。これさえあれば、長い記事のデメリットも解消できます。

nohack-nolife.hatenablog.com

スマホ専用

下部に固定メニューバーを設置する方法

スマホ用画面ではどこにどんな記事があるのかがすぐに見つからないことも多く、そうなると直帰率が上がります。人気やはてブ数の多い記事、新着やカテゴリー一覧がすぐに見つかるように固定のバーを画面下に設置しています。基本は読者の方に「探さなくても面白そうな記事が自動的に見つかる」というのが理想と考えています。
個人的にはかなり気に入っており、直帰率の大幅改善につながっているのではないかと思います。

www.yukihy.com

ヘッダーをすっきり(未使用)

ヘッダーはデフォルトだと写真とブログ説明文があり、ごちゃごちゃした印象を与えてしまいます。その一つの解決方法を下の記事は紹介してくれています。

www.yukihy.com

不要な要素を削除(Pro用)

はてなブログだと、不要な要素が画面表示されてしまします。
絶対消しましょう!

bookterabyte.hateblo.jp

bulldra.hatenablog.com

スクロールバーの二重表示解消

Chromeでスマホ用画面を確認しているときに気付いたのですが、ブログ全体と記事で二重にスクロールバーが表示されてしまいます。
携帯においてChromeを使って閲覧されている方には不便になってしまうので、対策は取っておきましょう。

chipspd.hatenadiary.jp

その他

データバックアップの方法

いつ何が起きるかわかりません。はてながつぶれることはないとしても、障害が起きて、記事がなくなるかもしれないことを考えて、記事のバックアップは取っておきましょう。クリック一つで出来ます。
但し、このバックアップは記事しかカバーしていないので、デザインは別途自分でバックアップをとっておく必要があります。

www.ankopan.com

私のブログデザインを更新していく毎に、本記事も逐次更新していきます。参考になれば幸いです。

他にも以下のような記事も書いております。

関連する記事