記事下の関連記事ってカスタマイズされてますか?多くの方はMilliardなどのプラグインを使っていらっしゃいますが、関連記事を表示させる方法はいくつかあります。
はてなブログの記事下に使う関連記事プラグイン、結局どれが1番良いの?
Milliardはとてもきれいなデザインなんですが、重くてページ表示速度が遅くなりますね。Milliardを2列表示するカスタマイズはこちら。↓
www.yukihy.com
今回は公式の関連記事サイドバーモジュールを記事下に移動させる方法で関連記事を2列表示にするカスタマイズをご紹介します。
はてなブログで記事下に関連記事を出すカンタンな方法 - ボクココ
関連記事の表示はid:cevid_cpp さんのブログ記事をご参照下さい。はてなブログのサイドバー関連記事モジュールで表示する記事件数を偶数にして下さい。
導入できたらこのように一列で表示されています。
2列に表示するCSS
管理画面→デザイン→カスタマイズ→デザインCSSに以下のCSSを追記してください。
/* おすすめ関連記事2列 */ .related-entries li { float: left; text-align: left; width: 50%; height: 150px;/* 高さは調整して下さい */ padding: 4px 0; box-sizing: border-box; font-size: 100%; border-bottom: 1px solid #ddd; } .related-entries-item-inner { padding: 8px; } .related-entries-image-link { float: left; margin: 0 8px 8px; } .related-entries-title { margin: 8px 0; } /* float解除 */ .related-entries::after { content: ""; display: block; clear: both; } /* スマートフォン1列 */ @media only screen and (max-width:767px){ .related-entries li { float: none; width: 100%; height: auto; } }
これでこのような2列になります。カテゴリーが長い、概要を表示する場合は.related-entries li にheightを指定して高さを調整して下さい。
2列表示するCSS・考え方
2列にする方法は縦並びのblock要素のliをfloatし幅を全体の1/2の50%(49%でも良い)にすることで表示させています。
ABCD4つのリストがあるとしてデフォルトでは縦並びです。
- A
- B
- C
- D
<ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul>
リスト2列にするには
- A
- B
- C
- D
ul { width: 100%; } li { float:left; width:50%; }
3列にする場合は同様に幅を1/3の33%にします。
スマートフォン対策(レスポンシブデザインの場合)
記事下の関連記事はスマートフォンでは2列表示では見づらいのでfloatを解除し、widthを100%に戻し1列表示にしています。
/* スマートフォン1列 */ @media only screen and (max-width:767px){ .related-entries li{ float: none; width: 100%; height: auto; } }
2列、2カラムにするCSSはいろいろな場面で応用でき、ちょっとレイアウトを変えたいという時に使えます。