【SWELL】ピックアップバナーの設定方法｜画像つきでわかりやすく解説

WordPressテーマ「SWELL」の中でも人気の高い機能、ピックアップバナー。

トップページに表示できる画像付きのナビゲーションメニューで、特に読んでほしい記事やカテゴリーをアピールするのに最適です。

こんな時におすすめ

この記事では、ピックアップバナーの設定手順を基本から丁寧に解説します。

サイト内の動線を改善したい方、ブログの見た目をグッとおしゃれにしたい方にきっと役立つ内容になっていますので、ぜひ最後までご覧ください。

1.SWELLピックアップバナーの設置手順

SWELLのピックアップバナーは、WordPressの管理画面から、以下の手順で設定します。

WordPress管理画面でメニューを作成

❶ WordPress管理画面の「外観」→「メニュー」からメニュー画面を開きます。

❷ 新しいメニューを作成して、メニュー名は「ピックアップ」など、用途が分かりやすい名前を付けましょう。メニュー設定で「ピックアップバナー」にチェックを入れます。

メニュー項目の追加

❶ ピックアップバナーに表示するページやカテゴリーを選択し、「メニューに追加」します。

画像について

ピックアップバナーの画像は、記事やカテゴリーページに設定したアイキャッチ画像が自動的に使用されます。

は、「説明欄」に画像のURLを記入してください。

メニューに説明欄がない場合

1.メニュー編集画面の右上にある「表示オプション」をクリックします。

2.「説明」にチェックを入れます。

画像URLの調べ方

1.「メディア」→「ライブラリ」を開き、使用したい画像を選択します。

2. 右側に表示される「URLをクリップボードにコピー」をクリックします。

❷ メニュー追加が完了したら、「メニューを保存」します。

ピックアップバナーの設定画面を開く

「外観」→「カスタマイズ」→「トップページ」→「ピックアップバナー」で表示設定を行います。

表示デザインの設定

ピックアップバナーの見た目や表示方法について、以下の項目を設定できます。

❶ バナーレイアウト

PC、スマートフォンで表示するバナーの数をそれぞれ選択します。

❷ バナーデザイン

バナーのデザインパターンや白線の有無、画像を少し暗くして文字を見やすくするなど、見た目の細かな調整ができます。

❸ その他の設定

表示するページや画像の読み込み方など、追加の設定ができます。

トップページ以外の下層ページにも表示：ピックアップバナーをトップページだけでなく、他のページにも表示する場合チェックを入れます。
Lazyloadを強制オフにする：画像をすぐに表示したい場合はチェックを入れましょう。ピックアップバナーはブログの顔となる部分なので、チェックを入れることをおすすめします。

設定の保存

最後に設定を保存するため「公開」をクリックします。

これで、SWELLのピックアップバナーの設定は完了です。

ピックアップバナーを素敵に見せるには、画像選びがとても大切です。

より魅力的になるよう、以下の3つのポイントを意識してみてくださいね。

Point

分かりやすい画像を選ぶ
ぱっと見て内容が伝わる画像がベスト。文字もはっきり読める画像を選びます。ぼやけた画像や細かすぎる画像は避けたいですね。
内容に合った画像を使う
リンク先の記事やカテゴリーの内容がイメージできる画像を選びます。クリックした時に「あれ？違う内容？」とならないようにしましょう。
ブログの雰囲気と合わせる
ブログ全体の雰囲気に合った画像を選ぶと、まとまりのある印象に。統一感は大切なポイントです。