メニューバーを既存のデザインに追加

メニューバーに未対応のデザインや、オリジナルのデザインにメニューバーを設置するには、独自タグと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が付加されます。

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;
}