【カスタマイズ】上部＆下部固定メニューをつける

PCやiPad横画面では上部固定メニュー、スマートフォンでは下部固定メニューを表示させるための設定方法です。

デザインは特に設定する必要ありませんので、タグを所定の場所にコピー＆ペーストするだけで使用することができます。

メニューの文字・リンクは適宜変更してください。

固定グローバルメニューについて

MaruPOPには標準で固定メニューに対応しています。
デザインCSSをいじる必要はありません。
これから紹介するhtmlタグをデザイン設定から入れるだけで反映されます。

必要なければ入れなくてもOKです。
お好きにお使いください。

上部固定グローバルメニュー

以下タグ（#や文字は適宜入れ直してください）

入力箇所

デザイン>カスタマイズ>ヘッダ>タイトル下

<ul class="menu">
<!-- 普通のメニュー-->
    <li class="menu__single">
        <a href="#" class="init-bottom">HOME</a>
    </li>
<!-- 普通のメニューここまで-->
<!-- アコーディオンメニュー1 -->
    <li class="menu__single">
        <a href="#" class="init-bottom">ABOUT</a>
        <ul class="menu__second-level">
            <li><a href="#">私について</a></li>
            <li><a href="#">ブログについて</a></li>
            <li><a href="#">テンプレートについて</a></li>
        </ul>
    </li>
<!-- アコーディオンメニュー2 -->
    <li class="menu__single">
        <a href="#" class="init-bottom">カテゴリ</a>
        <ul class="menu__second-level">
            <li><a href="#">サンプル</a></li>
            <li><a href="#">カスタマイズ</a></li>
            <li><a href="#">その他</a></li>
        </ul>
    </li>
<!-- アコーディオンメニュー3 -->
    <li class="menu__single">
        <a href="#" class="init-bottom">更新履歴</a>
        <ul class="menu__second-level">
            <li><a href="#">カスタマイズ状況</a></li>
            <li><a href="#">バグ修正</a></li>
            <li><a href="#">その他</a></li>
        </ul>
    </li>
<!-- アコーディオンメニューここまで -->
<!-- 普通のメニュー-->
    <li class="menu__single">
        <a href="#" class="init-bottom">お問合せ</a>
    </li>
<!-- 普通のメニューここまで-->
</ul>

アコーディオンメニュー（押したら下に出てくるメニュー）が必要なければ、アコーディオンメニュー〜〜ここからここまでと書いてる所のコードを消して、普通のメニューここから〜〜ここまでと書いてる所のタグをコピー＆ペーストで増やしてください。

参考
UNORTHODOX WORKBOOK

下部固定メニュー

以下タグ（#や文字は適宜入れ直してください）

<i class="●">

の●部分を変えることで好きなiconに変更できます。

参考
しろかい！

入力箇所

デザイン>カスタマイズ>フッタ

<!--PC用トップへ戻るボタン-->
<a href="#container" id="page-top">
<i class="blogicon-chevron-up"></i>
</a>
<!-- スマホ下固定メニュー用 -->
<ul class="bottom_menu">
        <li>
            <a href="#"><i class="blogicon-home"></i><br>
            <span class="iconname">ホーム</span></a>
        </li>        
    	<!-- ▼タップで出てくる -->
        <li class="menu-width-max">
        <input id="check01" class="check_input" type="checkbox" />
        <label class="check_label" for="check01">
　　<i class="blogicon-folder"></i><br>
        <span class="iconname">カテゴリ</span></label>
    	　<ul class="bottom_menu-second-level">
                <li><a href="#">カテゴリ１</a></li>
               	<li><a href="#">カテゴリ２</a></li>
               	<li><a href="#">カテゴリ３</a></li>
                <li><a href="#">カテゴリ４</a></li>
                <li><a href="#">カテゴリ５</a></li>
            </ul>
        </li>
        <!-- ここまで -->
        <li>
            <a href="#"><i class="blogicon-twitter"></i><br>
            <span class="iconname">Twitter</span></a>
        </li>
        <li>
            <a href="#container"><i class="blogicon-chevron-up"></i><br>
            <span class="iconname">上へ戻る</span></a>
        </li>
    </ul>

タップで出てくるメニューが必要なければまるっと消して、

<li>
<a href="#"><i class="好きなicon"></i><br>
<span class="iconname">好きな文字</span></a>
</li>  

に変えてください。

PCやiPadの横画面では上部固定メニューとトップへ戻るボタンだけが表示され、スマホでは下部固定メニューのみが表示されます。
アイコンは全てはてなブログで使えるblogiconを使用しています。

参考
Bambi's BLOG

kasumiblog

サルワカ