トップページをカスタマイズ〈その３〉SWELLの機能で簡単！

ブロックを使い、さまざまなカスタマイズが簡単にできるテーマSWELL。

  SWELL

中でもトップページは最もカスタマイズのやり甲斐のある部分です。

別の運営サイトのトップページをカスタマイズした記事を以前紹介しました。

カスタマイズ参考記事

SWELLのカスタマイズ！サイト型トップページ3サイト・14項目の解説 WordPressテーマ「SWELL」のサイト型トップページのカスタマイズ方法を詳しく解説。トップページ全体の説明画像と設定内容を紹介しています。

SWELLはノーコードで多種多様な表現が出来るので、最高に楽しい作業です。

自分好みのサイトを作る時、トップページのカスタマイズは避けて通れないです。

この記事では、当「おいナビ」サイトのトップページのカスタマイズ方法を紹介しています。

  おいナビのトップページ

＼高速・高機能なイチ押しテーマ／

SWELL公式サイト

【おいナビ】トップページのカスタマイズ

「新着記事」部分の構造

• 左カラム：最新1記事（大き目サムネイル）
• 右カラム：新着2番目から3記事

左カラムの設定内容

投稿リストブロック

1. カード型
2. 新着順
3. 公開日表示（日付横）
4. 最大カラム数 PC・SP共 1列
5. 抜粋文PC40・SP0

最新記事のみ大きなサムネイルで表示。

右カラムとのバランスを考え、PCのみ抜粋文を40文字表示（抜粋が空の場合は本文から指定文字数が抜き取られます）。

最新の記事をスキップする方法を案内していますが、SWELLのアップデートでCSSの追加は必要なくなりました。
この機能がないテーマの参考にこの部分を残しています。

右カラムの設定内容

投稿リストブロック

1. 表示投稿数 4
2. リスト型
3. 新着順
4. 公開日表示（日付横）
5. 抜粋文PC・SP共0
6. 追加CSSクラス「first-displaynone」

実際の表示数は3記事ですが、最新の1記事をCSSで非表示にするので、設定は「表示投稿数 4」です。

※編集画面には4記事並びますが、フロントの表示画面は3記事となります。

カスタムCSSを使って1記事スキップ

SWELLならこれは必要ありません。

SWELLの機能として追加されましたので、次の記事に進んでください。

.first-displaynone ul li:first-child {
    display:none;}

SWELLの機能だけで2番目から表示

WordPressを使っているのに、すごくアナログな対処法ですが、CSSを記述しなくても任意の記事を非表示にすることはできます。

アナログ対処なので、記事アップのたびに対応が必要ですが…。

左カラムは上記と同じやり方で設定。

常に最新記事を非表示

投稿リスト

右カラムの設定項目、下の方

「最後の投稿を非表示にするかどうか」で制御

PC、SPそれぞれ非表示が選べます。

都度IDを設定

投稿リスト

1. 表示投稿数は、表示したい数に設定
2. 投稿リストのpickupタブを選択
3. 除外する投稿IDに最新記事のIDを設定

※投稿IDは投稿一覧画面でわかります。

どう考えても、このやり方は面倒です。うっかり設定し忘れて最新でない記事を消してしまう恐れもありますので、CSSで対応した方が良いと思います。

＼高機能だから初心者でも出来る！／

SWELL公式サイト

CSSがわかるとWordPressが進化する

ものすごくわからる！というレベルまで行かなくても、使い方や簡単な記述の仕方を覚えると、やりたいコトに一歩近づけます。

今のCSSはビックリするくらい何でもできます。昔（古い話ばかりですみません）、画像やJavaScriptで対応していたようなことが、CSS数行で完了。

CSSコードをちょっといじって別の表現に替えるのはとても簡単です。

下記のツイートを見た時は心底驚きました。CSSはどんなレベルまで来ているのだろうか？と。

CSSが少しわかれば、親切な方たちの力を借りて同じことができるわけです。

とにかく、CSSの入口に立って有益な情報が目の前を流れて行かないように…と思います。

おばあさんも目を光らせて、新しいワザをいつも探しています（そしてすぐ忘れる、悲しき老人脳）。