アンカーメニューの設定方法

特定のWEBページ内にアンカーメニューを表示する方法をご紹介します。
ひとつのページ内にコンテンツがたくさんあるときなど、スクロールを繰り返さずともワンクリックで目的の箇所を表示させることができるので便利です。
※ページ内に対象のユニットがひとつもない状態では設定ができませんのでご注意ください。

アンカーメニュー設定画面に入りましょう

  1. bingo!CMS管理画面にログインし、アンカーメニューを設置したいページのページ編集画面を開きます。
     
  2. 画面上部のツールバーから、ANCHOR NAVI ボタンをクリックしアンカーメニュー設定画面を開きます。
     
各項目は以下の通りです。何も選択しないとテンプレートの設定が反映されます。
 
  1. 透過度 … アンカーメニューの透過度を設定します。
  2. 背景色 … アンカーメニューの背景色を設定します。
  3. 背景画像 … アンカーメニューの背景画像を設定します。
  4. イージング … アンカーメニューをクリックした時の動作を設定します。

アンカーメニュー用テキストを設定しましょう

タイトルv17などタイトル要素を持つユニットの場合

  1. タイトルv17などのタイトル要素を持つユニットを使用すると、設定したタイトル名が自動でアンカーメニュー設定欄に反映されます。
     
  2. 左側のチェックボックスをクリックすると、タイトル名がアンカーメニューに反映されます。
    詳細設定は必要に応じて設定してください。
    アンカーメニューに表示する名称を変更したい場合は、タイトル名の右側のテキストフィールドに入力します。
     
  3. 設定後、保存ボタンをクリックしてからページ編集画面に戻ると、アンカーメニューが表示されます。
     

その他のユニットの場合

  1. カスタムv17などのアンカー用のプロパティを持つユニットにアンカーメニューの情報を紐付けたい場合は、まず各ユニットの設定画面に入ります。
     
  2. アンカーメニュー用テキスト欄に任意のテキストを入力し、保存ボタンをクリックします。
     

※サンプル画像ではカスタムv17のアンカーメニュー用テキスト欄に「Concept」と入力しました。
  1. ANCHOR NAVI ボタンをクリックしアンカーメニュー設定画面に入ると、先ほど入力したアンカーメニュー用テキストが反映されます。
     
  2. 左側のチェックボックスをクリックし、任意で詳細設定を行います。
     
  3. 保存ボタンをクリックし、ページ編集画面に戻るとアンカーメニューに追加されたのが確認できます。
     

アンカーメニューユニットを使用する

アンカーメニューユニットは、ページ内の見出しをまとめるときなどに便利なユニットです。
縦型と横型の2種類のデザインがあります。
 
  1. ユニットモードのページ編集用ツールバーにあるプルダウンをクリックし、機能ユニットを選択します。
     
  2. アンカーメニュー(縦)、もしくはアンカーメニュー(横)をドラッグアンドドロップで配置し、ユニット編集画面を開きます。
     
  1. アンカーメニューに表示したいタイトルにチェックを入れると、右のテキストボックスにタイトルが反映されます。任意のタイトルに変更したい場合は、このテキストボックス内のタイトルを修正します。
     
  2. スマホでもアンカーメニューを表示させたい場合、編集画面右上のスマートフォン設定のタブから同様に設定し保存します。
     
  1. アンカメニューユニットが配置できました。
    アンカーメニューのリンク色は、テンプレートで設定した色が反映されます。
     

※タイトル要素がないユニットにアンカーを付けたい場合には、本マニュアルの「アンカーメニュー用テキストを設定しましょう」を参考に設定してください。
※このマニュアルでは、アンカーメニュー(縦)を使って説明しました。​

ページトップ