はてなブログの記事下関連記事のカスタマイズ方法
スポンサーリンク
みなさん、こんばんは。
ブログ記事を閲覧後って、だいたいそのページから即離脱しますよね。
できれば自分のブログではそうならないで欲しいものです。
はてなブログではデフォルトで記事下に関連記事が表示されます。
記事を読み終わった後、この関連記事のどれかを読んで欲しいものですよね。
そこで今日は記事下の関連記事のデザインをカスタマイズして目立たせようと思います。
はてなブログ記事下の関連記事
はてなブログではデフォルトで記事下の関連記事が表示されるようになっています。
これをオフにすることも可能ですが、記事の読後にできるだけ自分のブログに居座って欲しい場合はオンのままにしておくのが良いと思います。
オフにする方法は【設定画面左メニュー】＞【デザイン】＞【記事】＞【関連記事】の部分のチェックを外すと表示されなくなります。
参考にしたサイト
こちらのサイトでは19もの記事下関連記事のサンプルコードを紹介されています。
とてもわかりやすく参考になるサイトです。
コード貼り付ける手順
【設定画面左メニュー】＞【デザイン】＞【カスタマイズ】＞【デイザインCSS】にコードを貼り付けるだけでOKです。
貼り付けたコード
シンプルなものにしました。
/*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: #000000;
font-weight: bold;
font-size: 120%;
}
/*関連記事のタイトル*/
a.urllist-title-link.related-entries-title-link.urllist-title.related-entries-title:hover {
color: silver;
}
カラーはブログのデザインに合わせて黒を目立たせる感じに。
記事タイトルの大きさを120%にして少し大きくして目立たせてみました。
カスタマイズ前
カスタマイズ後
記事下関連記事カスタマイズまとめ
文字の大きさと太さを変えたことでかなり見やすく目立つようになったと思います。
これで少しは記事下の関連記事に目が向くようになるのでは？と思ってます。
以上、はてなブログでの記事下関連記事のカスタマイズ方法でした。
気になった方は是非、参考にしてみてください。
