MENU
カテゴリー
アーカイブ
くうか
整理収納・ゲーム・プログラミングが好きな40代専業主婦。小学生兄妹と夫の4人家族。
小さなおうちに引っ越して収納が減っちゃった!少しずつ物を減らしているゆるミニマリストでもあります。
SWELLでこんなトップページを作る!解説記事→ CLICK!

SWELLで投稿リストブロックを使った記事一覧のデザインアイデア

投稿リストのデザインアイデア
URLをコピーする
URLをコピーしました!

こんにちは、ゆるミニマリスト主婦のくうかです。

WordPressテーマ「SWELL」で作ったブログを2つ運営中です!

両ブログともトップページをあれこれ考えながら作りました。

固定ページを使ったトップページを作る際は、見やすさとオリジナリティを意識しています。

特に新着記事はリピーターなら絶対に見る部分!

2つのブログでこだわったデザインをまとめてご紹介します。

くうか

同じSWELLの仲間で「おっ!アレンジが素敵!」と思ったブログも紹介しています!

Contents

SWELL投稿リストブロックを使った今までのデザイン集

SWELL独自の高機能な「投稿リストブロック」

記事の一覧を取得でき、表示する数やカテゴリーやタグの指定・記事IDの指定など、細かい設定をおこなうことができて超優秀なブロックです。

表示レイアウトも選べる!

大きく分けて4種類あります。

それぞれのレイアウトは美しくそのまま使っても全然オッケーなのですが、トップページで使う場合、

  • オリジナリティを出したい
  • 目を引くレイアウトにしたい

と感じるなら、【カラム】ブロックを使うとさらに色々なレイアウトが楽しめます。

現在の2つのブログのトップページはこちらです。気になったら見てみてください。

以下、私が試してみた投稿リスト×カラムを使った記事一覧デザインをいくつかご紹介していきます。

1. 最新記事のみカード型×2記事目からテキスト型

当ブログの新着記事レイアウトのバージョン1がこちら。

新着記事レイアウトver1
新着記事レイアウトver1

カラムブロックを使って2列にし、最新の記事のみカード型にして目立たせています。

STEP
カラムブロックを追加

2カラムをお好きな割合で追加。
私は(50/50)が最近好きなのでこの割合で。

STEP
左のカラムに投稿リストブロックを追加

左側のカラムに投稿リストブロックを追加する。

  • 表示する投稿数:1
  • レイアウト:カード型
  • 表示順序:新着順
  • 抜粋文:お好みで(当ブログはPC・スマホともに40)
STEP
右のカラムに投稿リストブロックを追加

右側のカラムに投稿リストブロックを追加する。

  • 表示する投稿数:4(お好みで)
  • レイアウト:テキスト型
  • 表示順序:新着順
  • 抜粋文:0
くうか

ここのレイアウトはリスト型を使っている方も多く見られますね…!

右の投稿リストを2記事目からの表示にする方法

右の投稿リストを2記事目からの表示にしたいという場合には、アナログな方法と自動化する方法があります。

トップページカスタマイズ記事にも記載していますが、こちらにも書いておきます。

アナログな方法

Pickupタブ内の【除外する投稿ID】に最新の記事のIDを入力する

  • 簡単だけど、記事が増えるたびにIDを更新しなければならなくなる
自動化する方法
  1. Settingタブ内の【高度な設定】に追加CSS名「li-first-none」を入力する。
  2. カスタマイザー→追加CSSに以下のコードを追加
.li-first-none > ul >li:first-child {
    display: none;
}
  • コードを追加する場合は自己責任の上おこなってください。
  • 表示される記事数が1つ減るので、記事数をお好みで調整してください。

Special thanks → しおさださんつぶさん

2. 最新記事のみカード型×タブブロックで新着・人気同時表示

現在の当ブログの新着記事のレイアウトがこちら。(バージョン2です)

新着記事レイアウトver2
新着記事レイアウトver2

バージョン1とほぼ同じですが、違う部分が右カラムに人気記事を追加したこと。

なぜ人気記事を入れたかというと、

フルワイドブロックを導入してサイドバーを非表示にしたからです。

サイドバーに人気記事を入れていたので、一応トップページでも見られるほうがいいかなーと。

くうか

でも人気記事は隠しキャラのように配置しました。笑(見たい人だけ見てねという弱めの思い)

右側のカラムにタブブロックで、新着・人気記事の投稿リストを入れています。

STEP
カラムブロックを追加

2カラムをお好きな割合で追加。
当ブログでは(50/50)で。

STEP
左のカラムに投稿リストブロックを追加

左側のカラムに投稿リストブロックを追加する。

  • 表示する投稿数:1
  • レイアウト:カード型
  • 表示順序:新着順
  • 抜粋文:お好みで(当ブログはPC・スマホともに40)
STEP
右のカラムにタブブロックを追加

タブブロックを追加し、「新着順」「人気順」のタブにする。

STEP
タブブロックに投稿リストを追加

新着順タブに投稿リストブロックを追加する

  • 表示する投稿数:4(お好みで)
  • レイアウト:テキスト型
  • 表示順序:新着順
  • 抜粋文:0

2記事目からの表示にしたい場合は、上述した方法を取り入れてください。

人気順タブに投稿リストブロックを追加する

  • 表示する投稿数:3(お好みで)
  • レイアウト:リスト型
  • 表示順序:人気順
  • 抜粋文:0

レイアウトは新着順とぱっと見で見分けがつくようにリスト型にしています。

3. タテ型レイアウトで新着・人気記事を同時表示

現在のサブブログ「スキマ時間ラボ」のデザインがこちらです。

タテ表示
タテ表示

1・2はカラムを横に使ったヨコ表示でしたが、今回はタテに使ってみました。

単純に1つのカラムに投稿リストブロックを2つ(カード型・テキスト型)入れています。

ベースはフルワイドブロックなので、タテに2つ並べてもそれほど窮屈に感じません。

人気記事の方もテキスト型表示の部分はCSSを使っていますが、新着記事と同じCSSが使えます。

くうか

なので、1つCSSを作っておくと他でも使い回しすることができますよ!

4. デバイスコントロールを使ったPC・スマホ表示分け

サブブログの以前のデザインがこちら。

デバイスコントロールを使ったアイデア
デバイスコントロールを使ったアイデア

最新の1記事めを、

  • PCサイズでは「リスト型
  • スマホサイズでは「カード型

と、デバイスによって表示を変えています。

このデザインにした理由
  • 1記事めをリスト型にしてみたかった
  • しかしスマホでリスト型だと表示が小さく見づらいので、スマホではカード型にしたかった

理由は以上の通り。
メインのこちらのブログとはまた違うデザインに挑戦したかったのもあります。

では、それはどうしたら実現できるのか?

SWELLではPCとスマホで表示を変えることができる【デバイスコントロール】という機能があります。
(フォーラムで方法を教えていただきました)

PCとスマホで表示を変える方法(デバイスコントロール)

STEP
投稿リストをリスト型で追加する

まずPCで表示させたい「リスト型」の投稿リストブロックを追加し、設定を行う。

STEP
投稿リストをカード型で追加する

続いて、スマホで表示させたい「カード型」の投稿リストブロックを追加し、設定を行う。

STEP
2つの投稿リストをグループ化する

2つの投稿リストを選択し、ツールバーの【オプション】(点が縦に3つの部分)→【グループ化】する。

2つの投稿リストをグループ化
2つの投稿リストをグループ化
STEP
デバイスコントロールを設定する

「リスト型」の投稿リストを、ツールバーの【デバイスコントロール】→【PCサイズでのみ表示する】にする。

PCサイズでのみ表示
PCサイズでのみ表示

続いて「カード型」の投稿リストを、ツールバーの【デバイスコントロール】→【スマホサイズでのみ表示する】にする。

スマホサイズでのみ表示
スマホサイズでのみ表示

2記事目以降の表示方法は今までと同じです。

そして出来上がったスマホでの表示はこちら!

スマホでの見え方
スマホでの見え方

1記事めはカード型で1列表示。
2記事め以降はカード型で2列表示。

妹分のゆずいろ

うん。1記事めが目立っていいね!

みんなの投稿リストデザインアイデア

SWELLを使っている方の、投稿リストを使った「これ素敵!」と思ったアイデアをご紹介します!

コビガジェライフ
コビガジェライフ

ブログ名:コビガジェライフ

管理人:こびぃさん(

こびぃさんの新着記事エリアは、

  • 最新記事:リスト型
  • 2記事目以降:テキスト型

となっています。

カラムの半分を使っているエリアですが、コンパクトにまとまっていて、なおかつトップページ全体の雰囲気ととっても合っています。

妹分のゆずいろ

おっしゃれ~!!

しゃり。チャンネル
しゃり。チャンネル

ブログ名:しゃり。チャンネル

管理人:しゃりさん(

しゃりさんの新着記事エリアは、

  • 最新記事:大きなカード型
  • 2記事目以降:小さなカード型

となっています。

最新記事がものすごく目を引きます。

サイドバーがあるので、1列のカード型でも大きすぎることもなく、しっくりきています。

妹分のゆずいろ

素敵なアイキャッチが映えてる♪

最後に

投稿リストにカラムを利用すると、レイアウトの幅が広がります。

気に入ったアイデアがあれば真似てチャレンジするもよし、自分で新たにレイアウトを考えるのもよし。

私は雑念が入らないお風呂の中で、ブログのデザインをよくひらめきます。

くうか

これからも新たなアイデアが生まれてくるかもしれない。
…お風呂でね。笑

\ おすすめのテーマ /

テーマSWELL

シンプルでスタイリッシュなデザインと高機能が備わったテーマ
快適すぎてびっくりしちゃうかも!?

ぽちっとしていただけると嬉しいです

にほんブログ村 ライフスタイルブログ ミニマリストへ

フォロー待ってます

くうかんしんぷるライフ - にほんブログ村

楽天ROOMに愛用品を登録しています

楽天ROOM

ライフスタイルまとめメディアへ

投稿リストのデザインアイデア

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

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!

関連キーワード #SWELL #ワードプレス #はてなブログ

コメント

コメントする

CAPTCHA


Contents
閉じる