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

どうも。葉です。

この記事では、賢威7の関連記事を2列表示にする方法を解説していきます。

1.この記事を読むとできるようになること

まずは、この記事を読むことでできるようになることを、わかりやすく画像で比較していきます。

「変更前」→「変更後」のように関連記事の表示が1列から2列に変更できるようになります。

変更前

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

変更後

賢威7の関連記事を2列表示に変更

では、ここからは、CSSコードを編集して、賢威7の関連記事を2列表示にする手順を紹介していきます。

2.賢威7の関連記事を2列表示にする手順

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

賢威7の関連記事を2列表示にする手順1

「base.css」をクリックしてください。

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

「base.css」の最下部に次のコードを貼り付けて、「ファイルを更新」をクリックしてください。

/*-------------------------------------
関連記事を2列表示
-------------------------------------*/
.related-articles-thumbs01 li {
      width: 48%;
     display: inline-block;
     vertical-align: top;
     font-size: 14px;
}

賢威7の関連記事を2列表示にする手順3

この状態で、関連記事をチェックすると、次のように2列表示されているはずです。

賢威7の関連記事を2列表示にする手順4

スマホで表示に対応しよう!

しかし、このままでは1つ問題点があります。それは、スマホなど横幅が狭い画面で表示した場合、次のように記事タイトルが縦長になってしまうことです。

賢威7の関連記事をスマホ表示(横幅狭い)時は1列に戻す手順1

このままでは、見栄えが悪いので、表示画面の横幅が、950px以下の場合は、1列表示に戻します。

では、具体的な手順を解説していきます。

「テーマの編集」画面で「rwd.css」をクリックしてください。

賢威7の関連記事をスマホ表示(横幅狭い)時は1列に戻す手順2

「rwd.css」に次のコードを書き込んでください。

/*-------------------------------------
width950px以下で、関連記事を2列表示を解除
-------------------------------------*/
@media only screen and (max-width : 950px){
.related-articles-thumbs01 li {
      width: auto;
}
}

賢威7の関連記事をスマホ表示(横幅狭い)時は1列に戻す手順3

これで、スマホ表示を確認すると、次の図のように1列表示になっているはずです。

賢威7の関連記事をスマホ表示(横幅狭い)時は1列に戻す手順4

3.まとめ

この記事では、賢威7の関連記事を2列表示する方法を解説しました。

この他にも、関連記事の表示を編集したい場合は、次の3記事を参考にしてください。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします