【編集】 rwd.css / base.css

賢威7.1では、プラグイン無しでも関連記事を表示できます。

賢威7.1の関連記事の表示をカスタマイズ 関連記事を2列にする方法

これが、記事タイトルが短いと空白が目立つのですよね。
この表示を以下のように、2列表示にしてデザインを一新したいと思うのです。

賢威7.1の関連記事の表示をカスタマイズ 関連記事を2列にする方法

簡単なことのようですが、賢威のフォーラムを見ても、「関連記事数を変更する」という記事はあるのですが、2列3列にするような記事は見当たらなかったのです。

そこで、いろいろ検索して見つけたのがこの記事

賢威7の関連記事を2列表示にする方法

運営者の陽(よう)さん 、参考になりました。

では、早速解説・・・といきたいところですが、2列に表示するのですから、関連記事数は偶数にしなければなりませんね。

表示記事数を変更するのは、こちらの記事を参考に

【賢威バージョン】7.1.0.7 以上【編集】functions.php賢威7.1では、プラグインを使わなくとも関連記事を表示することができます。賢威7のプラグインを使わないで関連...

関連記事数を偶数にしたら、『外観』⇒『テーマの編集』で、base.cssに以下のコードを追加します。

保存して確かめてみると・・・

賢威7.1の関連記事の表示をカスタマイズ 関連記事を2列にする方法

綺麗に2列表示ができました。

コレでよし!としたいところですが、これをスマホで見ると・・・

賢威7.1の関連記事の表示をカスタマイズ 関連記事を2列にする方法

スマホで2列はキツイですよね。
つまり、スマホ表示の時は、2列表示を解除すればよいのですね。

以下のコードを、『外観』⇒『テーマの編集』でrwd.cssに追加します。

確認すると・・

賢威7.1の関連記事の表示をカスタマイズ 関連記事を2列にする方法

通常の関連記事になりました。

プラグイン無しでもこれだけの表示が出来るのですから、やっぱり、テンプレートは賢威が1番だと思うのですよね。

ちなみに、3列にならないかと、base.cssに追加したコードを以下のようにしてみました。

Width:の値を30%にしたのですが、確認してみると・・・

賢威7.1の関連記事の表示をカスタマイズ 関連記事を2列にする方法

記事タイトルが長いと、ちょっと苦しいですかね。サムネイルの大きさを変更すれば、どうにかと思うのですが、やはり2列表示がちょうど良いと思います。

以上、関連記事を2列にする方法でした。