Diverで記事一覧のレイアウトを変更する方法|初心者向けマニュアル
Diverで記事一覧のレイアウトを変更する方法|初心者向けマニュアル
Diverでは、トップページに記事の一覧が表示されるようになっています。
記事一覧には3つのレイアウトがあり、自由に変更可能です。
今回は、この記事一覧のレイアウトを変更する方法を解説します。

PCとスマホで見え方が違うので、それぞれ確認していきましょう。

記事一覧のレイアウト設定方法

WordPressのダッシュボード左メニューから、『外観カスタマイズ』という順にクリックします。

『外観→カスタマイズ』という順にクリックして進む

『外観→カスタマイズ』という順にクリックして進む

カスタマイズページが開くので、画面左メニュー内の『レイアウト設定』をクリックしましょう。

画面左メニュー内の『レイアウト設定』をクリック

画面左メニュー内の『レイアウト設定』をクリック

こちらの「記事一覧レイアウト設定」でレイアウトを変更します。

記事一覧レイアウト設定

記事一覧レイアウト設定

上の「記事一覧(PC)のレイアウトを変更します。」でPCで見たときのレイアウト設定、
下の「記事一覧(SP:モバイル)のレイアウトを変更します。」でスマホのレイアウト設定を行います。

レイアウトは下記の3つから選択できます。

  • リスト表示
  • グリッド表示
  • ミニリスト表示

それぞれのレイアウトについて詳しく解説します。

リスト表示

「リスト表示」は、記事が縦に1行ずつ並んで表示されるスタイルです。

デフォルトではこのリスト形式に設定されています。

PCでは下記のように表示されます。

【PC】記事一覧 リスト表示

【PC】記事一覧 リスト表示

スマホでは下記のように表示されます。

【SP】記事一覧 リスト表示

【SP】記事一覧 リスト表示

グリッド表示

「グリッド表示」では、各記事がグリッド形式で並べられます。

PCでは下記のように表示されます。

【PC】記事一覧 グリッド表示

【PC】記事一覧 グリッド表示

スマホでは下記のように表示されます。

【SP】記事一覧 グリッド表示

【SP】記事一覧 グリッド表示

グリッド表示では、「グリッドの最大カラム数」と「グリッドの最小カラム数」を調整することで、様々なレイアウトを作ることができます。

グリッドの最大カラム数・グリッドの最小カラム数

グリッドの最大カラム数・グリッドの最小カラム数

下記は「グリッドの最大カラム数」を4にした場合のレイアウトです。

「グリッドの最大カラム数」を4にした場合のレイアウト

「グリッドの最大カラム数」を4にした場合のレイアウト

ミニリスト表示

「ミニリスト表示」は、リストとグリッドを合わせたようなレイアウトです。

記事一覧 ミニリスト表示

記事一覧 ミニリスト表示

ミニリストはPCに対してのみ設定可能です。

まとめ

今回は、Diverで記事一覧のレイアウトを変更する方法を解説しました。

記事一覧のレイアウトを変更するだけで、サイトの印象がガラッと変わりますので、ぜひ色々なレイアウトを試してみてください。

スポンサーリンク

スポンサーリンク

おすすめの記事