メニューバーに未対応のデザインや、オリジナルのデザインにメニューバーを設置するには、独自タグとCSSの記述が必要になります。

独自タグを追加する

ブログ設定＞PC＞カスタマイズから、4つのHTMLテンプレートに独自タグ<$MenuList$>を挿入します。

例：デフォルト2019にメニューバーを追加する場合

ブログタイトルとコンテンツの間などに追加します（任意の場所で構いません）。

  • </header>
  • <!-- /ブログタイトル、説明 -->
  •  
  • <$MenuList$>
  •   
  • <div id="content">
  •  
  • <div id="main">

ブログ設定＞PC＞メニューバーから、メニュー項目を設定します。例として、以下の様なHTMLが出力されます。

  • <div class="ldb_menu">
  •   <ul class="ldb_menu-list">
  •     <li class="ldb_menu-item-index ldb_menu-item-current"><a href="http://example.com/">トップ</a></li>
  •     <li class="ldb_menu-item-url"><a href="http://example.com/profile.html">プロフィール</a></li>
  •     <li class="ldb_menu-item-category-1156915"><a href="http://example.com/archives/cat_1156915.html">日記</a></li>
  •     <li class="ldb_menu-item-category-1165333"><a href="http://example.com/archives/cat_1165333.html">お知らせ</a></li>
  •     <li class="ldb_menu-item-twitter"><a href="https://twitter.com/yozik" target="_blank">Twitter</a></li>
  •   </ul>
  • </div>

全体を囲うdivには.ldb_menu、ulタグには.ldb_menu-listが付加されます。また、liタグには以下のようなclassが付加されます。

URLを指定.ldb_menu-item-url
トップページ.ldb_menu-item-index
カテゴリページ.ldb_menu-item-category-[カテゴリID]
Twitter.ldb_menu-item-twitter
Facebook.ldb_menu-item-facebook
Flickr.ldb_menu-item-flickr
Instagram.ldb_menu-item-instagram
現在のページ
（トップページ、カテゴリページ、カテゴリ配下の個別ページの場合）		.ldb_menu-item-current

CSSを追加する

このままではただのリスト形式のテキストですので、CSSでデザインを調整します。以下にサンプルを示しますが、デザインについてはご自由に設定してください。

サンプルCSS

  • .ldb_menu-list {
  •   background-color: #bfbfbf;
  •   overflow: hidden;
  • }
  • .ldb_menu-list li {
  •   float: left;
  •   list-style: none;
  • }
  • .ldb_menu-list li a{
  •   color: #fff;
  •   display: block;
  •   font-size: 18px;
  •   line-height: 1;
  •   padding: 18px;
  •   text-decoration: none;
  •   text-shadow: 0 -1px -3px rgba(0,0,0,0.2);
  • }
  • .ldb_menu-list .ldb_menu-item-current,
  • .ldb_menu-list li a:hover {
  •   background-color: #999;
  • }