高機能でおしゃれなWordPressテーマ「SWELL」。
この記事ではSWELLの投稿リストブロックを使ってあなたのウェブサイトをもっとおしゃれにする方法をお届けします。
SWELLのメリットや特徴については以下の記事でご紹介しています。合わせてご覧ください。
投稿リストブロックでできること4つ
早速、投稿リストブロックのデザインをみてみましょう。今すぐ使いたくなる便利なアイディアが盛りだくさんです！
以下でご紹介するのはPC版でのデザイン例です。上手にスマホ閲覧と振り分けるポイントは投稿リストブロックで失敗しないためのヒントでご紹介しています。
カード型（1〜3カラム）
カード型は最もサムネイルが見やすいレイアウトです。
記事のイメージが湧きやすく、クリックに繋がりやすいので多くのブログやウェブサイトで採用されています。
SWELLの投稿リストブロックでは１〜３カラムのカード型レイアウトで記事を表示できます。
トップページの目立たせたい場所なら１カラム、一覧にするなら３カラム、サイドバーと合わせて使うなら２カラムなど使い方に合わせてデザインしましょう。
スマホ閲覧時には１カラム・２カラムを選ぶことができます。
リスト型
リスト型は左側にアイキャッチ、右側にタイトルや抜粋文が入るフォーマットです。
全ての記事が平等に見えるのでユーザーが目的に合わせて記事を選びやすいです。
情報サイトでよく見かけるデザインで、個人的にはスマホ閲覧時に最も見やすいフォーマットです。
リスト型は上記のレイアウトの他に、左右交互に表示させることもできます。
ページに動きを出したいときはこのレイアウトを使用してみてください。
サムネイル型
サムネイル型はアイキャッチの下部に黒いエフェクトが設けられ、タイトルや日付を表示することができます。
１カラム・２カラム表示が使用できます。
アイキャッチの上にテキストがまとまるので、ページデザインがシンプルになります。
四角を組み合わせるページデザインになる、という感じです。
テキスト型
記事をテキスト表示できるフォーマットです。
文字のメニューですが余白と文字サイズのバランスが良いので、実はとても読みやすいデザインです。
ニュース・最新情報一覧などで用いられることが多いですが、他の投稿リストブロックと組み合わせて使用することでよりアクティブな表現ができます。
ノウハウ系の投稿を作る際にメニュー表としても使えるのでとても便利です。
他ブロックとコラボさせるともっと楽しい！投稿リストブロックのアイディア４つ
投稿リストブロックは組み合わせることでもっと楽しい表現ができます。ぜひお試しください。
アイディア１：カラムブロック×投稿リストブロック
投稿リストのカード型とテキスト型を、カラムブロックを使用して組み合わせたデザインです。
トップページのピックアップ記事などで使用できます。
デザイン解説
アイディア２：スクエアアイキャッチ×カード型１カラム&２カラム２列
ミニマムでかわいらしい印象になる組み合わせです。
アイキャッチ画像を正方形にすることで親しみやすいレイアウトにできます。
使用している設定は以下です。
デザイン解説
アイディア３：見出し×リスト型
個人的に大好きなデザインレイアウトです。
カテゴリ分けする時にとても便利に活用できます。ジャンルが一眼でわかるのでユーザーも動きやすいです。
スマホでも使えるレイアウトです。
デザイン解説
こやん投稿リストブロックはカラムブロックとの相性が抜群です
アイディア４：カード型３カラムで新着記事一覧ページへ誘導
アイキャッチを正方形にし、「READ MORE」ボタンをつけて次のページへ誘導します。
このREAD MOREボタンは投稿リストブロックの詳細設定で簡単につくれるので、下記の投稿リストブロックのその他の便利機能で詳しくご紹介します。
デザイン解説
投稿リストブロックのその他の便利機能
SWELLの投稿リストブロックでは、他にも細かな設定ができます。
投稿リストブロックの便利機能
- 表示する投稿数を指定できる
- 新着順・人気順・ランダム表示が選べる
- 公開日・更新日・著者・PV数などの表示非表示が選べる
- カテゴリーの表示位置や非表示が選べる
- タイトルのhtmlタグはh2・h3・divから選べる
- 抜粋文の文字数をPC・スマホで変えられる
- READ MOREリンクがつくれる
- PC・スマホでの表示非表示が選べる
- 記事IDで表示する記事をダイレクトに選べる
- 投稿タイプ（投稿・固定ページ・すべて）で振り分けられる
- カテゴリー・タグで振り分けられる
表示する投稿数を指定できる
高騰リストは表示する記事数を1〜24まで指定できます。
サイトデザインに合わせて調整しましょう。
新着順・人気順・ランダム表示が選べる
投稿リストの表示順序は、
- 新着順
- 人気順
- ランダム
で選ぶことができます。
ピックアップさせたいなら人気順、最新情報を届けたいなら新着順、データ取りをしたいならランダム表示がおすすめです。
公開日・更新日・著者・PV数などの表示非表示が選べる
投稿リストでは、
- 公開日
- 更新日
- 著者
- PV数
- タイトルの表示・非表示（サムネイル型のみ）
が設定できます。
ちなみに当ブログでは更新日とタイトルを表示しています。
カテゴリーの表示位置や非表示が選べる
カテゴリの表示位置を選ぶことができます。
サムネイル（アイキャッチ）画像の上に表示させると、ブログのテーマカラーがアクセントになります。
表示させないという選択肢もあるのでデザインの幅が広がります。
タイトルのhtmlタグはh2・h3・divから選べる
投稿リストでタイトル表示させるテキストはh2・h3・divに設定できます。これはSEO対策で役立ちます。
例えば、カテゴリやタグなどページと関連のある投稿リストを作るなら、タイトルはh2に設定すると良いです。
反対に、トップページにさまざまなカテゴリを置き、ページに一貫性がないのならdiv（本文）に設定すると良いです。
抜粋文の文字数をPC・スマホで変えられる
投稿リストでは、抜粋文と言って本文の一部をタイトルテキストの下に表示させることができます。
これはPC閲覧時とスマホ閲覧時で文字数を変えることができます。
スマホは画面サイズが限られているので文字数を変えられるのは大きなメリットです。
READ MOREリンクがつくれる
1つの投稿リストに1つのREAD MOREボタンが作れます。以下のような感じです。
READ MOREボタンは、ユーザーを一覧ページへ誘導できます。
より多くの記事を読んでもらうために重要な役割です。
PC・スマホでの表示非表示が選べる
ここまでご紹介してきた通り、投稿リストブロックは本当に様々な機能やデザインがあります。
デザイン崩れを防ぐために、PCのみで表示する・スマホのみで表示するの切り替えができます。
例えばPCのみで表示するブロックではカード型を使い、スマホのみで表示するブロックではリスト型にすれば、ユーザーがどのデバイスからアクセスしても動きやすい設計です。
これが基本設定で叶うのはとてもラッキーです。
表示したい投稿は記事IDでダイレクトに選べる
投稿リストでは記事IDで投稿を呼び出すことができます。
つまり、表示させたい記事をダイレクトに選んで訴求できます。
これはトップページやランディングページでとても役立つ設定です。
当ブログのトップページのファーストビューでも投稿リストを使用していますが、表示させる記事は記事IDで呼び出しています。
投稿タイプ（投稿・固定ページ・すべて）で振り分けられる
投稿リストは高騰タイプを選んで呼び出すことができます。
投稿のみを呼び出すこともできるし、固定ページのみを呼び出すこともできます。
固定ページのみの呼び出しは、例えばランディングページ一覧を作るときに便利です。
もちろんすべての記事を呼び出すこともできます。
カテゴリー・タグで振り分けられる
投稿リストはカテゴリーやタグで投稿を振り分けることができます。
例えば以下のような設定をしたい場合→
- GADGET（カテゴリー）→投稿リスト（カテゴリー分け&人気順）
- WORK（カテゴリー）→投稿リスト（カテゴリー分け&人気順）
こんな感じで各カテゴリごとに表示させてページを整頓することができます。
投稿リストブロックで失敗しないためのヒント
投稿リストブロックが相当使えることがわかりました。
ここで、投稿リストブロックをもっと役立てるためのポイントをご紹介します。
PC閲覧とスマホ閲覧で見せるブロックを分ける
パソコンとスマホでは画面サイズが異なりますので、見え方が変わってきます。
SWELLの投稿リストブロックではPC・スマホ閲覧時の表示非表示がワンクリックでとても簡単に設定できます。
「PC閲覧時はカード型」「スマホ閲覧時はリスト型」など、デバイスに合った設定をするとユーザーにやさしいウェブサイトが設計できます。
SWELLの投稿リストブロックでわかりやすい設計のウェブサイトを作りましょう
いかがでしたでしょうか。
投稿リストブロックは記事を自分の好きなように表示できる最強ツールです。
見た目もおしゃれにできますし、何よりもユーザーが動きやすいような設計ができます。
もちろん、このページでご紹介した内容はSWELLのデフォルト設定ですべてデザインすることができます。CSSもPHPもいじっていません。
直感的にデザインしてあそべるWordPressテーマSWELLについてもっと知りたい方は、以下の記事でもご紹介しています。合わせてご覧ください。
その他のSWELLの人気記事（投稿リストブロックでご紹介！）
2020年以降、社会人やOLに副業ブームが到来しています。始めるなら今がチャンスです。
この記事を読んで実際に行動する人は100人中3人程度だそうです。
その中でさらに継続できる人は3人だそうです。
知識を得るだけでは何も変わりません。副業でブログを始めるなら、今から早速動き出しましょう！
それでは、最後までお読みいただきありがとうございました。
ランキング参加しました！応援よろしくお願いします
