MENU
カテゴリー
【新年度応援セール!】期間限定で 20%OFF!

ピックアップバナー機能の使い方

2020 3/10
ピックアップバナー機能の使い方
記事上のウィジェットエリア

ここでは、SWELL ver 1.1.4 から追加された「ピックアップバナー機能」の使い方についてご説明していきます。

「ピックアップバナー」とは、トップページに表示できる画像バナー形式のナビゲーションメニューのことです。

ピックアップバナー
目次前広告表示エリア
目次

ピックアップバナーの使用方法

ピックアップバナーを使用するには、まずカスタムメニューを用意します。

外観」>「メニュー」から、新規メニューの作成を行ってください。

次に、画面左側の「メニュー項目を追加」からピックアップバナーとしてリンクを設置したいページを選び、画面下側にある「メニューの位置」設定にて「ピックアップバナー」にチェックを入れて保存します。

メニューの基本操作は、グローバルナビの設定方法の記事で詳しく説明しています。

ピックアップバナー編集画面
メニューをピックアップバナーとして設定している様子

これで、「ピックアップバナー」が表示されるようになります。

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

投稿ページや固定ページ、カテゴリーアーカイブページへのリンクなどを設置した場合は、「アイキャッチ画像」が基本的には表示されるようになっています。(アイキャッチ画像がなければ、NO IMAGE画像が表示されます)

しかし、

  • アイキャッチ画像とは別の画像を設定したい
  • カスタムリンクでアイキャッチ画像の設定がない

などの場合は、メディアにある画像を指定することもできます。

下の画像のように、メニュー項目の設定欄にある「説明」という入力エリアに画像のURLを指定することで、その画像がバナー画像として表示されます。

各メニュー項目の設定
カスタムリンクでの例

ただし、他サイトのURLを入力しても表示されません。

また、ここにある「ナビゲーションラベル」という設定欄の内容はピックアップバナー上に表示することができます。(設定方法は後述します)

カテゴリー・タグページの「説明」に関する注意点

カテゴリーやタグの編集ページにて、そのカテゴリーやタグについての「説明」を設定できるエリアがあります。

ここに文章を入力していると、その文章がメニュー項目内の「説明」にも反映されてしまうことがあります。
その場合は、その説明文をメニューの項目内から削除して改めてURLを入力してください。

メニュー項目内から「説明」を編集しても、カテゴリーやタグページの説明文には影響しません。

ピックアップバナーのカスタマイズ方法

カスタマイザーの起動

SWELLでは基本的にテーマカスタマイザーから全ての設定を行うことができます。

カスタマイザーの起動方法については以下の記事を参考にして下さい。

以下では、カスタマイザー上での操作について説明していきます。

ピックアップバナーに関する設定は、カスタマイザー内の「トップページ」>「ピックアップバナー」メニュー内に用意しています。

カスタマイザー 内の「トップページ」
カスタマイザー 内の「トップページ」
「トップページ」>「ピックアップバナー」
「トップページ」>「ピックアップバナー」

バナーレイアウトの設定

「外観」>「カスタマイズ」>「トップページ」>「ピックアップバナー」へ進むと、まず初めに以下のような設定項目があります。

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

この設定で、PCサイズ・スマホサイズ時のバナーレイアウトを設定できます。

固定幅 ○列」というのは、バナーが何枚でも指定列数に応じたサイズで表示されます。
例えば、デフォルトの「固定幅 4列」であれば横幅25%で表示されます。

バナーを3つ設定した場合を例に、レイアウト設定によって表示がどう変わるかを撮影しましたのでぜひご覧ください。

ピックアップバナーのレイアウト設定

SWELL 1.x系の時の動画なので、カスタマイザーの見た目が2.0以降のものと異なります。

バナーデザインの設定

続いて、以下のような設定項目が並んでいます。

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

ここから、バナー画像の上にそのタイトルテキストを表示させたり、少し見た目に関して調節したりできます。

バナーデザインの比較

ピックアップバナーデザイン比較

トップページ以外の下層ページにも表示可能

この「ピックアップバナー」は、投稿ページやアーカイブページなどの下層ページにも表示させることが可能です。

デザインに関する設定項目のすぐ下に以下のような設定があり、

下層ページへの表示設定

ここにチェックを入れると、下層ページでも表示されるようになります。

ページごとに表示・非表示の設定をすることもできます

ページごとに表示設定を切り替えることも可能です。

投稿編集画面の右側に、以下のような設定エリアがあるので、「ピックアップバナー」と書かれたセレクトボックスで表示・非表示を選択することができます。

ピックアップバナーの個別設定

例えば、「下層ページにも表示させているけど 特定のページだけ表示させたくない」場合などに活用してください

記事下のウィジェットエリア

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

目次
閉じる