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

カスタマイズ前

カスタマイズ後

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

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

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

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

.related-articles-thumbs01 li {
      width: 48%;
     display: inline-block;
     vertical-align: top;
font-size: 1em;
}

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

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

パソコン表示

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

スマートフォン表示

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

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

@media only screen and (max-width : 950px){
.related-articles-thumbs01 li {
      width: auto;
}
}

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

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

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

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




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

この記事のライター:BUTTER

Googleストリートビュー撮影、WEBサイト制作(WordPress)、デジタルマーケティング、モールテックス小物のハンドメイドをしております。中小企業の社長様から個人事業主の方までお仕事のご依頼を頂き、WEBサイト制作(ポータルサイト・メディアサイト・ECサイト)、楽天サイト制作、楽天サイト運営、店内ストリートビュー撮影、Google広告、Yahoo広告、SNS広告運用を担当させて頂きました。趣味:モールテックスDIY、ローカルガイド撮影、音楽観賞。

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

 

PR