賢威7 – CSSをちょいイジりで関連記事を2カラム（2列）にする方法

賢威7の関連記事表示機能はカテゴリーベースやタグベースで表示させたり、記事タイトルとURLを入力するだけで自分が表示させたい記事を選択出来るのが非常に便利です。

本当に戦略的にサイトやブログを制作していくならば、カテゴリーやタグでの表示に頼らず「任意のURL」を1つ1つ設定していく方がおすすめです。

お世辞にもカッコいいとは言えない！

賢威7の関連記事はココがかっこ悪い！

賢威7デフォルトの関連記事は、PC閲覧時だとこんな感じ。サムネイル画像の横に記事タイトルが付くんですが、その下の空白が何とも言えない・・・。

ボクはiPhone 6 Plusを使用しているので上記のような表示になり、空白はそんなに気になりません。逆に抜粋を表示すると、1つ1つの関連記事が縦長になって見づらい気がしますよね。

ボクがおすすめする解決策は、PC閲覧時のみ関連記事を2カラム（2列）表示にするというカスタマイズ方法です。それでは早速やっていきましょう！

CSSを追加して2カラムにしよう！

このカスタマイズ方法は、CSSをちょっといじるだけで可能です。

賢威7はレスポンシブ対応なので、PCやスマホ・タブレットの解像度（画面幅）に合わせて「base.css」「rwd.css」に追記していきます。

PC用（解像度737px以上）の追加CSS

PC用のCSSは基本的にbase.cssに記述していきます。完成形は上記のような感じの2カラムになり、そこまで空白が気にならなくなっていると思います。

/*関連記事を2カラムにする*/
.related-articles-thumbs01 li {
	float: left;
	display: block;
	width: 48%;
	margin-left: 0;
	font-size: 0.9em;
}
.related-articles-thumbs01 .related-thumb {
	margin-right: 10px;
	margin-left: 10px;
}
.related-articles-thumbs01 li:nth-child(odd) {
	margin-right: 1.25em;
}

WPダッシュボードの「外観」⇒「テーマの編集」の順にクリックし、賢威7の「base.css」を表示します。

上記のCSSをコピペして、ファイルを更新しましょう。きっと2カラム表示になるハズです・・・きっとなったハズ。なったよね？

font-sizeは任意なんですが、今回の場合は小さくしています。

スマホ・タブレット画面幅（解像度736px以下）の追加CSS

base.cssに追記しただけでは、スマホ・タブレット画面幅になった時も2カラムのままなので、詰まったような表示になって見栄えが悪くなります。

/*解像度736px以下*/
@media 
only screen and (max-width : 736px) {
	/*画面幅736px以下の時に関連記事を1カラムにする*/
	.related-articles-thumbs01 li {
		font-size: 1em;
		clear:both;
		width: 100%;
	}	
}

同じくテーマの編集で「rwd.css」をクリックして開きましょう。上記CSSをコピペしてファイルの更新をします。

これで736px以下の場合、関連記事が1カラムで表示されるようになります。

ある条件下で表示が崩れる場合の修正は？

• コメント欄を表示している
• 「次の記事」「前の記事」の表示がない

どうやらこの2つの条件が重なった時に表示が崩れます。

関連記事の親要素に「clearfix」

return (!empty($relation)) ? "<div class=\"contents related-articles related-articles-thumbs01 clearfix\">

functions.phpの約1,128行目あたりの上記の箇所で「related-articles-thums01」の後ろに「clearfix」を追記する。

コメントセクションの「comment-area」クラスでフロート解除

<section id="comments" class="comments-area fl-c">

single.phpの約92行目あたりのcomment-areaの後ろに「fl-c」を追記する。以上が表示が崩れた時の修正方法です。

MATO-MEMO

以上が関連記事を2カラムにする方法でした。関連記事は非常に重要な箇所でもあります。1記事読んだら離脱ではなく、2記事3記事と読んで貰えるように有効的な内容にしましょう。

表示崩れに関しては、他にも修正方法があると思うんですよね。ボクの知識でパッと思いついたのが上の2つだったので紹介しました。

また、他の条件下で崩れる可能性もあるので、何か別の方法があれば教えて貰えれば嬉しいです。2カラムにした場合、関連記事の表示数も偶数にした方が綺麗に表示されます。下記エントリーも合わせてご覧ください。

【賢威7】ごにょごにょして関連記事の表示数を自由自在に変更する方法

カスタマイズ・対応バージョン

このエントリーの内容は、上記バージョンに対応しています。アップデートがあった場合に、修正されますのでご参考までに。