【カスタマイズ】上に戻るボタン&スマホ用下部固定メニュー
上に戻るボタン&スマホ用下部固定メニュー
PCでは上に戻るボタンを下部に固定、スマホではメニューを下部に固定するための設定です。 下部メニューはカテゴリボタンを押すと開閉するようになっています。
以下の記事の設定も同時にお願いします
html
デザイン設定のフッタへ入れてください。
<!--上に戻るボタン--> <div id="pagetop"><a href="#content-inner"></a></div> <!--スマホ用下部固定メニュー--> <div class="bottom_menu"> <ul> <li><a href="ご自身のブログのURL">Home</a></li> <li> <label for="label1">Category</label> <input type="checkbox" id="label1" class="check_open" /> <ul class="bottom_open"> <!--開閉メニューの中身--> <li><a href="/archive/category/カテゴリ名1">カテゴリ名1</a></li> <li><a href="/archive/category/カテゴリ名2">カテゴリ名2</a></li> <li><a href="/archive/category/カテゴリ名3">カテゴリ名3</a></li> <li><a href="/archive/category/カテゴリ名4">カテゴリ名4</a></li> <li><a href="/archive/category/カテゴリ名5">カテゴリ名5</a></li> </ul> </li> <li><a href="#content-inner">PageTop</a></li> </ul> </div>
書き換え場所
ご自身のブログURL
にご自身のブログのアドレスを入れます。カテゴリ名
1〜5
にご自身のブログのカテゴリ名を入れます。- 日本語表記の場合は
/archive/category/カテゴリ名
を消して、各カテゴリページのアドレスを直接入れてください。
【カスタマイズ】上部固定メニューを追加する
PCで見たときに上部固定メニューを表示する
このテーマで反映するために必要なこと
- デザイン > タイトル下 に以下のhtmlを追加
- 必要な箇所をご自身のブログに合わせて書き換え
以上です。
html
<!--上部固定メニュータイトル下へ--> <div class="sticky"> <ul class="menu"> <li><a href="ご自身のブログURL"><i class="blogicon-home"></i>HOME</a></li> <li><a href="#">MENU<i class="blogicon-chevron-down"></i></a> <ul> <li><a href="/archive/category/カテゴリ名1">カテゴリ名1</a></li> <li><a href="/archive/category/カテゴリ名2">カテゴリ名2</a></li> <li><a href="/archive/category/カテゴリ名3">カテゴリ名3</a></li> <li><a href="/archive/category/カテゴリ名4">カテゴリ名4</a></li> <li><a href="/archive/category/カテゴリ名5">カテゴリ名5</a></li> </ul> </li> <li><a href="/about">ABOUT</a></li> </ul> </div>
書き換え部分
ご自身のブログURL
にブログのアドレスを入れてください。カテゴリ名1
からカテゴリ名5
にはご自身でつけたカテゴリの名前を入れてください。- 日本語の場合は
/archive/category/カテゴリ名
を丸々消して、カテゴリーのページのurlを入れてください。