![WordPressテーマ【Diver】記事一覧のデザインを変更する方法](https://korekalife.com/wp-content/uploads/2021/03/400d02bf701c49334b5a9fcc0a8b4e26.png)
ひなまるです。
今回はWordPressテーマ「Diver」を使った
記事一覧のデザイン(レイアウト)を変更する方法について解説します。
記事一覧とはトップページや各カテゴリーに
一覧で記事が並んでいるページのことです。
![](https://korekalife.com/wp-content/uploads/2020/09/584a1a50c3a2aa0a8b4a0e05b630d154.jpeg)
とても簡単に行うことができますよ!
分かりやすいデザインにすることは、
読者にとってサイト内の記事を探しやすくなります。
こちらの記事で詳しく紹介しています。
まだDiverを使っていない人でもこの記事を読むことで、
初心者でも優しく使えるDiverの機能の良さを知ることができますよ。
それでは解説していきますのでよろしくお願います。
Diverの記事一覧レイアウトは3種類
Diverでは次のような「記事一覧レイアウト設定」が、
PC表示とスマートフォン表示が別々で設定できます。
・グリッド表示
・ミニリスト表示
これらの表示の違いについては以下の通りです。
リスト表示
リスト表示は記事が1行に並んだ状態で表示されます。
PC表示とスマートフォン表示を見比べるとこんな感じです。
![](https://korekalife.com/wp-content/uploads/2021/03/0ca44a4002e57a6f15040fc264f411db.png)
![](https://korekalife.com/wp-content/uploads/2021/03/7a97d2e81cf24e1575842dca7f860e45-607x1024.jpg)
リスト表示はDiverのデフォルト設定になっています。
グリッド表示
グリッド表示とはグリッド線の形状のように、
記事を並べて表示することができます。
PC表示、スマートフォン表示どちらも対応しています。
![](https://korekalife.com/wp-content/uploads/2021/03/e2b57f02f67a9f177b707ee4f4a3a41b.png)
![](https://korekalife.com/wp-content/uploads/2021/03/fe58044a8e42da8746de0ebe4e15cb41-613x1024.jpg)
グリッド表示には最大4記事並べることができます。
設定方法については後述しますね。
ミニリスト表示
ミニリスト表示に限ってはPC表示のみ対応です。
このような感じで表示されます。
表示方法としては以上の3点となります。
記事一覧に表示される記事数の設定
まず設定を行っていく前に、
記事一覧に表示される記事数を決めていきましょう。
WordPressのメニューから、
①「設定」→②「表示設定」をクリックします。
「表示設定」のページが開くので、
「1ページに表示する最大投稿数」の入力欄へ
サイトに表示したい記事数を入力します。
入力が終わったら「変更を保存」をクリックして、
サイト内の記事一覧数が変更できたら設定は完了です。
これで記事一覧の記事数が決まりました。
記事一覧を変更する方法
それでは記事一覧の変更方法を解説します。
WordPressのメニューの
①「外観」→②「カスタマイズ」をクリックします。
カスタマイズメニューが開くので、
「レイアウト設定」を選択します。
その中の「記事一覧レイアウト設定」を見て行きましょう。
リスト表示とミニリスト表示については、
選択項目にマークするだけで設定することができますが、
グリッド表示では記事の横並びの表示数を変更できます。
変更方法は、同じ項目内にある
「グリッドの最大カラム数」と「グリッドの最小カラム数」を使います。
グリッドの最大カラム数は「1〜4」、
グリッドの最小カラム数は「1〜2」までです。
サイト内に表示したいカラム数を入れていきましょう。
ちなみに、
それぞれの最大と最小を見比べた場合はこんな感じになります。
参考までに。
↓
![](https://korekalife.com/wp-content/uploads/2021/03/eca886eb224e7fad835ec89b7e7834eb-1024x605.png)
![](https://korekalife.com/wp-content/uploads/2021/03/79851fe5ab4f644e44a03c64b343c4d7-613x1024.jpg)
記事一覧のデザインを変えるだけで
印象が変わるのがお分かりいただけると思います。
Diverではこのように設定することで、
幅広く変更できる機能が設けられています。
サイトに合わせて使って見てくださいね。
まとめ
以上がWordPressテーマ「Diver」を使った
記事一覧のデザインを変更する方法になります。
Diverでは大きく分けて、
リスト表示かグリッド表示かで設定することが可能です。
また、PCとスマートフォンの別々で設定が可能なので、
読者を意識したサイトの見せ方も変えることができますよね。
サイトに合わせたサイトデザインとしてみましょう。
今回はここまでとなります。
それではまた。
他のDiverの関連記事はこちら