記事下の関連記事を2列に表示するCSS

記事下の関連記事ってカスタマイズされてますか？多くの方はMilliardなどのプラグインを使っていらっしゃいますが、関連記事を表示させる方法はいくつかあります。
はてなブログの記事下に使う関連記事プラグイン、結局どれが１番良いの？

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

CSSはこのように。

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はいろいろな場面で応用でき、ちょっとレイアウトを変えたいという時に使えます。