【SWELL】ピックアップバナーの設定方法!公式より分かりやすく解説

SWELLピックアップバナーの設定方法
URLをコピーする
URLをコピーしました!
悩んでいる男性

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

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

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

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

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

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

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

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

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

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

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

SWELLをまだ導入していない方は以下の記事が参考になります。

目次

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

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

ピックアップバナー

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

Shindy

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

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

デメリット
メリット
  • やりすぎると散らかった印象になりむしろ目立たなくなる
  • リンク先と画像が結びつかないと効果は薄い
  • 特に見せたい記事やカテゴリを強調出来る
  • ビジュアルを見せることでリンク先をイメージしやすい
  • テキストだらけより洗練された印象になる
  • うまくいけばクリック率が高まる

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

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

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

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

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

カスタムメニュー作成
カスタムメニュー作成

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

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

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

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

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

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

Shindy

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

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

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

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

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

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

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

事前に巣kなアスペクト比で画像を準備しておく
Shindy

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

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

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

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

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

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

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

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

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

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

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

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

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

バナーのデザイン設定

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

バナーデザイン
バナーデザイン

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

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

バナータイトルのデザイン
バナータイトルのデザイン

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

Shindy

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

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

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

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

トップページ以外(下層ページ)でも表示
トップページ以外(下層ページ)でも表示

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

投稿編集ページでも設定可能
投稿編集ページでも設定可能

ピックアップバナーの文字の大きさを変える方法

ピックアップバナーの文字(バナータイトル)が小さいという方は、以下のコードをCSSで追加すると文字サイズを調整できます。

「外観」>「カスタマイズ」>「追加 CSS」に以下を貼り付けて、font-sizeの後の数字を好きなサイズに調整してください。

※コード修正は自己責任でお願いします。

/* ピックアップバナーのフォントサイズ */
	.c-bannerLink__label {
	font-size: 19px
	}
	/*ここまで*/

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

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

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

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

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

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