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

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

そんな便利な機能なんですが、1つだけ悪い点があります。それは・・・

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

という事ですね。このカッコ悪さを、ちょびっとだけCSSをいじって素敵な2カラム表示にしてみませんか?

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

賢威7.0関連記事のデフォルト表示

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

この空白のみっともなさをカバーするために、抜粋を表示するカスタマイズを探している方も多いんじゃないでしょうか。次にスマホ閲覧時ではどうなるでしょうか。

keni70-two-column-related-article-6

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

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

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

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

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

POINT

賢威7を基本2カラムで使用した場合、736pxがブレークポイントになります。

解像度737px以上
PC用の画面で2カラム表示⇒base.cssに記述
解像度736px以下
スマホ・タブレット用の画面で1カラム表示⇒rwd.cssに記述
※サブコンテンツはメインの下に表示されます。

PC用(解像度737px以上)の追加CSS

賢威7.0の関連記事を2カラム

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

子テーマを利用している方は、子テーマのbase.cssに記述して貰えれば、きちんと読み込まれます。
/*関連記事を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

スマホ画面幅時の関連記事1カラム

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

なので、736px以下になった際に関連記事が1カラムに切り替わるようにCSSを追加します。
/*解像度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」を足すか、コメントセクションの「comment-area」クラスでフロート解除する方法かな。

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

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

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

CAUTION!

使用しているブラウザやデバイスによって、半角「\」が円マークで表示される場合があります。コピペした後に、円マークを半角「\」に修正して下さい。

コメントセクションの「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】ごにょごにょして関連記事の表示数を自由自在に変更する方法

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

タイプ バージョン
カスタマイズ時 スタンダード Ver. 7.0.6.6
対応 全タイプ ~Ver. 7.0.6.6

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

この記事が役に立ったらいいね!しよう

最新情報をお届けします

Twitterでアクロニウムをフォローしよう!