【テーマSWELL】最新の1記事をスキップして新着2番目の記事から表示

最新の1記事をスキップ

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

SWELL

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

私も「テーマ「SWELL」をカスタマイズ!好みのトップページができた」を書いた後、ちょこちょこいじって記事とは違う印象になってしまいました。

画像を貼りかえなくちゃ!と思うものの、またすぐカスタマイズの虫が騒ぎ出すので、もうしばらく昔の画像のまま(気づかなかったこと)にしておきます。

この記事では、当サイトのトップページ「新着記事」部分をちょっとカスタマイズしたので、紹介します。

トップページ

最新記事を大きく表示し、次のカラムでその記事をスキップ、2記事目から表示するやり方です。

記事の内容(もくじ)

カスタマイズしたトップページ

カスタマイズしたトップページ

「新着記事」部分の構造

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

左カラムの設定内容

投稿リストブロック

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

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

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

右カラムの設定内容

投稿リストブロック

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

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

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

カスタムCSSを使い自動制御するやり方

  1. 右カラムの投稿リストを選択
  2. Settings最下段「追加CSSクラス」にクラス設定
    「first-displaynone」← 任意のクラス名
  3. 編集画面下の「カスタムCSS&JS」にCSS
    カスタムCSS&JSの「CSS」欄に下記を記述
.first-displaynone ul li:first-child {
    display:none;}

「li:first-child」リストの1番目を指定
「display:none」非表示にする

ただ、それだけだと、このページのリストすべてに影響するので、「first-displaynone」というクラスでくくり、その部分だけ非表示にしてあげる。

「first-displaynone」部分は自分がわかりやすい任意の文字列でどうぞ。
追加CSSクラスとCSSのクラスを一致させれば大丈夫です。

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

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

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

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

右カラムの設定

投稿リスト

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

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

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

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

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

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

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

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

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

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

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

  • 副業や転職、フリーランスへの一歩
  • 自分に合うスキルを見つけよう
  • 体験レッスンからの受講申込で初月無料
よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
記事の内容(もくじ)
閉じる