【はてなブログ】関連記事のデザインカスタマイズ方法とサンプル19選

はてなブログが公式に関連記事に対応するように

2017年6月13日〜はてなブログ公式で記事下に関連記事が表示されようになりました。

はてなブログでは、記事ページ（個別記事のパーマネントリンク表示）の本文下（ソーシャルパーツを表示していればその下）に、関連記事を表示するようにしました。そのブログに投稿された記事から、表示中の内容に関連するとみられるものを最大5件まで、一覧形式で表示します。

はてなブログ公式ブログ

これまでは関連記事を表示させるためには、ユーザーにより作られた非公式のブログパーツを使う必要があったのですが、そのようなパーツを使う必要が無くなったわけですね。

オフにする方法

新しく導入された関連記事表示は、初期設定ではオンになっています。とはいえ「非公式のものを使いたい」などの理由でオフにしたいという方も多いかと思います。

オフにするためには、デザイン設定画面のから関連記事表示のチェックを外せばOKです。

PCとスマホで別々の設定にすることも可能

（PC表示）と、（モバイル表示）にそれぞれチェックボックスがあります。そのため「モバイル表示のときだけ公式の関連記事を表示させる」というようなこともできます。

公式で表示させるメリット

おそらく非公式のパーツを使うより軽いんじゃないかと予想しています。あいにく僕は非公式パーツを使っていないので今回は表示速度比較は行いません。どなたかが比較記事を書いて頂ければ、ここに追記（リンク）しようと思います。

関連性の判断基準は不明

少しテストしてみたのですが、関連性判断の基準がまったく掴めません。別のカテゴリーに属する記事でも関連記事として選ばれたりします。「本文やタイトルのキーワードを見ているのかな？」と思ったのですが、共通のキーワードが見当たらなくても、関連記事として表示されたりします。
はてなさんが、文脈などから関連性を判断するとは思えないので、上記のどちらかだと思うのですが…。まだ安定していないのかもしれませんね。

関連記事のデザインをカスタマイズ（PC表示）

ここからは公式の関連記事をカスタマイズする方法を紹介します。まずはデスクトップ（PC）表示のデザインから。12パターン紹介するので、気に入ったものがあれば是非ご利用くださいませ。ただし、どれも各記事にアイキャッチ画像をしているとき用のデザインです。ご了承ください。

使い方

気に入ったデザインがあれば、そのCSSをまるっとコピーして、はてなブログの［デザインカスタマイズ］⇒［］⇒［{} デザインCSS］に貼り付けてください。必要に応じて色などを変えて頂ければ思います。

カスタマイズ前

初期設定では、上のようなデザインになっているかと思います（テーマにより見出しや配色に差があります）。これでも問題ないかと思いますが、より華やかなものにしていきたいと思います。

1：シンプル

シンプルに文字周りと区切り線のデザインを変えてみました。文字にカーソルを当てると、色がグレイに変わります。

2：点線バージョン

区切り線が点線になったバージョンです。それ以外はさきほどと同じです。

3：本文の抜粋を少し控えめに

さきほどとの違いが分かりづらいのですが、本文の抜粋テキストをグレイに、かつサイズを小さくしてみました。

4：日付まわりをおしゃれに

日付の周りを淡い水色で塗りつぶしました。色を変えたい場合は、CSSの「background: #AAD1F2;」という部分を好きな色コードに書き換えればOKです。なお、日付のフォントにはGoogleFontsのQuicksandを使っています。導入方法は下の記事でイチから解説しています。

【2019年版】Google Fontsの使い方：初心者向けに解説！

5：黄色バージョン

日付まわりを黄色っぽい配色に変えてみました。それ以外はさきほどと同じです。

6：背景をグレイに

それぞれの関連記事の背景をグレイに塗ってみました。余白も調整しています。問題は、記事へのリンクになっているのが「画像」と「記事タイトル」だけという点です。グレイの部分、全体がクリックできそうに見えてしまうので、ちょっと分かりづらいのですよね…（はてなの仕様的に、リンクの位置を変えることができないのです）。

7： 画像まわりの余白を消す

画像まわりの余白を消してみました。このあたりは好みですね。

8：囲み枠バージョン

黒い枠で囲ってみました。少しクドく見えてしまうかもしれませんね。

9：枠線を薄く

枠線色を薄くし、日付の色も調整しました。また、画像を一回り大きいサイズで表示するようにしています。

10：日付を画像の上に

日付がアイキャッチ画像の左上に配置されるようにしてみました。少し関連記事らしくなりましたね。

11：影付き

日付を左上に少しはみ出るように配置し、さらにまわりに影をつけることで「ラベル」感を出してみました。

12：カード風

背景をグレイに塗りつぶし、そのまわりに影をつけてみました。全体がクリックできそうに見えますが、「画像」と「タイトル」しかリンクになっていないのがやや難点。

スマホ編

次にスマホ用の関連記事をカスタマイズしましょう（はてなブログでは「レスポンシブデザイン用のテンプレート」を使用していない限り、デスクトップ（パソコン）とモバイルで表示が切り替わることになります）。

どこにCSSを貼り付ければ良い？

スマホ表示用のCSSは、デザインカスタマイズ⇒［］⇒［ヘッダ］⇒［タイトル下］の枠内に<style></style>と書き、その中に記述します。

カスタマイズ前

初期設定ではこのようなデザインになっています。少し物足りなさを感じるような気もしますね。

1：シンプル

余白まわりを調整しただけのものです。「関連記事」という見出しのデザインも合わせて変えてみました。

2：日付まわりに色をつける

さきほどのデスクトップ表示のデザインと同じパターンですが「記事本文の抜粋」をdisplay:noneという指定で非表示にしています。SEO的によろしくないという噂のある「display:none」ですが、この程度であれば問題はないはず。

3：背景をグレイに

背景をグレイで塗っています。くどい印象にならないよう、見出しはシンプルなデザインにしています。

4：枠で囲んだ場合

枠付きのデザインです。このくらいのデザインが適度で良いような気もします。

5：日付を左上に配置した場合

日付を枠の左上に配置してみました。こちらも色は好みで変えてくださいませ（background: #~というところで色コードを指定します）。

6：ラベル風

日付がラベル風に枠からはみ出るように配置したものです。影もつけています。

7：ラベル風カード風

全体に影をつけたカード風のデザインです。目立たせたいときに使うと良いかもしれませんね。