公開日：5/28/2020
    シェア：

    BloggerのオリジナルテーマにCSS＆メニューボタンを追加

    　
    Bloggerのオリジナルテーマも外枠ができてきましたが、ここでスマートフォン用のメニューボタンを設置しておきます。

    PCでみるとサイドバーにカテゴリーの一覧が表示されて、メニュー代わりになっていますが、スマートフォンで開くと、記事一覧の下に表示されるため、操作性があまりよくありません。

    そこで、画面左上にメニューボタンを設置して、タップをするとカテゴリ一覧が展開する仕掛けを入れていきます。

    HTMLだけで展開するリストを設置

    展開するメニューはJavaScriptを使って設置する方法が一般的で、スタイルシートにも専用のテーマがありますが、テスト時にうまく作動しなかったので、HTMLだけで再現できるリストを設置します。

    さっそくコードを確認しておきましょう。
    【コード14】
    <!--スマホ用メニュー-->
    <div>
    <b:section id='label0'>
    <b:widget id='Label0' type='Label' class="sp"> 
    <b:includable id='main'>
    <ul class="sp">
    <!--メニューボタン表示(展開される項目)-->
    <li class="sp"><a class="btn-floating pulse orange"><i class="material-icons">menu</i></a>　
    <ul class="sp">
    <!--ホームボタン-->
    <li class="sp"><a expr:href='data:blog.homepageUrl'>ホーム</a></li>					
    <!--カテゴリー一覧-->
    <b:loop values='data:labels' var='label'>
    <li class="sp"><a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a></li>
    </b:loop>
    </ul>
    </li>	
    </ul>
    </b:includable>
    </b:widget>
    </b:section> 
    </div>
    リストの中にリストをいれて、マウスがその上を通過したときに展開をするという仕組みを作っています。コードの設置場所は、
    <body>
    <!--記事全体のレイアウト枠-->
    <div id="main" class="container">
    の下です。

    独自のスタイルシートをコードに入れる
    今回のコードの中に「class=sp」が出てきます。
    これまでclassはスタイルシートに合わせて指定してきましたが、自分で決めたスタイルも使いたい場合があります。

    Bloggerで独自のスタイルシートを使いたい場合は<<b:skin>~</b:skin>の間に<![CDATA[　~　]]>を設置してあげます。その中に、通常のスタイルシート文を入れていきます。では、コードを確認しておきましょう。
    【コード15】
    <b:skin>
    <![CDATA[
    .sp ul{
    width:100%;
    max-wodth: 300px;
    height: 1ren;
    margin: 0px;
    padding: 0px; 
    background-color: #fffff;
    }
    .sp li{
    list-style:none;
    height:2rem;
    padding: 0px;
    background-color: #ffffff;
    position: relative;
    }
    .sp li li{
    height: 0px;
    padding: 0px;
    background-color: #ffffff;
    overflow: hidden;
    z-index: 10;
    transition: 1s;
    }
    .sp li ul{
    height: 0px;
    padding: 0px;
    background-color: #ffffff;
    overflow: visible;
    }
    .sp li:hover > ul > li {
    list-style:none;
    height: 2rem;
    background-color: #ffffff;
    overflow: visible;
    }
    .sp a{
    color:#000000;
    }
    ]]>
    </b:skin>
    今回の展開するリストボックスに必要なスタイルです。コードを入れ終えたら、保存をしてから、「ブログを開く」で動作を確認してみましょう。


    テキストの大きさなどは、追加したスタイルで変更することができます。実際のスマホで開いて確認するのもおすすめです。

    スマートフォンのみ表示できるようにする
    メニューが設置できたら、スマートフォンのみ表示されるようにします。先程作ったスタイルシートの最後に次のコードを追加します。


    追加するコードは次の7行です。

    【コード16】
    .pcview{
    			
    }
    .spview{
    display: none;
    }
    @media screen and (max-width:800px){
        .pcview{
    display: none;
    }
    .spview{
    display: block;
    }

    @media screen andの部分が見慣れないかもしれませんが、閲覧している端末の画面幅で処理を変えるとき使うコードです。

    まず、なんでもないときには
    .spview{
    display: none;
    }
    で、「spview」に属しているものは非表示状態にしておきます。

    横幅は800px以下の環境で開いたときに、@media screen and~の処理がされて、classで「pcvuew」が指定されている場合は表示しない。classで「spview」の指定がある場合には表示するのように分けています、

    スタイルシートへの追加が終わったら、今回作ったメニューにも仕掛けを設置します。
    <!--スマホ用メニュー-->
    <div>
    <b:section id='label0'>
    の箇所を下のコードに書き換えます。
    【コード17】
    <!--スマホ用メニュー-->
    <div class="spview">
    <b:section id='label0'>
    書き換えたら、プレビューを見てみましょう。


    設置したメニューボタンが消えました。続いて、プレビュー画面したにある「スマートフォン」ボタンをクリックしてみましょう。


    メニューボタンが表示されました、

    これでスマートフォン用のメニューボタン設置は完了です！