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

はてなブログ 関連記事カスタマイズ

記事内に商品プロモーションが含まれる場合があります

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

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

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


はてなブログ公式ブログ

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

オフにする方法

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

関連記事をオフにする方法

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

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

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

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

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

関連性の判断基準は不明

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

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

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

使い方

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

カスタマイズ前

Dada

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

1:シンプル

Dgada 31

コードを表示
CSS
/*1つ1つの関連記事ボックス*/ li.urllist-item.related-entries-item { border-bottom: solid 2px #ececec; margin: 0; padding: 10px 0; } /*関連記事の画像まわり余白調整*/ .urllist-with-thumbnails li .urllist-image { margin: 0 10px 0 0; } /*関連記事のタイトル*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title { text-decoration: none; color: #525252; font-weight: bold; } /*関連記事のタイトル*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title:hover { color: silver; }

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

2:点線バージョン

点線

コードを表示
CSS
/*1つ1つの関連記事ボックス*/ li.urllist-item.related-entries-item { border-bottom: dashed 2px #e2e2e2; padding: 10px 0; } /*関連記事の画像まわり余白調整*/ .urllist-with-thumbnails li .urllist-image { margin: 0 10px 0 0; } /*関連記事のタイトル*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title { text-decoration: none; color: #525252; font-weight: bold; } /*関連記事のタイトル*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title:hover { color: silver; }

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

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

Gada 1

コードを表示
CSS
/*1つ1つの関連記事ボックス*/ li.urllist-item.related-entries-item { border-bottom: dashed 2px #e2e2e2; padding: 10px 0; margin: 0; } /*関連記事の画像まわり余白調整*/ .urllist-with-thumbnails li .urllist-image { margin: 0 10px 0 0; } /*関連記事のタイトル*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title { text-decoration: none; color: #525252; font-weight: bold; } /*関連記事のタイトル*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title:hover { color: silver; } /*関連記事の説明*/ .urllist-entry-body.related-entries-entry-body { color: #8f8f8f; font-size: 13px; margin-top: 3px; }

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

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

Dgada 33

コードを表示
CSS
/*1つ1つの関連記事ボックス*/ li.urllist-item.related-entries-item { border-bottom: dashed 2px #e2e2e2; padding: 10px 0; margin: 0; } /*関連記事の画像まわり余白調整*/ .urllist-with-thumbnails li .urllist-image { margin: 0 10px 0 0; } /*関連記事のタイトル*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title { text-decoration: none; color: #525252; font-weight: bold; } /*関連記事のタイトルホバー*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title:hover { color: silver; } /*関連記事の説明*/ .urllist-entry-body.related-entries-entry-body { color: #8f8f8f; font-size: 13px; margin-top: 3px; } /*関連記事の日付*/ .hatena-urllist .urllist-date-link a { display: inline-block; padding: 4px 9px; margin-bottom: 3px; background: #AAD1F2; color: #fff; line-height: 1; border-radius: 10px; font-size: 12px; letter-spacing: 1px; font-style: normal; text-decoration: none; }

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

5:黄色バージョン

Da

コードを表示
CSS
/*1つ1つの関連記事ボックス*/ li.urllist-item.related-entries-item { border-bottom: dashed 2px #e2e2e2; padding: 10px 0; margin: 0; } /*関連記事の画像まわり余白調整*/ .urllist-with-thumbnails li .urllist-image { margin: 0 10px 0 0; } /*関連記事のタイトル*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title { text-decoration: none; color: #525252; font-weight: bold; } /*関連記事のタイトルホバー*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title:hover { color: silver; } /*関連記事の説明*/ .urllist-entry-body.related-entries-entry-body { color: #8f8f8f; font-size: 13px; margin-top: 3px; } /*関連記事の日付*/ .hatena-urllist .urllist-date-link a { display: inline-block; padding: 4px 6px; margin-bottom: 3px; background: #fff1dc; color: #ffc36a; line-height: 1; border-radius: 4px; font-size: 11px; letter-spacing: 1px; font-style: normal; text-decoration: none; }

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

6:背景をグレイに

Dgada 34

コードを表示
CSS
/*1つ1つの関連記事ボックス*/ li.urllist-item.related-entries-item { margin: 15px 0; padding: 10px; background: #eeeeee; border-bottom: none; } /*関連記事の画像まわり余白調整*/ .urllist-with-thumbnails li .urllist-image { margin: 0 10px 0 0; } /*関連記事のタイトル*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title { text-decoration: none; color: #525252; font-weight: bold; } /*関連記事のタイトルホバー*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title:hover { color: silver; } /*関連記事の説明*/ .urllist-entry-body.related-entries-entry-body { color: #8f8f8f; font-size: 13px; margin-top: 3px; } /*関連記事の日付*/ .hatena-urllist .urllist-date-link a { display: inline-block; background: #93c4cf; color: #fff; line-height: 1; padding: 4px 9px; margin-bottom: 3px; border-radius: 4px; font-size: 11px; letter-spacing: 1px; font-style: normal; text-decoration: none; }

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

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

Dgada 36

コードを表示
CSS
/*1つ1つの関連記事ボックス*/ li.urllist-item.related-entries-item { margin: 11px 0; padding: 10px 10px 10px 0; border-bottom: none; background: #eeeeee; } /*関連記事の画像の大きさ*/ img.urllist-image.related-entries-image { width: 120px; margin-top: -10px; margin-bottom: -10px; } /*関連記事のタイトル*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title { text-decoration: none; color: #525252; font-weight: bold; } /*関連記事のタイトル*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title:hover { color: silver; } /*関連記事の説明*/ .urllist-entry-body.related-entries-entry-body { color: #8f8f8f; font-size: 13px; margin-top: 3px; } /*関連記事の日付*/ .hatena-urllist .urllist-date-link a { display: inline-block; background: #93c4cf; color: #fff; line-height: 1; padding: 4px 5px; margin-bottom: 3px; border-radius: 4px; font-size: 11px; font-style: normal; text-decoration: none; }

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

8:囲み枠バージョン

Dgada 37

コードを表示
CSS
/*1つ1つの関連記事ボックス*/ li.urllist-item.related-entries-item { margin: 11px 0; padding: 10px 10px 10px 0; background: #ffffff; border: solid 2px #555; } /*関連記事の画像の大きさ*/ img.urllist-image.related-entries-image { width: 120px; margin-top: -10px; margin-bottom: -10px; border-right: 2px solid #555; } /*関連記事のタイトル*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title { text-decoration: none; color: #525252; font-weight: bold; } /*関連記事のタイトル*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title:hover { color: silver; } /*関連記事の説明*/ .urllist-entry-body.related-entries-entry-body { color: #8f8f8f; font-size: 13px; margin-top: 3px; } /*関連記事の日付*/ .hatena-urllist .urllist-date-link a { display: inline-block; background: #555; color: #fff; line-height: 1; padding: 4px 5px; margin-bottom: 3px; border-radius: 4px; font-size: 11px; font-style: normal; text-decoration: none; }

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

9:枠線を薄く

Dgada 38

コードを表示
CSS
/*1つ1つの関連記事ボックス*/ li.urllist-item.related-entries-item { margin: 11px 0; padding: 10px 10px 10px 0; background: #ffffff; border: solid 2px #e4e4e4; } /*関連記事の画像の大きさ*/ img.urllist-image.related-entries-image { width: 120px; margin-top: -10px; margin-bottom: -10px; border-right: 2px solid #e4e4e4; } /*関連記事のタイトル*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title { text-decoration: none; color: #525252; font-weight: bold; } /*関連記事のタイトル*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title:hover { color: silver; } /*関連記事の説明*/ .urllist-entry-body.related-entries-entry-body { color: #8f8f8f; font-size: 13px; margin-top: 3px; } .urllist-date-link.related-entries-date-link { position: relative; } /*関連記事の日付*/ .hatena-urllist .urllist-date-link a { display: inline-block; background: #ee8c8c; color: #fff; line-height: 1; padding: 4px 5px; margin-bottom: 3px; border-radius: 4px; font-size: 11px; font-style: normal; text-decoration: none; }

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

10:日付を画像の上に

Dga 5

コードを表示
CSS
/*1つ1つの関連記事ボックス*/ li.urllist-item.related-entries-item { margin: 11px 0; padding: 0 10px 0 0; background: #ffffff; border: solid 2px #e4e4e4; } /*関連記事の画像の大きさ*/ img.urllist-image.related-entries-image { border-right: 2px solid #e4e4e4; margin: 0 10px 0 0; } /*関連記事のタイトル*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title { display: inline-block; margin-top: 8px; text-decoration: none; color: #525252; font-weight: bold; } /*関連記事のタイトル*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title:hover { color: silver; } /*関連記事の説明*/ .urllist-entry-body.related-entries-entry-body { color: #8f8f8f; font-size: 13px; margin-top: 3px; } .urllist-date-link.related-entries-date-link { position: relative; } /*関連記事の日付*/ .hatena-urllist .urllist-date-link a { position: absolute; top: 0; left: 0; display: inline-block; background: #8cbcee; color: #fff; line-height: 1; padding: 4px 6px; margin-bottom: 3px; font-size: 11px; font-style: normal; text-decoration: none; }

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

11:影付き

Dgada 39

コードを表示
CSS
/*1つ1つの関連記事ボックス*/ li.urllist-item.related-entries-item { margin: 11px 0; padding: 0 10px 0 0; background: #ffffff; border: solid 2px #e4e4e4; } /*関連記事の画像の大きさ*/ img.urllist-image.related-entries-image { border-right: 2px solid #e4e4e4; margin: 0 10px 0 0; } /*関連記事のタイトル*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title { display: inline-block; margin-top: 8px; text-decoration: none; color: #525252; font-weight: bold; } /*関連記事のタイトル*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title:hover { color: silver; } /*関連記事の説明*/ .urllist-entry-body.related-entries-entry-body { color: #8f8f8f; font-size: 13px; margin-top: 3px; } .urllist-date-link.related-entries-date-link { position: relative; } /*関連記事の日付*/ .hatena-urllist .urllist-date-link a { position: absolute; top: -5px; left: -7px; display: inline-block; background: #ee8c8c; color: #fff; line-height: 1; padding: 4px 6px; margin-bottom: 3px; font-size: 11px; font-style: normal; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22); text-decoration: none; }

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

12:カード風

Dgada 40

コードを表示
CSS
/*カード風*/ /*1つ1つの関連記事ボックス*/ li.urllist-item.related-entries-item { margin: 15px 0; padding: 0 10px 0 0; background: #f4f4f4; border-radius: 2px; box-shadow: 0 2px 3px rgba(3, 3, 3, 0.18); border-bottom: none; } /*関連記事の画像まわり余白調整*/ .urllist-with-thumbnails li .urllist-image { margin: 0 10px 0 0; } /*関連記事のタイトル*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title { margin-top: 9px; text-decoration: none; color: #525252; font-weight: bold; display: inline-block; } /*関連記事のタイトル*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title:hover { color: silver; } /*関連記事の説明*/ .urllist-entry-body.related-entries-entry-body { color: #8f8f8f; font-size: 13px; margin-top: 3px; } .urllist-date-link.related-entries-date-link { position: relative; } /*関連記事の日付*/ .hatena-urllist .urllist-date-link a { position: absolute; top: 0; left: 0; display: inline-block; background: #75bda2; color: #fff; line-height: 1; padding: 4px 5px; margin-bottom: 3px; font-size: 10px; font-style: normal; text-decoration: none; }

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

スマホ編

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

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

cssの貼り付け先

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

カスタマイズ前

Sma

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

1:シンプル

Dadaga

コードを表示
CSS
/*関連記事 見出し*/ .hatena-module-related-entries .hatena-module-title { padding: 10px; text-align: center; color: #545454; background: #dcefff; border-bottom: none; font-size: 19px; margin-bottom: 3px; } /*1つ1つの関連記事ボックス*/ li.urllist-item.related-entries-item { border-bottom: solid 2px #ececec; margin: 0; padding: 10px 0; } /*関連記事の画像まわり余白調整*/ .urllist-with-thumbnails li .urllist-image { margin: 0 10px 0 0; } /*関連記事のタイトル*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title { text-decoration: none; color: #525252; font-weight: bold; } /*関連記事のタイトル*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title:hover { color: silver; }

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

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

Daga 1

コードを表示
CSS
/*関連記事 見出し*/ .hatena-module-related-entries .hatena-module-title { padding: 10px; text-align: center; color: #545454; background: #dcefff; border-bottom: none; font-size: 19px; margin-bottom: 3px; } /*1つ1つの関連記事ボックス*/ li.urllist-item.related-entries-item { border-bottom: dashed 2px #e2e2e2; padding: 10px 0; margin: 0; } /*関連記事の画像まわり余白調整*/ .urllist-with-thumbnails li .urllist-image { margin: 0 10px 0 0; } /*関連記事のタイトル*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title { text-decoration: none; color: #525252; font-weight: bold; } /*関連記事のタイトルホバー*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title:hover { color: silver; } /*関連記事の説明*/ .urllist-entry-body.related-entries-entry-body { color: #8f8f8f; font-size: 13px; margin-top: 3px; } /*関連記事の日付*/ .hatena-urllist .urllist-date-link a { display: inline-block; padding: 4px 6px; margin-bottom: 3px; background: #aad1f2; color: #fff; line-height: 1; border-radius: 13px; font-size: 11px; letter-spacing: 1px; font-weight: bold; font-style: normal; text-decoration: none; } /*関連きじの説明文を非表示に*/ .urllist-entry-body.related-entries-entry-body { display: none; }

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

3:背景をグレイに

Gdaa 1

コードを表示
CSS
/*関連記事 見出し*/ .hatena-module-related-entries .hatena-module-title { padding: 10px; text-align: center; color: #545454; background: #dcefff; border-bottom: none; font-size: 19px; margin-bottom: 3px; } /*1つ1つの関連記事ボックス*/ li.urllist-item.related-entries-item { border-bottom: dashed 2px #e2e2e2; padding: 10px 0; margin: 0; } /*関連記事の画像まわり余白調整*/ .urllist-with-thumbnails li .urllist-image { margin: 0 10px 0 0; } /*関連記事のタイトル*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title { text-decoration: none; color: #525252; font-weight: bold; } /*関連記事のタイトルホバー*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title:hover { color: silver; } /*関連記事の説明*/ .urllist-entry-body.related-entries-entry-body { color: #8f8f8f; font-size: 13px; margin-top: 3px; } /*関連記事の日付*/ .hatena-urllist .urllist-date-link a { display: inline-block; padding: 4px 6px; margin-bottom: 3px; background: #aad1f2; color: #fff; line-height: 1; border-radius: 13px; font-size: 11px; letter-spacing: 1px; font-weight: bold; font-style: normal; text-decoration: none; } /*関連きじの説明文を非表示に*/ .urllist-entry-body.related-entries-entry-body { display: none; }

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

4:枠で囲んだ場合

Dgad

コードを表示
CSS
/*関連記事 見出し*/ .hatena-module-related-entries .hatena-module-title { padding: 7px; text-align: center; color: #545454; background: #a3cdd9; border-bottom: none; font-size: 19px; margin-bottom: 3px; } /*1つ1つの関連記事ボックス*/ li.urllist-item.related-entries-item { margin: 11px 0; padding: 0 10px 0px 0; background: #ffffff; border: solid 2px #e4e4e4; } /*関連記事の画像の大きさ*/ img.urllist-image.related-entries-image { border-right: 2px solid #e4e4e4; margin-bottom: 0; } /*関連記事のタイトル*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title { text-decoration: none; color: #525252; font-weight: bold; } /*関連記事のタイトル*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title:hover { color: silver; } /*関連記事の説明*/ .urllist-entry-body.related-entries-entry-body { color: #8f8f8f; font-size: 13px; margin-top: 3px; } .urllist-date-link.related-entries-date-link { position: relative; } /*関連記事の日付*/ .hatena-urllist .urllist-date-link a { display: inline-block; background: #a3cdd9; color: #fff; line-height: 1; padding: 3px 7px; margin: 5px 0 3px; border-radius: 4px; font-size: 10px; font-weight: bold; font-style: normal; text-decoration: none; } /*関連きじの説明文を非表示に*/ .urllist-entry-body.related-entries-entry-body { display: none; }

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

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

Dgada 41

コードを表示
CSS
/*関連記事 見出し*/ .hatena-module-related-entries .hatena-module-title { padding: 7px; text-align: center; color: #545454; background: #a3cdd9; border-bottom: none; font-size: 19px; margin-bottom: 3px; } /*1つ1つの関連記事ボックス*/ li.urllist-item.related-entries-item { margin: 11px 0; padding: 0 10px 0 0; background: #ffffff; border: solid 2px #e4e4e4; } /*関連記事の画像の大きさ*/ img.urllist-image.related-entries-image { border-right: 2px solid #e4e4e4; margin: 0 10px 0 0; } /*関連記事のタイトル*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title { display: block; padding-top: 9px; text-decoration: none; color: #525252; font-weight: bold; } /*関連記事のタイトル*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title:hover { color: silver; } /*関連記事の説明*/ .urllist-entry-body.related-entries-entry-body { color: #8f8f8f; font-size: 13px; margin-top: 3px; } .urllist-date-link.related-entries-date-link { position: relative; } /*関連記事の日付*/ .hatena-urllist .urllist-date-link a { position: absolute; top: 0; left: 0; display: inline-block; background: #88b0e2; color: #fff; line-height: 1; padding: 2px 3px; margin-bottom: 3px; font-size: 11px; font-style: normal; text-decoration: none; } /*関連きじの説明文を非表示に*/ .urllist-entry-body.related-entries-entry-body { display: none; }

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

6:ラベル風

これは徹すとですね 関連記事  waaaay s blog

コードを表示
CSS
/*関連記事 見出し*/ .hatena-module-related-entries .hatena-module-title { padding: 7px; text-align: center; color: #88b0e2; background: #f4f4f4; border-bottom: solid 3px #e8e8e8; font-size: 19px; margin-bottom: 3px; } /*1つ1つの関連記事ボックス*/ li.urllist-item.related-entries-item { margin: 11px 0; padding: 0 10px 0 0; background: #ffffff; border: solid 2px #e4e4e4; } /*関連記事の画像の大きさ*/ img.urllist-image.related-entries-image { border-right: 2px solid #e4e4e4; margin: 0 10px 0 0; } /*関連記事のタイトル*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title { display: block; padding-top: 9px; text-decoration: none; color: #525252; font-weight: bold; } /*関連記事のタイトル*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title:hover { color: silver; } /*関連記事の説明*/ .urllist-entry-body.related-entries-entry-body { color: #8f8f8f; font-size: 13px; margin-top: 3px; } .urllist-date-link.related-entries-date-link { position: relative; } /*関連記事の日付*/ .hatena-urllist .urllist-date-link a { position: absolute; top: -5px; left: -7px; display: inline-block; background: #88b0e2; color: #fff; line-height: 1; padding: 2px 3px; margin-bottom: 3px; font-size: 11px; font-style: normal; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); text-decoration: none; } /*関連きじの説明文を非表示に*/ .urllist-entry-body.related-entries-entry-body { display: none; }

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

7:ラベル風カード風

Dgada 42

コードを表示
CSS
/*関連記事 見出し*/ .hatena-module-related-entries .hatena-module-title { padding: 7px; text-align: center; color: #75bda2; border-bottom: solid 2px #75bda2; font-size: 19px; margin-bottom: 3px; } /*1枚のカードの背景など*/ li.urllist-item.related-entries-item { margin: 12px 0; padding: 0 10px 0 0; background: #f4f4f4; border-radius: 2px; box-shadow: 0 2px 3px rgba(3, 3, 3, 0.18); border-bottom: none; } /*関連記事の画像まわり余白調整*/ .urllist-with-thumbnails li .urllist-image { margin: 0 10px 0 0; } /*関連記事のタイトル*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title { padding-top: 9px; text-decoration: none; color: #525252; font-weight: bold; display: block; } /*関連記事のタイトルホバー*/ a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title:hover { color: silver; } /*関連記事の説明*/ .urllist-entry-body.related-entries-entry-body { color: #8f8f8f; font-size: 13px; margin-top: 3px; } .urllist-date-link.related-entries-date-link { position: relative; } /*関連記事の日付*/ .hatena-urllist .urllist-date-link a { position: absolute; top: 0; left: 0; display: inline-block; background: #75bda2; color: #fff; line-height: 1; padding: 4px 5px; margin-bottom: 3px; font-size: 10px; font-style: normal; text-decoration: none; } /*関連きじの説明文を非表示に*/ .urllist-entry-body.related-entries-entry-body { display: none; }

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

まとめ

けっこう時間がかかりました。はてなさんが公式で数パターンくらいデザインを用意してくれるとありがたいんですけどね…。

同じカテゴリーの記事
同じカテゴリーの記事一覧
リファレンス
サルワカ