SWELLのピックアップバナー設定方法【画像付きで詳しく解説！】

本記事では、SWELLのピックアップバナーの設定方法について画像付きで詳しく解説していきます。

ちなみに当サイトでもピックアップバナーを取り入れており、Home は下記のような感じです。

SWELLでピックアップバナーを設置することで得られるメリットは以下の通り。

SWELLユーザーの方、ぜひ読み進めて見てくださいね。

ピックアップバナーとは？

「ピックアップバナー」とは、上記画像のように特定の記事をトップページへピックアップするバナーのことを言います。

冒頭の繰り返しにはなってしまいますが、このピックアップバナーを設定することで以下のようなメリットが得られます。

当サイトはもともと記事スライダーをメインに使っていたのですが、ピックアップバナーの方が気に入っています！

実際の、記事スライダーとピックアップバナーのデザイン比較は以下の通りです。

• 記事スライダー(過去の当サイト①)

• ピックアップバナー(過去の当サイト②)

ピックアップバナーの方が好みの方はぜひ、以下より設定していきましょう〜！

SWELLのピックアップバナー設定方法

SWELLのピックアップバナー設定の手順を簡単にまとめると以下の通り。

では以下より早速設定していきましょう。
画像付きで詳しく解説していきます！

① 事前準備：使用する画像を用意

まず、事前準備として使用する画像を用意します。

使用する複数の画像は、サイズを統一しておきましょう！
統一にしていないと、下記の画像のように型崩れしてしまいます…

サイズ統一しないで画像を用いた場合

サイズを統一させた画像を用意した後は、WordPressへ画像をアップロードし、画像アドレスをメモ・保管しておきましょう。

画像アドレスは、②ピックアップバナー用のカスタムメニュー作成の際に必要です。

② ピックアップバナー用のカスタムメニュー作成

ではここから、実際にピックアップバナー用のカスタムメニュー作成の設定をしていきます！

以下の手順で進めていきましょう。

STEP

外観→メニュー

STEP

新しいメニューを作成する

①「新しいメニューを作成しましょう」をクリック
↓
②「ピックアップバナー」と入力
↓
③「メニュー作成」をクリック

STEP

任意のメニュー項目を追加する

STEP

カスタムリンク内の設定

入力事項

1. URL
   …ピックアップしたい記事 or カテゴリーのURL
2. ナビゲーションラベル
   …ピックアップバナーの名前
3. 説明
   …画像アドレス (①事前準備で用意したもの)

③の説明欄が表記されていない方へ

上部にある表示オプションをクリックし、説明にチェックを入れると表記されるようになります。

STEP

メニューを保存する

ピックアップバナーにチェックをし、メニュー保存します。

以上で基本事項の設定は完了です！
あとはデザインを整えていきましょう！

③ ピックアップバナーデザイン設定

ここからは、ピックアップバナーのデザインを設定です。

以下の手順で、ピックアップバナーのデザイン設定場所へいきます。

好みにデザインにして、ピックアップバナーの完成です！
設定お疲れ様でした！

まとめ

今回は、SWELLのピックアップバナーの設定方法についてご紹介してきました。

ピックアップバナーは見て欲しい記事をピックアップできると同時にデザインもより綺麗に整うので、設定がまだのSWELLユーザーの方はぜひ一度試して見てくださいね。

では今回は以上です。
最後まで読んでいただきありがとうございました。