メニューバー機能とは

任意のメニュー項目を管理画面から簡単に設定することができる機能です。

PC版では、テンプレート選択画面でicon_menuのマークが付いた対応テンプレートを選択するか、独自タグを挿入することで利用できます。

スマートフォン版では、全てのデザインに対応しています。

menu1

設定方法

PC版では、対応テンプレートを適用するか、独自タグ(後述)をテンプレートの任意の位置に挿入してください。

ブログ設定PCまたはスマートフォン「メニューバー」タブからメニューへの追加・編集・削除ができます。(PC版とスマートフォン版は、別々に項目を設定する必要があります。)

「新しいメニュー項目を作る」をクリックすると、以下のウィンドウが表示されます。

rabel

メニューのタイプを以下から選択することができます。

  • URLを指定…入力したURLへのリンクが表示されます。
  • トップページ…ブログのトップページへのリンクが表示されます。
  • カテゴリ…ブログ内のカテゴリを選択すると、そのカテゴリの投稿一覧(カテゴリアーカイブ)へのリンクが表示されます。
  • 外部連携…外部サービス連携設定から連携が設定されている各種アカウントへのリンクが表示されます。

それぞれの項目は設定後に並べ替え・編集・削除が行えます。

menu3

独自タグを使ってメニューを表示させる(PC版のみ)

メニューバー非対応テンプレートでこの機能をお使いになりたい場合は、テンプレートに独自タグ<$MenuList$>を挿入してください。

独自タグを記述した箇所に以下のようなHTMLが出力されます。
※表示の整形にはCSSを記述する必要がありますのでご注意ください。CSSのカスタマイズはブログ設定「デザイン・ブログパーツ」のPCカスタマイズから行えます。

出力されるHTML(例)

<div class="ldb_menu">
  <ul class="ldb_menu-list">
    <li class="ldb_menu-item-index ldb_menu-item-current"><a href="#">トップ</a></li>
    <li class="ldb_menu-item-category-xxxxxxxx"><a href="#">カテゴリ</a></li>
    <li class="ldb_menu-item-url"><a href="#" target="_blank">URL</a></li>
  </ul>
</div>

こちらのヘルプも参考にしてください。