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

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

bingo!CMSは2通りの方法でアンカーメニューを設置できます。

アンカーメニュー設定画面で設定する

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

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

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

その他のユニットの場合

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

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

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

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

※このマニュアルでは、アンカーメニュー（縦）を使用しました。​

ページトップ