Milky Diary

テーマ「Milky Diary」のデモサイトです♪

簡単カスタマイズ設定②(ヘッダーメニュー ※スマホ対応)

アイキャッチ画像(簡単カスタマイズ設定② (ヘッダーメニュー ※スマホ対応))

ブログテーマに含まれているヘッダーメニューを紹介します♪

スマホにも対応しています!

初心者さんもコードの貼り付けだけで立派なメニューをすぐに実装できるようにしてありますෆ(◕ㅂ◕)ෆ💓

実装後のイメージ

スマホの縦表示(480pxまで)の場合。
Menu」をタップするとメニューが開く仕組みです。

スマホで見たときのメニュー①
スマホで見たときのメニュー②

スマホの縦表示以外は、こんな感じです。メニューが1列に収まらない場合は自動で2列、3列になります。

スマホ以外で見たときのメニュー①
スマホ以外で見たときのメニュー②

メニュー実装用コード(HTML)

以下のHTMLコードを、デザイン→カスタマイズ→タイトル下に貼り付けてください。

<!-- メニューボタン -->
<label for="menu-button"><i class="blogicon-reorder"></i> Menu</label>
<input type="checkbox" id="menu-button">
    <ul id="menu-list">
        <li><a href="URL">メニューの名前①</a></li>
        <li><a href="URL">メニューの名前②</a>
            <ul>
                 <li><a href="URL">2階層目メニュー</a></li>
                 <li><a href="URL">2階層目メニュー</a></li>
            </ul>
        </li>
        <li><a href="URL">メニューの名前③</a></li>
        <li><a href="URL">メニューの名前④</a></li>
        <li><a href="URL">メニューの名前⑤</a></li>
        <li><a href="URL">メニューの名前⑥</a></li>
        <li><a href="URL">メニューの名前⑦</a></li>
    </ul>

2階層メニューにするときは、1階層目のaタグを空にした方がいいかもしれません。

/*「aタグを空にする」*/
<a>メニューの名前</a>

カスタマイズ用コード

以下のコードをデザインCSSに追加すれば、カスタマイズ可能です。

ご自由にどうぞ。

背景色の変更

任意の背景色のカラーコードを入れて、デザインCSSに貼り付けて下さい。

#menu-list, #menu-list li:hover ul  {
     background: 背景色 !important;
}
@media screen and (max-width: 480px) {
    label[for="menu-button"] {
        background: 背景色 !important;
    }
}

リンク色の変更

①メニューリンク文字色、②ホバーした時のメニューリンク文字色、③ホバーした時の背景色を選択します。

#top-editarea #menu-list a {color: ①リンク色;}
#menu-list li a:hover {text-shadow: 1px 1px 2px ①リンク色 !important;}
#top-editarea #menu-list a:hover {color: ②ホバーリンク色;}
#menu-list li,
#menu-list li a:hover,
#menu-list li:hover ul {
    border-color: ③ホバー背景色 !important;}
#menu-list li a:hover {background: ③ホバー背景色 !important;}

メニュー名の両端にある記号の色は、①リンク色を薄くした色になります。

ハート記号の削除

ハート記号を消すためには、以下のコードをそのままデザインCSSに貼り付けて下さい。

#menu-list li a:before, #menu-list li a:after {display: none;}

左側のハートだけ消したい

#menu-list li a:before {display: none;}

右側のハートだけ消したい

#menu-list li a:after {display: none;}

ハート記号の変更

ハート記号はガーリーすぎる!でも記号は使いたい!

そんな方は記号を変更してみてください!

#menu-list li a:before, #menu-list li a:after {content: '記号コード' !important;}

ハート記号を消して左側だけに記号をつける

#menu-list li a:before {content: '記号コード' !important;}
#menu-list li a:after {display:none;}

ハート記号を消して右側だけに記号をつける

#menu-list li a:after{content: '記号コード' !important;}
#menu-list li a:before {display:none;}

記号コードは「'」で囲んで使って下さい。(例:'\f02d')

記号 コード
\f02d
\f046
\f049
\f001
\f002
\f04a
\f005
\f006
\f007
\f008

不具合などがありましたら、コメントでお知らせください。