スマホ設定

スマホ検索メニューの設定|広告やタグを表示させる方法

スマホ検索メニュー

今回は、スマホ検索メニューの設定について解説していきます。

スマホ検索メニューとは、スマホサイトのヘッダーに表示させた虫眼鏡アイコンをクリックすると出現するメニューのことです。

スマホ検索メニューは、

  1. オーバーレイ
  2. スライド

この2種類が選択できます

オーバーレイ
スライド

検索メニューの中には、

  • 検索フォーム
  • タグ(キーワード)
  • メニュー(カテゴリー)
  • 広告

などなど、自由にコンテンツを挿入できます。

それでは、スマホ検索メニューの設定方法から、スマホ検索メニューに広告やタグを表示させる方法までの手順を解説していきます。

スライドメニューも活用しよう!

似た機能で「スマホのスライドメニュー」があります。

スライドメニューとスマホ検索メニューを使い分けることで、ユーザーがサイト内を回遊してくれる確率を上げることができますよ。

検索メニューの設定

検索メニューを有効にする

まずは「検索メニュー」を有効にしましょう。

ダッシュボードを開き、「AFFINGER管理」をクリック。

①「メニュー」設定を開きます。

下へスクロールすると「検索アイコン」という項目があるので、②「スマホヘッダーに検索アイコンを追加する」にチェックを入れて保存します。

これで検索メニューが有効になり、スマホのヘッダーに検索アイコン(虫眼鏡)が表示されます。

検索アイコンが表示されている状態

「オーバーレイ」or「スライド」を選択する

検索アイコンの設定の「オーバーレイ」と「スライド」を切り替えることで、全画面表示とスライド表示が選択できます。

オーバーレイ
スライド

おすすめは「オーバーレイ」

理由は2つあります。

  1. 「オーバーレイ」は表示幅が大きいので、コンテンツを作成しやすい
  2. 「スライド」は通常のスライドメニューとほぼ同じなので使用するメリットがない

実際に当サイトも検索メニューは「オーバーレイ」にしています。

検索メニューにコンテンツを挿入する方法

検索メニューにコンテンツを挿入するには「ウィジェット」を使います。

ウィジェットエリアは、「検索(スライド/オーバーレイ)に表示」です。

このエリアにウィジェットを追加することで、検索フォーム・タグ・バナー広告など自由に表示できます。

たとえば、広告を表示させたい場合は、

  • AFFINGERタグ管理マネージャー」や「マイブロック」に広告を登録し、ショートコードを作成する
  • ウィジェット「STINGERカスタムHTML」を追加し、ショートコードを貼り付ける

これで広告が表示されます。

参考AFFINGER6「マイブロック」の便利な使い方

タグ(キーワード)を表示させたい場合は、「タグクラウド」を「検索(スライド/オーバーレイ)に表示」に追加するだけです。

検索フォームの表示について

検索メニューを有効にしただけの状態(ウィジェットエリアに何もコンテンツが入っていない状態)では、デフォルトで検索フォームが表示されるんですが、ウィジェットエリアに何かコンテンツを追加すると、検索フォームは非表示になります。

検索フォームを表示させたい場合は別途「検索ウィジェット」を追加してください。

-スマホ設定