賢威テーマ」は、SEO業界で圧倒的な実績を持つWebプランニングチーム「ウェブライダー」が、そのノウハウを余すことなく詰め込んだ、SEOテンプレートパックです。

みなさん、こんにちは。今回は、「賢威テーマ」の投稿ページに表示される関連記事を2列にする方法をご紹介いたします。スマートフォンの表示を2列にしてしまうとバランスが悪いので、パソコンでの表示は2列、スマートフォンは1列のままの設定にしていきたいと思います。下記のカスタマイズ前をごらんください。CSSを追加してカスタマイズ後のように表示させます。

カスタマイズ前

カスタマイズ後

投稿ページの関連記事を2列にする

Word Press管理画面の左メニューの「外観」➡「テーマの編集」をクリックしてください。

次に右メニューにある「base.css」をクリックします。

PC用CSS「base.css」を変更する

「base.css」の最下部に上記コードを貼り付けて、ファイルを更新してください。文字サイズを少し小さめにしてみました。文字サイズを変更するコードは「font-size: 1em;」です。数字を変更することで好みのサイズに変更できます。

Google ChromeではCSSを更新しても変更されない場合がございます。そんな時は、別のブラウザで更新を確認するかクロームの履歴を削除して確認してください。如何でしょうか?関連記事は2列になりましたか?

パソコン表示

パソコンで表示される関連記事は2列になりました。次に、スマートフォンの関連記事を変更します。この状態でスマートフォンを確認すると、記事タイトルが縦長に表示されていて、とてもバランスが悪いです。

スマートフォン表示

スマートフォンのCSSを変更して1列に戻したいと思います。Word Press管理画面の「外観」➡「テーマの編集」から、右側の項目「rwd.css」をクリックします。こちらはスマートフォン用のCSSです。

スマートフォン用CSS「rwd.css」を変更する

上記コードを「rwd.css」の最下部に貼り付けて更新してください。スマートフォンの更新の確認もキャッシュが残ったままだと変更されていない場合がございます。別のブラウザで更新を確認してください。

如何でしょうか?スマートフォンの関連記事は1列に戻りましたか?「賢威テーマ」投稿ページに表示される関連記事を2列にする方法をご紹介しました。

最後まで読んで頂きありがとうございました。

WEB運営・制作ディレクター

この記事のライター:BUTTER

WEBサイト制作、Google施設内ストリートビュー、メディアサイトの運営・管理を行っております。 Knowledge Clip / マークアップエンジニア / デジタルワークショップ認定 / ローカルガイド レベル6 / Google認定フォトグラファー / Dance Tube / DIY crearivity /
趣味:音楽鑑賞、ネットサーフィン、カメラ、自然、インテリア、

ツイッター インスタグラム

最新情報をチェック