*The Pink*確認用

テンプレート確認用のブログです

【カスタマイズ】上に戻るボタン&スマホ用下部固定メニュー

Customize

上に戻るボタン&スマホ用下部固定メニュー

PCでは上に戻るボタンを下部に固定、スマホではメニューを下部に固定するための設定です。 下部メニューはカテゴリボタンを押すと開閉するようになっています。

以下の記事の設定も同時にお願いします

thepink.hatenablog.com

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>

書き換え場所

  1. ご自身のブログURLにご自身のブログのアドレスを入れます。
  2. カテゴリ名 1〜5にご自身のブログのカテゴリ名を入れます。
  3. 日本語表記の場合は/archive/category/カテゴリ名を消して、各カテゴリページのアドレスを直接入れてください。

【カスタマイズ】上部固定メニューを追加する

Customize

PCで見たときに上部固定メニューを表示する

このテーマで反映するために必要なこと

  1. デザイン > タイトル下 に以下のhtmlを追加
  2. 必要な箇所をご自身のブログに合わせて書き換え

以上です。

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>

書き換え部分

  1. ご自身のブログURLにブログのアドレスを入れてください。
  2. カテゴリ名1からカテゴリ名5にはご自身でつけたカテゴリの名前を入れてください。
  3. 日本語の場合は/archive/category/カテゴリ名を丸々消して、カテゴリーのページのurlを入れてください。

以下の記事も同時に設定をお願いします

thepink.hatenablog.com