【SWELL】ピックアップバナーの設定

SWELLピックアップバナーの設定と画像の大きさ

SWELLのピックアップバナーの設定についてまとめています。

目次

基本設定

ピックアップバナーは、専用のメニューを作成すると表示されます。

ピックアップバナー機能の使い方 | WordPressテーマ SWELL

専用メニューの作成

メニュー設定の「ピックアップバナー」にチェックを入れたメニューがピックアップバナーで表示されます。

管理画面 ▶ 外観 ▶ メニュー ▶ メニュー設定 ▶ ピックアップバナー

ピックアップバナーの設置

新規にメニューを作成して、表示させたいページをリストに追加して下さい。

初期設定では「メニュー項目を追加」に投稿・固定・カテゴリーページ一覧しか表示されていませんが、「表示オプション」の「画面上の要素」にチェックを入れると、LPやタグページも一覧に追加されます。

また、カスタムリンクを使えば、どんなページ(外部サイト等)でもメニューに追加できます。

タイトルの変更(上書き)

ピックアップバナーに表示されるタイトルは、「ナビゲーションラベル」で変更できます。

管理画面 ▶ 外観 ▶ メニュー ▶ ナビゲーションラベル

バナータイトル

初期設定では、ページのタイトルがそのまま表示されるので、変更したい時は任意の文字列を入力して下さい。

画像の変更(上書き)

画像を変更したい時は、「説明」欄に画像URLを入力します。

ピックアップバナーに任意の画像を指定
説明欄が表示されない時は表示オプションを開いて「説明」にチェック

画像の上書きは任意ですが、画像の縦横比だけは必ず合わせて下さい(レイアウトが崩れる)。

ポイント
  • アイキャッチ画像が設定されているページはアイキャッチ画像が表示される
  • ピックアップバナーの画像は大サイズのサムネが表示される
  • 画像の縦横比を合わせておかなければレイアウトが崩れる
  • 画像が設定されていないとNO IMAGE画像(灰色一色)が表示される
  • 任意の画像を指定することもできる

また、初期設定では大サイズのサムネイルが読み込まれるので、必要なければ小さな画像を設定して下さい。画像を適切なサイズまで落とすことで、PageSpeed Insightsのスコアが改善される可能性があります。

スクロールできます
パソコンタブレットスマホ
固定幅4列288 px
固定幅3列389 px
固定幅2列592 px315 px172 px
固定幅1列645 px351 px
フレックス表示数で変動
スライド566 px308 px
※コンテンツ幅を変更していない場合

レイアウトの変更

レイアウトは、カスタマイザーの「ピックアップバナー」から変更できます。

カスタマイザー ▶ トップページ ▶ ピックアップバナー

カスタマイザーのピックアップバナー

バナーレイアウトとデザインは、説明を聞くよりもプレビューで確認しながら設定した方が早いです。

設定は全て任意ですが、メニューの数を2or4かつレイアウトを2列or4列に設定すると見栄えが綺麗です。

ポイント
  • レイアウトはPCとSP別々に設定できる
  • トップページ以外のページにも表示できる
  • Lazyload(画像の遅延読み込み)を強制オフにできる

個別ページの設定

記事編集画面では、個別にピックアップバナーの表示・非表示の設定を上書きできます。

記事編集画面のピックアップバナーの設定

全体の設定を上書きしたい時は、記事編集画面で設定して下さい。

上下余白の設定

ピックアップバナー上下の余白を変更する方法です。

上の余白

ピックアップバナー上の余白は、カスタマイザーのトップページ「その他」から変更できます。

カスタマイザー ▶ トップページ ▶ その他 ▶ コンテンツ上の余白量

コンテンツ上の余白

お好みで、「なし」「狭め」「標準」「広め」から選択して下さい。

下の余白

ピックアップバナー下の余白は、カスタマイザーの「追加CSS」にコードを追記して変更できます。

カスタマイザー ▶ 追加CSS

コンテンツ下の余白
.p-pickupBanners {
    margin-bottom: 4em;
}

初期設定は4emに設定されているので、任意の値を入力して追加CSSに追記して下さい。

最後に

ピックアップバナーは、トップページに固定表示させたい&アピールしたいページがある時に使うと便利です。

スライダーよりも軽く、完全任意のページ&画像を設定できるのがピックアップバナーの特徴です。

よかったらシェアしてね!

今日の一言

2023年11月3日にリリースされたコアアップデートが11月29日にロールアウトしました。長かっただけで特に大きな変化はありません。10月で大きく減ったアクセスは少し戻ったかな!?程度です(恐らく季節需要の高い記事のアクセスでそう見えるだけ)。とりあえずやる事は変わらないので、次のコアアップデートに向けてコツコツ記事を書いてリライトするだけです。

コメント

コメントする

目次