Bloggerで使える固定トグルメニューを制作


 Bloggerテンプレート「Vaster2」で利用できる固定トグルメニューを作りました。ドロップダウン機能つき。CSSとHTMLコードを公開しているので、コピペでカスタマイズできます。

トグルメニューはスマホユーザーに親切


 いまやスマホでネットサーフィンが日常となった現代では、「いかにスマホユーザーに親切なサイト作りをするか?」が集客力につながってきます。

 トグルメニューはコンパクトな見た目でありつつも、重要なリンク先を詰め込めるので、スマホ画面での利便性を向上させることができます。

 今回ご紹介するのは、Yukihy Lifeにて公開されているトグルメニューをBlogger向けにカスタマイズしたもの。お馴染み、日本人向けテンプレート「Vaster2」でも利用可能です。

 改変点は以下の通り。


・画面上に固定されるように設定
・メニューを2列表示
・PCだと完全非表示になるように設定
・ドロップダウン要素を排除
・レスポンシブ要素をVaster2基準に変更
・その他、Bloggerでは表示が崩れてしまう部分を修正


ソースコードと導入手引き



/*******トグルメニュ*********/
@media screen and (min-width:767px){/*PC時に非表示する要素*/
#menu{
    display: none;
}}
@media screen and (max-width:768px){/*スマホ時に表示する要素*/
#menu{
    background: #333333;/*背景色*/
    margin: 10px auto;
}
#container{
    margin-top: 40px;
}
#menu-inner{
    background: #333333;/*背景色*/
    position: fixed;
    top: 0;
    margin: 10px 10px -20px 10px auto;
    z-index: 2;
    width: 100%;
    height: auto;
    opacity: 0.8;
    margin-left:0px;
}
#btn-content{text-align: right;}/*ボタン位置*/
#menu-btn{
    display: inline-block;
    padding: 8px 15px;
    margin: 5px;
    cursor: pointer;
    background: #333333;/*ボタン背景色*/
    color: #fff;/*ボタン文字色*/
    font-size: 70%;
}
#menu-content{
    display: none;
    padding-left: 0;
    margin: 0;
    width: 100%;
    list-style-type: none;
}
#menu-content > li{
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
    float: left;
    width: 50%;
    height: 40px;/*ボタンの大きさ*/
}
#menu-content > li > a{
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
    line-height: 40px;/*ボタンの大きさ*/
    background: #333333;/*背景色*/
    color: #fff;/*文字色*/
    font-size: 90%;
    padding: 0;
    text-decoration: none;
    z-index: 2;
    border: 1px solid #ffffff;
}}

 CSSはテンプレートに組み込むか、<style type="text/css"></style>で囲んでHTML/JavaScriptガジェットでheaderに挿入してください。


<div style="clear:both"></div>
<div id="menu">
<div id="menu-inner">
    <div id="btn-content">
        <span id="menu-btn"><i class="fa fa-align-justify" aria-hidden="true"></i>MENU</span>
    </div>
    <ul id="menu-content">
      <li><a href="">ホーム</a></li>
      <li><a href="">サイトマップ</a></li>
      <li><a href="">このサイトについて</a></li>
      <li><a href="">お問い合わせ</a></li>
    </ul>
</div>
</div>
<div style="clear:both"></div>

<script>
$(function(){
    var menuBtn = $("#menu-btn"),
        menuContent = $("#menu-content");
    menuBtn.click(function(){
        menuContent.slideToggle();
    });
    $(window).resize(function(){
        var win = $(window).width(),
            p = 768;/*スマホ時に表示する要素*/
        if(win > p){
            menuContent.show();
        }else{
            menuContent.hide();
        }
    });
});
</script>

 上記コードを、HTML/JavaScriptガジェットでheaderに挿入してください。

 ボタンの数は多くても6~8つくらいにしておきましょう。

トグルメニューを使いこなすためにカスタマイズ


 以上で完成なのですが、このままでは機能面に欠けているのでカスタマイズを推奨します。

 トグルメニューはスマホユーザーに向けて設置するもの。どうせならスマホで便利な機能をつけまくりたいものです。

「トップページに戻るボタン」はスクロールしづらいスマホ画面では重宝しますし、ページ内リンクはスマホでは気づかないコンテンツに目を向けさせることができます。このふたつが是非入れておきましょう。

「ページトップに戻るボタン」を配置




 トグルメニューは画面上を占拠するわりには、活用領域が少なくてもったいないですよね。とりあえずMENUの横に、「ページトップに戻るボタン」を置いておきましょう。

 ボタンを押した後にページを動かしてる感じが欲しい場合は、上記のリンク先が参考になります。

    <div id="btn-content">
        <span id="menu-btn"><i class="fa fa-align-justify" aria-hidden="true"></i>MENU</span>

 さきほど紹介したHTMLに、上記のタグがあります。btn-contentの真下に「ページトップに戻るボタン」のタグを挿入しましょう。

ページ内リンクを充実させる


 スマホ画面ではサイドバーや関連記事などに意識が向かないので、トグルメニューにページ内リンクを置いておきましょう。 

「HTMLの編集」から好きなガジェットに飛び、見出しタグにid属性を追加。そのid名をリンク先に設定するだけでページ内リンクの完成です。関連記事やシェアボタンも同様の手順で飛ばせるようにできます。

やっぱりドロップダウン機能も欲しい時のCSS



/*2階層目*/
#menu-content > li > ul.second-content{
    visibility: hidden;
    position: absolute;
    top: 0;
    margin: 0;
    padding-left: 0;
    list-style-type: none;
    z-index: -1;
}
#menu-content > li:hover > ul.second-content{
    visibility: visible;
    top: 40px;
    z-index: 1;
    transition: all .3s;
}
#menu-content > li > ul.second-content > li{
    text-align: center;
    margin-top : -1px;
    padding : 0;
    border: 1px solid #353535;
    width: 200px;
    height: 40px;
}
#menu-content > li > ul.second-content > li > a{
    display: block;
    line-height: 40px;
    background: #fff;/*階層メニューの背景色*/
    color: #333333;/*階層メニューの文字色*/
    font-size: 70%;
    text-decoration: none;
}
#menu-content > li > ul.second-content > li > a:hover{
    background: #fff;/*階層メニューをクリックした時の背景色*/
    color: #333333;/*階層メニューをクリックした時の文字色*/
}

 上記のコードを、最初に紹介したCSSにくっつけます。最後にある}}の間に入る形にしましょう。


超簡単!スマホサイトでもタッチでhoverが効くようにする方法 | 渡邉 充敏 - Watanabe Mitsutoshi

 そのままでは動かないので、上記リンク先のコードを設置してください。


        <li>
            <a>記事を探す<i class="fa fa-angle-double-down" aria-hidden="true"></i></a>
            <ul class="second-content">
                <li><a href="#">検索する</a></li>
                <li><a href="#">人気記事</a></li>
                <li><a href="#">関連記事</a></li>
            </ul>
        </li>

 階層メニューのHML表記は、上のようになっています。普通のメニュー項目と並べて置いておきましょう。

参考サイト


CSSで組んだドロップダウンメニューとトグルメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】 - Yukihy Life

 冒頭でも書きましたが、この記事で紹介しているトグルメニューは、Yukihy Life管理人・ゆきひー様の制作物をカスタマイズしたものです。リンク先では、この記事以上に丁寧な解説をされているので、困ったことがありましたら一読をオススメします。

 リンク先のメニューは高機能でいて、PC時にはグローバルメニューになるという優れもの。そのほうが管理が楽になるのですが、はてなブログ向けに作られたものなので、Bloggerで使う場合には記述を修正する必要があります。

 トグルメニューだけに表示したいリンクもあるだろうと思って、あえて分けてみました。お好みで選択してください。


この記事を書いた人

運営者:クロスグリ


 小説家志望の元ライター。
 プロの小説家になるべく、日々勉強しながらサイト運営しています。
 作品の下読み依頼や、個別相談(創作カウンセリング)等も受け付けています。
 気になったらTwitterフォローお願い致します。

このサイトについて 欲しいものリスト


スポンサーリンク

Bloggerテンプレート「Vaster2」で利用できる固定トグルメニューを作りました。ドロップダウン機能つき。CSSとHTMLコードを公開しているので、コピペでカスタマイズできます。

コメントを投稿

[disqus]

Author Name

{picture#https://4.bp.blogspot.com/-1zLucze5Byg/WA1R7mlH4hI/AAAAAAAAAYU/2gibmrPA7AITohNOUcfZi0ZYmNEt9UM1gCPcBGAYYCw/s320/S_4860987874792.jpg} YOUR_PROFILE_DESCRIPTION {twitter#https://twitter.com/crosgre}

連絡フォーム

名前

メール *

メッセージ *

© 2016 Project "Crosgre" Self employed. Powered by Blogger.