SWELLで投稿リストブロックを使った記事一覧のデザインアイデア集
こんにちは、WordPressテーマ「SWELL」で作ったブログを２つ運営中のくうかです！
SWELLは、見た目を確認しながらサイトのデザインを作れるし、おしゃれなところが気に入っています。
２つのブログ、どちらともトップページをあれこれ考えながら作りました。
固定ページを使ったトップページを作る際は、見やすさとオリジナリティを意識しています。
特に、新着記事はリピーターなら絶対に見る部分！
２つのブログでこだわった、記事一覧デザインの作り方を紹介します。
くうか同じSWELLの仲間で「おっ！アレンジが素敵！」と思ったブログも紹介しています！
- 投稿リストをアレンジしたい
- オリジナリティのあるブログのデザインを作りたい
＼ こちらもおすすめ ／
SWELLの投稿リストブロックを使った、記事一覧デザインアイデア集
SWELL独自の高機能な「投稿リスト」ブロック。
記事の一覧を取得でき、表示する数やカテゴリーやタグの指定・記事IDの指定など、細かい設定をおこなうことができる超優秀なブロックです。
表示レイアウトも選べる！
大きく分けて４種類あります。
リスト型（左右交互表示タイプもあり）
リストで記事一覧が見やすくなる
それぞれのレイアウトは美しくそのまま使っても全然オッケーなのですが、トップページで使う場合、
- オリジナリティを出したい
- 目を引くレイアウトにしたい
と感じるなら、【リッチカラム】or【カラム】ブロックを使うと、普通とは一味違うレイアウトを作ることができます。
現在の２つのブログのトップページはこちらです。気になったら見てみてください。
以下、私が試してみた「投稿リスト×リッチカラム」を使った記事一覧デザインを紹介していきます。
1. 最新の２記事をカード型×３記事目からテキスト型
当ブログの新着記事レイアウトの最新バージョンの表示がこちら。
バージョン３です。
今までは１記事目のみを目立たせていましたが、冒険して２記事にしてみました。
サイト型で画面を広く使えるので、２記事が目立って良いかな～と。
モバイルではこのようになります。↓
モバイルでは２列でも１列でもお好きな方で良いですが、なるべく多く見せたくて現在は２記事で。
下のテキスト型リストを３記事目からの表示にしています。
その場合どうやってそれを実現できるのか、調べてCSSを作りました。
投稿リストブロックを追加する。
- 表示する投稿数：２
- レイアウト：カード型
- 表示順序：新着順
- 最大カラム数：２（PC・SPともに）
- 抜粋文：お好みで（当ブログはPCのみ40）
投稿リストブロックを追加する
- 表示する投稿数：５
- レイアウト：テキスト型
- 表示順序：新着順
- 抜粋文：０
投稿リストを３記事目からの表示にしたいという場合のCSSです。
１．投稿リストブロックを選択した状態で、Settingタブ内の【高度な設定】に追加CSS名「li-2nd-none」を入力する。
２．【カスタマイザー→追加CSS】または【固定ページ下部のカスタムCSS】に以下のコードを追加
.li-2nd-none li:nth-child(-n+2) {
display: none;
}このCSSをトップページでのみ使用する場合は、トップページの固定ページ下部にあるカスタムCSS欄に記載した方が速度は多少速いと思われます。
- コードを追加する場合は自己責任の上おこなってください。
- 表示される記事数が２つ減るので、記事数をお好みで調整してください。
１〜２番目の記事を非表示、だけでなくカッコ内の「（-n+2）」の２の部分を他の数字に変えると、その数字の数だけ記事を非表示にすることができます！
くうかしらこさんに合っているかチェックしてもらいました！
さらにヤモヲさんにもっとシンプルなコードを教えてもらいました！
いつもフォーラムやTwitter等で助けてくれる、しらこさんの知識が詰まったSWELL TIPS！
SWELLのカスタマイズに詳しい、おしゃれなヤモヲさんのサイト
2. 最新記事のみカード型×２記事目からテキスト型
当ブログの新着記事レイアウトのバージョン１がこちら。
リッチカラムブロックを使って２列にし、最新の記事のみカード型にして目立たせています。
列数は、
- PC：２
- タブレット：２
- モバイル：１
とする。
横幅の割合は設定していない。
左側のカラムに投稿リストブロックを追加する。
- 表示する投稿数：１
- レイアウト：カード型
- 表示順序：新着順
- 抜粋文：お好みで（当ブログはPC・スマホともに40）
右側のカラムに投稿リストブロックを追加する。
- 表示する投稿数：４（お好みで）
- レイアウト：テキスト型
- 表示順序：新着順
- 抜粋文：０
くうかここのレイアウトはリスト型を使っている方も多く見られますね…！
右の投稿リストを２記事目からの表示にする方法
右の投稿リストを２記事目からの表示にしたいという場合には、アナログな方法と自動化する方法があります。
Pickupタブ内の【除外する投稿ID】に最新の記事のIDを入力する
- 簡単だけど、記事が増えるたびにIDを更新しなければならなくなる
①投稿リストブロックを選択した状態で、Settingタブ内の【高度な設定】に追加CSS名「li-first-none」を入力する。
②【カスタマイザー→追加CSS】または【固定ページ下部のカスタムCSS】に以下のコードを追加
.li-first-none > ul >li:first-child {
display: none;
}このCSSをトップページでのみ使用する場合は、トップページの固定ページ下部にあるカスタムCSS欄に記載した方が速度は多少速いと思われます。
- コードを追加する場合は自己責任の上おこなってください。
- 表示される記事数が１つ減るので、記事数をお好みで調整してください。
3. 最新記事のみカード型×タブブロックで新着・人気同時表示
当ブログの新着記事のレイアウト、バージョン２です。
バージョン１とほぼ同じですが、違う部分が右カラムに人気記事を追加したこと。
なぜ人気記事を入れたかというと、
フルワイドブロックを導入してサイドバーを非表示にしたからです。
サイドバーに人気記事を入れていたので、一応トップページでも見られるほうがいいかなーと。
くうかでも人気記事は隠しキャラのように配置しました。笑（見たい人だけ見てねという弱めの思い）
右側のカラムにタブブロックで、新着・人気記事の投稿リストを入れています。
列数は、
- PC：２
- タブレット：２
- モバイル：１
とする。
横幅の割合は設定していない。
左側のカラムに投稿リストブロックを追加する。
- 表示する投稿数：１
- レイアウト：カード型
- 表示順序：新着順
- 抜粋文：お好みで（当ブログはPC・スマホともに40）
タブブロックを追加し、「新着順」「人気順」のタブにする。
新着順タブに投稿リストブロックを追加する
- 表示する投稿数：４（お好みで）
- レイアウト：テキスト型
- 表示順序：新着順
- 抜粋文：０
人気順タブに投稿リストブロックを追加する
- 表示する投稿数：3（お好みで）
- レイアウト：リスト型
- 表示順序：人気順
- 抜粋文：０
レイアウトは新着順とぱっと見で見分けがつくようにリスト型にしています。
4. タテ型レイアウトで新着・人気記事を同時表示
サブブログ「スキマ時間ラボ」で使用したことのあるデザインの１つがこちらです。
１・２はカラムを横に使ったヨコ表示でしたが、今回はタテに使ってみました。
単純に１つのカラムに投稿リストブロックを２つ（カード型・テキスト型）入れています。
ベースはフルワイドブロックなので、タテに２つ並べてもそれほど窮屈に感じません。
人気記事の方もテキスト型表示の部分はCSSを使っていますが、新着記事と同じCSSが使えます。
くうかなので、１つCSSを作っておくと他でも使い回しすることができますよ！
5. デバイスコントロールを使ったPC・スマホ表示分け
サブブログの他のデザインがこちら。
最新の１記事めを、
- PCサイズでは「リスト型」
- スマホサイズでは「カード型」
と、デバイスによって表示を変えています。
- １記事めをリスト型にしてみたかった
- しかしスマホでリスト型だと表示が小さく見づらいので、スマホではカード型にしたかった
理由は以上の通り。
メインのこちらのブログとはまた違うデザインに挑戦したかったのもあります。
では、それはどうしたら実現できるのか？
SWELLではPCとスマホで表示を変えることができる【デバイスコントロール】という機能があります。
（フォーラムで方法を教えていただきました）
PCとスマホで表示を変える方法（デバイスコントロール）
まずPCで表示させたい「リスト型」の投稿リストブロックを追加し、設定を行う。
続いて、スマホで表示させたい「カード型」の投稿リストブロックを追加し、設定を行う。
２つの投稿リストを選択し、ツールバーの【オプション】（点が縦に３つの部分）→【グループ化】する。
「リスト型」の投稿リストを、ツールバーの【デバイスコントロール】→【PCサイズでのみ表示する】にする。
続いて「カード型」の投稿リストを、ツールバーの【デバイスコントロール】→【スマホサイズでのみ表示する】にする。
２記事目以降の表示方法は今までと同じです。
そしてスマホでの表示はこうなる
１記事めはカード型で１列表示。
２記事め以降はカード型で２列表示。
妹分のゆずいろうん。１記事めが目立っていいね！
みんなの投稿リストデザインアイデア
SWELLを使っている方の、投稿リストを使った「これ素敵！」と思ったアイデアをご紹介します！
ブログ名：コビガジェライフ
こびぃさんの新着記事エリアは、
- 最新記事：リスト型
- ２記事目以降：テキスト型
となっています。
カラムの半分を使っているエリアですが、コンパクトにまとまっていて、なおかつトップページ全体の雰囲気ととっても合っています。
妹分のゆずいろおっしゃれ～！！
ブログ名：しゃり。チャンネル
しゃりさんの新着記事エリアは、
- 最新記事：大きなカード型
- ２記事目以降：小さなカード型
となっています。
最新記事がものすごく目を引きます。
サイドバーがあるので、１列のカード型でも大きすぎることもなく、しっくりきています。
妹分のゆずいろ素敵なアイキャッチが映えてる♪
SWELLの投稿リストブロックは超優秀だった
SWELLの「投稿リスト」ブロックは、トップページだけでなく、記事の一覧を表示させたい場合に色んな場所で使うことができます。
基本の機能だけでも高機能で超優秀！
その投稿リストにカラムを利用すると、レイアウトの幅が広がります。
気に入ったアイデアがあれば真似てチャレンジするもよし、自分で新たにレイアウトを考えるのもよし。
私は雑念が入らないお風呂の中で、ブログのデザインをよくひらめきます。
くうかこれからも新たなアイデアが生まれてくるかもしれない。
…お風呂でね。笑
この記事が気に入ったら
フォローしてね！
コメント
コメント一覧 （10件）
はじめまして。
素敵なブログでいつも参考にさせて頂いています。
今こちらの記事を参考にトップページを作っているところなんですが、「２記事目から表示させる」所でつまづいております。
お力を貸して頂けないでしょうか？
「３．最新記事のみカード型×タブブロックで新着・人気同時表示」と全く同じ感じで作っているのですがうまくいきません。
新着記事選択→追加CSSクラスに「li-first-none」入力→固定ページ下のカスタムCSS＆JS、CSS用コードに
「.li-first-none > ul >li:first-child {
display: none;
}」入力しました。
こちらでサイト表示させると、タブ上部の新着記事が消え、人気記事には新着記事が２記事のみ表示されます。
カスタマイザーの追加CSSへ入力してみても同じ結果でした。
お忙しい所本当に申し訳ないのですが、もしよろしければ教えて頂けないでしょうか？
もっちーさん
はじめまして。コメントありがとうございます。
ブログを拝見させていただいた感じでは、私のブログと見比べるとクラス名「li-first-none」を入力する場所が違うかな？と思いました。
入力する場所は、タブブロック内の新着記事の投稿リストを選択した状態の「高度な設定」→「追加CSS名」のところになります。
確認をお願いします！
なお、この記事も画像を追加して多少わかりやすく追記してみました。
これで正解だと良いのですが…。
確認していただきますよう、よろしくお願いします。
くうかさん
早速返信してくださり、ありがとうございます。
ブログの追加画像、とても分かり易いです！！
教えて頂いた通り、新着記事の投稿リストを選択して、高度な設定→追加CSS名へ入力しているのですが、どうしてもうまくいきません。
フルワイドの境界線を「波」にしているのですが、そちらも反映されない状態で。。。
本日、問題のトップページを表示しております。
もしお時間あればもう一度確認して頂けないでしょうか？
宜しくお願い致します。
もっちーさん
変わらなかった感じですかね？
夜までPC見れないので、１度試していただきたいことがあるのですが。
SWELL設定の、キャッシュクリア(コンテンツ)をしてみてほしいです！
私もトップページの変更が反映されなかった時に、これで反映されたので。
それでもうまくいかないようでしたら、また教えてください。
時間ができたら見てみます。
くうかさん
そうなんです、変わらなかったんです。
SWELLのキャッシュクリア(コンテンツ、ブログパーツ両方)も試したのですが、こちらも変わらなかったです。
フルワイドの背景境界線を波に設定してもこちらも反映されずです。
SWELLは最新の状態にしてありますし、何が間違っているのか分からずもう困り果てております。。。泣。
お忙しいと思いますので、ほんとに時間のある時に教えて頂けたら幸いです。
宜しくお願い致します。
もっちーさん
キャッシュも違いましたかー！
ちょっと調べてみたところ、画像関係のEWWWなんたらというプラグインとフルワイドブロックが相性悪いとのことです。そのプラグインは入れてますか？
もし入れていたら、遅延読み込みの設定をオフにした方が良いみたいです。
確認をお願いします！
くうかさん
EWWWのプラグインいれてます！！
早速遅延読み込みをオフにしたらフルワイドの境界線の波は表示されるようになりました！
ありがとうございます！
相性が悪いという事があるのですね。
しかし、２記事目以降を表示させたい問題は解決せずです。。。泣
引き続きネット検索で調べてみます。
もっちーさん
フルワイドは直ってよかったです！
新記事リストの方なんですが、再度見てみたところ、投稿リストの追加CSSクラスのところにクラス名は入っていてOKなのですが、なぜかタブブロック自体の高度な設定→追加CSSクラスにも同じクラス名が入っています。
試しに私の環境で同じことをしたところ、もっちーさんと同じ状態になったので、タブブロックの追加CSS名から「li-first-none」を外してみてください。
これでうまく行くんじゃないかなと思います。
くうかさん
スゴイです！
ちゃんと理想の形になりました！
本当に本当にありがとうございます。
どうお礼を言ったら伝わるか分かりませんが、めちゃくちゃ感謝してます！
ファンになりました♡
今後も「くかんしんぷるライフ」のブログ更新楽しみにしています。
もっちーさん
こちらこそ、勉強になりました。
そこに入れるとこういう動きになるんだなーとわかったので＾＾
伝わりました♪
また見にきてくれたら嬉しいです！