カスタマイズ賢威7の関連記事表示機能はカテゴリーベースやタグベースで表示させたり、記事タイトルとURLを入力するだけで自分が表示させたい記事を選択出来るのが非常に便利です。本当に戦略的にサイトやブログを制作していくならば、カテゴリーやタグでの表示に頼らず「任意のURL」を1つ1つ設定していく方がおすすめです。そんな便利な機能なんですが、1つだけ悪い点があります。それは・・・お世辞にもカッコいいとは言えない!という事ですね。このカッコ悪さを、ちょびっとだけCSSをいじって素敵な2カラム表示にしてみませんか?賢威7の関連記事はココがかっこ悪い!賢威7デフォルトの関連記事は、PC閲覧時だとこんな感じ。サムネイル画像の横に記事タイトルが付くんですが、その下の空白が何とも言えない・・・。この空白のみっともなさをカバーするために、抜粋を表示するカスタマイズを探している方も多いんじゃないでしょうか。次にスマホ閲覧時ではどうなるでしょうか。Plusを使用しているので上記のような表示になり、空白はそんなに気になりません。逆に抜粋を表示すると、1つ1つの関連記事が縦長になって見づらい気がしますよね。ボクがおすすめする解決策は、PC閲覧時のみ関連記事を2カラム(2列)表示にするというカスタマイズ方法です。それでは早速やっていきましょう!CSSを追加して2カラムにしよう!このカスタマイズ方法は、CSSをちょっといじるだけで可能です。賢威7はレスポンシブ対応なので、PCやスマホ・タブレットの解像度(画面幅)に合わせて「base.css」「rwd.css」に追記していきます。POINT賢威7を基本2カラムで使用した場合、736pxがブレークポイントになります。※サブコンテンツはメインの下に表示されます。PC用(解像度737px以上)の追加CSSPC用のCSSは基本的にbase.cssに記述していきます。完成形は上記のような感じの2カラムになり、そこまで空白が気にならなくなっていると思います。子テーマを利用している方は、子テーマのbase.cssに記述して貰えれば、きちんと読み込まれます。1.25em;}WPダッシュボードの「外観」⇒「テーマの編集」の順にクリックし、賢威7の「base.css」を表示します。上記のCSSをコピペして、ファイルを更新しましょう。2カラム表示になるハズです・・・きっとなったハズ。なったよね?font-sizeは任意なんですが、今回の場合は小さくしています。スマホ・タブレット画面幅(解像度736px以下)の追加CSSbase.cssに追記しただけでは、スマホ・タブレット画面幅になった時も2カラムのままなので、詰まったような表示になって見栄えが悪くなります。736px以下になった際に関連記事が1カラムに切り替わるようにCSSを追加します。100%;}}同じくテーマの編集で「rwd.css」をクリックして開きましょう。上記CSSをコピペしてファイルの更新をします。これで736px以下の場合、関連記事が1カラムで表示されるようになります。ある条件下で表示が崩れる場合の修正は?全ての条件下を確認したわけでないですが、コメント欄が回り込んでしまう場合があります。それはどんな時かというと・・・コメント欄を表示している「次の記事」「前の記事」の表示がないどうやらこの2つの条件が重なった時に表示が崩れます。かんたんに表示崩れを直す方法は、関連記事の親要素に「clearfix」を足すか、コメントセクションの「comment-area」クラスでフロート解除する方法かな。clearfix\">functions.phpの約1,128行目あたりの上記の箇所で「related-articles-thums01」の後ろに「clearfix」を追記する。CAUTION!使用しているブラウザやデバイスによって、半角「\」が円マークで表示される場合があります。コピペした後に、円マークを半角「\」に修正して下さい。fl-c">single.phpの約92行目あたりのcomment-areaの後ろに「fl-c」を追記する。以上が表示が崩れた時の修正方法です。MATO-MEMO以上が関連記事を2カラムにする方法でした。関連記事は非常に重要な箇所でもあります。1記事読んだら離脱ではなく、2記事3記事と読んで貰えるように有効的な内容にしましょう。表示崩れに関しては、他にも修正方法があると思うんですよね。ボクの知識でパッと思いついたのが上の2つだったので紹介しました。他の条件下で崩れる可能性もあるので、何か別の方法があれば教えて貰えれば嬉しいです。2カラムにした場合、関連記事の表示数も偶数にした方が綺麗に表示されます。下記エントリーも合わせてご覧ください。7.0.6.6このエントリーの内容は、上記バージョンに対応しています。アップデートがあった場合に、修正されますのでご参考までに。PV数ランキングウィジェットで特定の記事を非表示にする方法!」お問い合わせ当サイトへのご質問・ご要望等ありましたらお気軽にお問い合わせ下さい。お問い合わせフォームアクロニウムを書いてるヒトName:あくろHobby:スキー・MTB・ダーツWordPressを独習しています。「ヒトが躓くトコは大体同じ!」と思いつつ・・・学んできたコト・今学んでるコトを丁寧に書いてます。Postの使い方:過去記事をTwitterに自動投稿するWPプラグイン賢威7は「SEOに強い」だけじゃ終わらせないレビュー!購入を考えてる方に読んで欲しい。アフィリエイトをWordPressで始める時に超初心者さんが必要な4つのもの。