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

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

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

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

ピックアップバナー

PC表示では4列表示、スマホでは2列表示となります。バナーの数は好きなだけ設置可能です。

目次前広告表示エリア
目次

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

ピックアップバナーは、「外観」>「メニュー」から、メニューとして作成します。

メニューの基本操作がわからない方は、先にグローバルナビの設定方法の記事をご覧ください。

メニューを新規作成し、ピックアップバナーとして表示させたいページを選択したら、「メニューの位置」の設定欄から「ピックアップバナー」にチェックを入れて保存します。

ピックアップバナー編集画面

ピックアップバナー」に設定されたメニューの内容が、ピックアップバナーがトップページに表示されるようになります。

各メニュー項目の設定について

ナビゲーションラベル」の内容がピックアップバナーに表示されるメニュー名となり、

説明」という欄に画像のURLを指定することで、その画像がバナー画像として表示されます。

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

ただし、画像URLとして有効になるのは自サイトの「メディア」にアップロードしている画像のみとなります。
他者サイトのURLを入力しても、表示されません、

「説明」欄に画像URLの指定がない場合

投稿ページ・固定ページ・カテゴリーやタグページでは、そのページの「アイキャッチ画像」が自動で表示されます。

アイキャッチ画像も設定されていない場合やカスタムリンクの場合は、サイトで設定しているNO IMAGE画像となります

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

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

ここの設定欄を使用している場合で、かつ、メニュー項目内の「説明」が空の場合、なぜかタームの「説明」の内容がメニュー項目内の「説明」にも反映されてしまうようです。

そのため、タームの「説明」を設定した場合は画像URLを指定する場としてのメニュー項目内の「説明」にURLではない文章が指定されてしまうので、注意して下さい。

画像URL以外が入力されている場合はその内容を無視するように、ver 1.2.2(.2) にて改善致しました。

デザインのカスタマイズ方法

カスタマイザーの起動

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

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

あわせて読みたい
【SWELLの設定】「テーマカスタマイザー」の使用方法
【SWELLの設定】「テーマカスタマイザー」の使用方法SWELLの設定やカスタマイズは、ほぼ全て「テーマカスタマイザー」機能で行うことができるように設計しました。「テーマカスタマイザー」機能はリアルタイムで設定が反映...

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

ピックアップバナーに関する設定は、カスタマイザー内の[TOP]その他の設定というメニューから設定できます。

[TOP]その他の設定

バナーデザインをカスタマイズする

「外観」>「カスタマイズ」> [TOP]その他の設定へ進むと、以下のような設定項目があります。

ピックアップバナーのデザインカスタマイズ

ここからデザインのカスタマイズが可能です。

バナーデザインの比較

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

カスタマイザーを使用している様子を動画にしました

レイアウトパターン(何列表示か)を選択する

ver. 1.2.8より、ピックアップバナーのレイアウトを選択できるようになりました。

上記のデザイン設定のすぐ上の辺りに、設定項目を追加しています。

各設定でレイアウトがどう変わるか、動画を録りましたのでぜひご覧ください。(バナーを3つ設定した場合の例)

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

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

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

デザインに関する設定項目のすぐ下に以下のようなチェックボックスがあります。

下層ページへの表示設定

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

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

各ページにて、個別に表示設定することも可能です。

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

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

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

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

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

目次
目次