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

SWELLピックアップバナーの設定方法
悩んでいる男性

ピックアップバナーがおしゃれなので、導入したいんだけど設定方法を教えて。

今回はピックアップバナーの設定について説明しています。画像付きで詳しく説明しています。

この記事の内容
  • ピックアップバナーとは?
  • ピックアップバナーの作り方と設定方法

ピックアップバナーはテキストだけでなく、ビジュアルを使うことでクリック率やユーザーの回遊率を高めたりするのに効果的です。

基本的な設定方法を覚えて、カスタマイズに挑戦してみましょう。

SWELLでは「テーマカスタマイザー」と呼ばれる、設定の変更をプレビュー画面で確認しながらカスタマイズ出来る機能があります。

画面左側の設定を変更すると、変更内容が右側にプレビューとして表示されます。

テーマカスタマイザー
テーマカスタマイザー

この機能を使って、変更を確認しながら基本設定を進めましょう。

「テーマカスタマイザー」を利用してスマホ画面をレビューを見ながらチェックしたい場合は、画面左下のコントロールを非表示の横のマークで切り替えられます。

テーマカスタマイザーのコントロール
目次

SWELLのピックアップバナーとは?

ピックアップバナーとは、下記の画像のように、バナー形式で表示されるナビゲーションメニューのことです。

ピックアップバナー

カテゴリーやタグ、各投稿に飛ばせるバナーで、単なるテキストメニューよりおしゃれに見えますよね。

僕が参考にしていたブログサイトで初めて見た時から、これを使ってみたい!と思っていました。

ピックアップバナーを使うメリットは以下の通りです。

  • 特に見せたい記事やカテゴリを強調出来る
  • ビジュアルを見せることでリンク先をイメージしやすい
  • テキストだらけより洗練された印象になる
  • うまくいけばクリック率が高まる

一方でデメリットもあります。

  • やりすぎると散らかった印象になりむしろ目立たなくなる
  • リンク先と画像が結びつかないと効果は薄い

使う際は、全体のデザインやレイアウトなどを考慮したうえで使用するのがいいと思います。

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

まずは、ピックアップバナーのメニューを作成します。

WordPressのダッシュボードから、「外観」>「メニューに進みます。

左側にあるメニュー項目追加からピックアップバナーのリンク先にしたいページ(記事・カテゴリー・固定ページなど)を右のメニューに追加します。

カスタムメニュー作成

メニューの作成方法については、【SWELL】グローバルナビ(ヘッダーメニュー)の設定方法で詳しく解説しています。

メニュー名は、ピックアップバナーを作成するので、「ピックアップバナー」と入れておきましょう。

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

ピックアップバナーに使う画像を設定する

メニューが出来たら、今度はピックアップバナーで使用する画像を設定していきます。

画像を設定しない場合は、投稿ページや固定ページなどで使用している「アイキャッチ画像」が表示されます。

Shindy

アイキャッチ画像もない場合は、NO IMAGE画像が表示されます。

NO IMAGE画像は、「外観」>「カスタマイズ」>「サイト全体設定」>「NO IMAGE画像」から設定できます。

先ほどの「外観」>「メニューでメニュー構造に追加したメニューをクリックすると、説明という欄があります。

ここに使用したい画像のURL(自サイトのURLのみ可)を貼り付けて、ページ右下のメニューを保存をクリックすれば、ピックアップバナーの画像が設定できます。

ピックアップバナーの画像を設定する

ここで注意なのが、画像サイズは自動調整されるが、画像比率は調整できないということです。

ピックアップバナーに使用する画像はあらかじめ画像比率を調整して、メディアにアップロードする必要があります。

例えば、正方形の画像のURLを貼り付けた場合は、ピックアップバナーはサイズが自動調整され、正方形で表示されます。

Shindy

ピックアップバナー用に画像をトリミングするような機能はないのです。

そのため、ピックアップバナーを長方形にしたい場合は、事前に同じ画像比率の画像をメディアにアップロードしておく必要があります。

トリミングできないので、事前に調整する必要あり

ピックアップバナーのデザインとレイアウトの設定

ここでは、バナーのレイアウトや細かなデザインが設定できます。

バナーのレイアウトの設定

「外観」>「カスタマイズ」>「トップページ」>「ピックアップバナー」に進みます。

バナーのレイアウト設定

ここではPCとSPそれぞれで、レイアウトを設定できます。

PCは2~4列、SPは1~2列で配置できます。

固定幅4列の場合は、以下のようにピックアップバナーが横幅25%で表示されます。

固定幅3列の場合は、以下のように33%で3列分配置されるので、余ったピックアップバナーは下に並びます。

SPの場合は、横スライドも設定可能です。

バナーのデザイン設定

バナーレイアウトの設定の下にバナーデザインがあります。

バナーデザイン

バナータイトルのデザインはタイトルをどこにどうやって表示するかの設定です。

画像に白線を入れたり少し暗くしたりもできます。

実際に変更をカスタマイザーで確認しながら決めましょう。

Shindy

本サイトは「中央(シンプル)」・「白線付き」・「バナー暗く」で設定しています。

ページごとのピックアップバナーの表示

ピックアップバナーはトップページで表示される設定ですが、その他のページ(下層ページ)でも表示できます。

下層ページでも表示する場合は、「その他」の「トップページ以外の下層ページにも表示する」にチェックを入れます。

バナー表示ページ

上記の設定で、トップページ以外の下層ページにも表示している場合は、各投稿編集ページでも表示・非表示を選択できます。

バナー表示ページ2

ピックアップバナーの設定まとめ

以上でピックアップバナーの設定は終わりです。

ピックアップバナーはメニューとしての用途だけでなく、記事を目立たせるためだったり、フィルターとして利用したり(エリアで選ぶ・ジャンルで選ぶ・予算で選ぶなど)カスタマイズ次第で、様々な使い方ができます。

ピックアップバナーを使いこなして、ユーザーが迷わないサイトにしましょう。

その他、SWELLの初期設定は以下にまとめてありますので、あわせてどうぞ。

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる