SWELLのピックアップバナーの設定についてまとめておきます。
基本設定
基本的な設定方法は、ピックアップバナー機能の使い方 | WordPressテーマ SWELLで確認して下さい。
ピックアップバナーの設置
管理画面の外観「メニュー」の「ピックアップバナー」にチェックを入れたメニュー一覧がピックアップバナーとして表示されます（子メニューは表示されないので注意）。
必要であれば、「ピックアップバナー」等のメニュー名を付けて新規にメニューを作成して下さい。
この際、初期設定では「メニュー項目を追加」に投稿・固定・カテゴリーページ一覧しか表示されていませんが、「表示オプション」の「画面上の要素」にチェックを入れると、LPやタグページも一覧に追加されます。
また、カスタムリンクを使えば、どんなページ（外部サイト等）でもメニューに追加できます。
バナータイトルに表示されるテキスト文字は、「ナビゲーションラベル」で変更して下さい。
初期設定では、投稿や固定ページのタイトルがそのまま表示されます。
レイアウトの変更
レイアウトやデザインは、カスタマイザーの「ピックアップバナー」から変更できます。
バナーレイアウトとバナーデザインは、プレビューで確認しながらお好みで設定して下さい（バナーレイアウトはパソコンとスマホ・タブレットを別々に設定できる）。
その他の設定で、「トップページ以外の下層ページにも表示する」にチェックを入れると、全てのページでピックアップバナーが表示されますが、投稿及び固定ページのSWELL設定から個別に変更することも可能です。
また、「Lazyloadを強制オフにする」のチェックを外すと、バナー画像の遅延読み込みが有効になります。
画像の設定
ピックアップバナーの画像を設定する時は、下記のポイントに注意して下さい。
- アイキャッチ画像が設定されているページはアイキャッチ画像が表示される
- 大きなアイキャッチ画像は横幅768pxのサムネ
medium_largeで表示される - 画像の縦横比を合わせておかなければ高さがずれてレイアウトが崩れる
- 画像が設定されていないとNO IMAGE画像（灰色一色）が表示される
- 任意の画像を指定することができる
アイキャッチ画像が設定されているページは、アイキャッチ画像が表示されます。
この際、画像は縮小表示されるので、そのままでも特に問題はありませんが、縦横比だけは必ず統一して下さい。縦横比の異なる画像を使用すると、表示される画像の高さがずれてレイアウトが崩れます。
また、アイキャッチ画像が設定されていないページ＆カスタムリンクで追加したページに画像を設定したり、アイキャッチ画像とは異なる画像を指定することもできるので、任意の画像に変更したい時は、表示オプションの「説明」にチェックを入れて、追加された説明欄に表示させたい画像のURLを入力して下さい。
参考までに、下記は実際のサイトで表示されるピックアップバナーの横幅（px）です。
| パソコン | タブレット | スマホ | |
|---|---|---|---|
| 固定幅4列 | 288 px | ━ | ━ |
| 固定幅3列 | 389 px | ━ | ━ |
| 固定幅2列 | 592 px | 315 px | 172 px |
| 固定幅1列 | ━ | 645 px | 351 px |
| フレックス | 表示数で変動 | ━ | ━ |
| スライド | ━ | 566 px | 308 px |
※コンテンツ幅を変更していない場合
このブログでは、パソコン「固定幅4列」、スマホ（タブレット）「固定幅2列」に設定しているので、画像は全てのデバイスに対応できる横幅315pxの大きさを使用しています。アイキャッチ画像のサムネmedium_large（横幅768px）を表示させるよりも、専用の画像を用意した方がファイルサイズは小さくなります。
上下余白の設定
ピックアップバナー上下の余白を変更する方法です。
上の余白
ピックアップバナー上の余白は、カスタマイザーのトップページ「その他」から変更できます。
お好みで、「なし」「狭め」「標準」「広め」から選択して下さい。
下の余白
ピックアップバナー下の余白は、カスタマイザーの「追加CSS」にコードを追記して変更できます。
|
1 2 3 |
.p-pickupBanners { margin-bottom: 4em; } |
初期設定は4emに設定されているので、任意の値を入力して追加CSSに追記して下さい。
最後に
ピックアップバナーは、トップページに固定表示させたい＆アピールしたい記事がある時に使うと便利です。
スライダーよりも軽く、完全任意のページ＆画像を設定できるのがピックアップバナーの特徴です。
コメント