【SWELL】今すぐ使いたくなる!楽しい&便利な投稿リストブロック

高機能でおしゃれなWordPressテーマ「SWELL」。

この記事ではSWELLの投稿リストブロックを使ってあなたのウェブサイトをもっとおしゃれにする方法をお届けします。

SWELLのメリットや特徴については以下の記事でご紹介しています。合わせてご覧ください。

商品名WordPressテーマ SWELL
販売価格¥17,600(税込)
(※ お支払いは一度限りです。月額や年額ではありません。)
目次

投稿リストブロックでできること4つ

早速、投稿リストブロックのデザインをみてみましょう。今すぐ使いたくなる便利なアイディアが盛りだくさんです!

以下でご紹介するのはPC版でのデザイン例です。上手にスマホ閲覧と振り分けるポイントは投稿リストブロックで失敗しないためのヒントでご紹介しています。

カード型(1〜3カラム)

swell,デザイン
カード型(1〜3カラム)

カード型は最もサムネイルが見やすいレイアウトです。

記事のイメージが湧きやすく、クリックに繋がりやすいので多くのブログやウェブサイトで採用されています。

SWELLの投稿リストブロックでは1〜3カラムのカード型レイアウトで記事を表示できます。

トップページの目立たせたい場所なら1カラム、一覧にするなら3カラム、サイドバーと合わせて使うなら2カラムなど使い方に合わせてデザインしましょう。

スマホ閲覧時には1カラム・2カラムを選ぶことができます。

リスト型

swell
リスト型

リスト型は左側にアイキャッチ、右側にタイトルや抜粋文が入るフォーマットです。

全ての記事が平等に見えるのでユーザーが目的に合わせて記事を選びやすいです。

情報サイトでよく見かけるデザインで、個人的にはスマホ閲覧時に最も見やすいフォーマットです。

リスト型は上記のレイアウトの他に、左右交互に表示させることもできます。

ページに動きを出したいときはこのレイアウトを使用してみてください。

サムネイル型

swell
サムネイル型

サムネイル型はアイキャッチの下部に黒いエフェクトが設けられ、タイトルや日付を表示することができます。

1カラム・2カラム表示が使用できます。

アイキャッチの上にテキストがまとまるので、ページデザインがシンプルになります。

四角を組み合わせるページデザインになる、という感じです。

テキスト型

swell
テキスト型

記事をテキスト表示できるフォーマットです。

文字のメニューですが余白と文字サイズのバランスが良いので、実はとても読みやすいデザインです。

ニュース・最新情報一覧などで用いられることが多いですが、他の投稿リストブロックと組み合わせて使用することでよりアクティブな表現ができます。

ノウハウ系の投稿を作る際にメニュー表としても使えるのでとても便利です。

他ブロックとコラボさせるともっと楽しい!投稿リストブロックのアイディア4つ

投稿リストブロックは組み合わせることでもっと楽しい表現ができます。ぜひお試しください。

アイディア1:カラムブロック×投稿リストブロック

swell
カラムブロック×投稿リストブロック

投稿リストのカード型とテキスト型を、カラムブロックを使用して組み合わせたデザインです。

トップページのピックアップ記事などで使用できます。

デザイン解説

swell
デザイン解説

アイディア2:スクエアアイキャッチ×カード型1カラム&2カラム2列

swell
スクエアアイキャッチ×カード型1カラム&2カラム2列

ミニマムでかわいらしい印象になる組み合わせです。

アイキャッチ画像を正方形にすることで親しみやすいレイアウトにできます。

使用している設定は以下です。

デザイン解説

swell
デザイン解説

アイディア3:見出し×リスト型

swell
見出し×リスト型

個人的に大好きなデザインレイアウトです。

カテゴリ分けする時にとても便利に活用できます。ジャンルが一眼でわかるのでユーザーも動きやすいです。

スマホでも使えるレイアウトです。

デザイン解説

swell
デザイン解説
こやん

投稿リストブロックはカラムブロックとの相性が抜群です

アイディア4:カード型3カラムで新着記事一覧ページへ誘導

swell
カード型3カラムで新着記事一覧ページへ誘導

アイキャッチを正方形にし、「READ MORE」ボタンをつけて次のページへ誘導します。

このREAD MOREボタンは投稿リストブロックの詳細設定で簡単につくれるので、下記の投稿リストブロックのその他の便利機能で詳しくご紹介します。

デザイン解説

swell
デザイン解説

投稿リストブロックのその他の便利機能

SWELLの投稿リストブロックでは、他にも細かな設定ができます。

投稿リストブロックの便利機能

  1. 表示する投稿数を指定できる
  2. 新着順・人気順・ランダム表示が選べる
  3. 公開日・更新日・著者・PV数などの表示非表示が選べる
  4. カテゴリーの表示位置や非表示が選べる
  5. タイトルのhtmlタグはh2・h3・divから選べる
  6. 抜粋文の文字数をPC・スマホで変えられる
  7. READ MOREリンクがつくれる
  8. PC・スマホでの表示非表示が選べる
  9. 記事IDで表示する記事をダイレクトに選べる
  10. 投稿タイプ(投稿・固定ページ・すべて)で振り分けられる
  11. カテゴリー・タグで振り分けられる

表示する投稿数を指定できる

高騰リストは表示する記事数を1〜24まで指定できます。

サイトデザインに合わせて調整しましょう。

新着順・人気順・ランダム表示が選べる

投稿リストの表示順序は、

  • 新着順
  • 人気順
  • ランダム

で選ぶことができます。

ピックアップさせたいなら人気順、最新情報を届けたいなら新着順、データ取りをしたいならランダム表示がおすすめです。

公開日・更新日・著者・PV数などの表示非表示が選べる

投稿リストでは、

  • 公開日
  • 更新日
  • 著者
  • PV数
  • タイトルの表示・非表示(サムネイル型のみ)

が設定できます。

ちなみに当ブログでは更新日とタイトルを表示しています。

カテゴリーの表示位置や非表示が選べる

swell
カテゴリの表示位置の違い

カテゴリの表示位置を選ぶことができます。

サムネイル(アイキャッチ)画像の上に表示させると、ブログのテーマカラーがアクセントになります。

表示させないという選択肢もあるのでデザインの幅が広がります。

タイトルのhtmlタグはh2・h3・divから選べる

投稿リストでタイトル表示させるテキストはh2・h3・divに設定できます。これはSEO対策で役立ちます。

例えば、カテゴリやタグなどページと関連のある投稿リストを作るなら、タイトルはh2に設定すると良いです。

反対に、トップページにさまざまなカテゴリを置き、ページに一貫性がないのならdiv(本文)に設定すると良いです。

抜粋文の文字数をPC・スマホで変えられる

投稿リストでは、抜粋文と言って本文の一部をタイトルテキストの下に表示させることができます。

これはPC閲覧時とスマホ閲覧時で文字数を変えることができます。

スマホは画面サイズが限られているので文字数を変えられるのは大きなメリットです。

READ MOREリンクがつくれる

1つの投稿リストに1つのREAD MOREボタンが作れます。以下のような感じです。

swell

READ MOREボタンは、ユーザーを一覧ページへ誘導できます。

より多くの記事を読んでもらうために重要な役割です。

PC・スマホでの表示非表示が選べる

ここまでご紹介してきた通り、投稿リストブロックは本当に様々な機能やデザインがあります。

デザイン崩れを防ぐために、PCのみで表示する・スマホのみで表示するの切り替えができます。

例えばPCのみで表示するブロックではカード型を使い、スマホのみで表示するブロックではリスト型にすれば、ユーザーがどのデバイスからアクセスしても動きやすい設計です。

これが基本設定で叶うのはとてもラッキーです。

表示したい投稿は記事IDでダイレクトに選べる

投稿リストでは記事IDで投稿を呼び出すことができます。

つまり、表示させたい記事をダイレクトに選んで訴求できます。

これはトップページやランディングページでとても役立つ設定です。

当ブログのトップページのファーストビューでも投稿リストを使用していますが、表示させる記事は記事IDで呼び出しています。

投稿タイプ(投稿・固定ページ・すべて)で振り分けられる

投稿リストは高騰タイプを選んで呼び出すことができます。

投稿のみを呼び出すこともできるし、固定ページのみを呼び出すこともできます。

固定ページのみの呼び出しは、例えばランディングページ一覧を作るときに便利です。

もちろんすべての記事を呼び出すこともできます。

カテゴリー・タグで振り分けられる

投稿リストはカテゴリーやタグで投稿を振り分けることができます。

例えば以下のような設定をしたい場合→

swell
  • GADGET(カテゴリー)→投稿リスト(カテゴリー分け&人気順)
  • WORK(カテゴリー)→投稿リスト(カテゴリー分け&人気順)

こんな感じで各カテゴリごとに表示させてページを整頓することができます。

投稿リストブロックで失敗しないためのヒント

投稿リストブロックが相当使えることがわかりました。

ここで、投稿リストブロックをもっと役立てるためのポイントをご紹介します。

PC閲覧とスマホ閲覧で見せるブロックを分ける

swell

パソコンとスマホでは画面サイズが異なりますので、見え方が変わってきます。

SWELLの投稿リストブロックではPC・スマホ閲覧時の表示非表示がワンクリックでとても簡単に設定できます。

「PC閲覧時はカード型」「スマホ閲覧時はリスト型」など、デバイスに合った設定をするとユーザーにやさしいウェブサイトが設計できます。

SWELLの投稿リストブロックでわかりやすい設計のウェブサイトを作りましょう

いかがでしたでしょうか。

投稿リストブロックは記事を自分の好きなように表示できる最強ツールです。

見た目もおしゃれにできますし、何よりもユーザーが動きやすいような設計ができます。

もちろん、このページでご紹介した内容はSWELLのデフォルト設定ですべてデザインすることができます。CSSもPHPもいじっていません。

直感的にデザインしてあそべるWordPressテーマSWELLについてもっと知りたい方は、以下の記事でもご紹介しています。合わせてご覧ください。

商品名WordPressテーマ SWELL
販売価格¥17,600(税込)
(※ お支払いは一度限りです。月額や年額ではありません。)

その他のSWELLの人気記事(投稿リストブロックでご紹介!)

2020年以降、社会人やOLに副業ブームが到来しています。始めるなら今がチャンスです。

この記事を読んで実際に行動する人は100人中3人程度だそうです。

その中でさらに継続できる人は3人だそうです。

知識を得るだけでは何も変わりません。副業でブログを始めるなら、早速今から動き出しましょう!

5〜10分程度で簡単にWordPressブログを作るならコレ!

それでは、最後までお読みいただきありがとうございました。

ランキング参加しました!応援よろしくお願いします

ブログランキング・にほんブログ村へ

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる