メニューバーに未対応のデザインや、オリジナルのデザインにメニューバーを設置するには、独自タグと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">X</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]
X(旧Twitter).ldb_menu-item-twitter
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;
}