ナビゲーションメニューとサイドバーのレスポンシブ対応

レスポンシブ対応のナビゲーションメニューとサイドバーのサンプルです。

https://www.iehohs.com/ftp/sentence-sample/

このサンプルページを開いてウィンドウの幅を変えてみてください。見え方が変わります。

これは僕がはてなブログで活動していた頃に作ったブログテーマ Sentenceで採用していた仕様です。

このテーマは僕自身が「こういうデザインのテーマが良い!」と思ったものを実際につくったもので割と評判は良いみたいです。

ぶっちゃけWordPressテーマのSimplicityをだいぶ意識しましたがw

本業の方で、サイトの編集をする時にナビゲーションメニューの仕様をいじる場面があって、「あの時どうやったかな」と思ってここに書き留めておきます。

また、サイドバーの仕様についても使う場面があると思うので合わせて載せておきます。

ナビゲーションメニュー

パソコン表示でのナビゲーションメニュー
スマホ、タブレット表示でのナビゲーションメニュー
スマホ、タブレットでボタンをタップしナビゲーションメニューを展開

このテーマではスマホ仕様が主で、タブレット(768px以上)、パソコン表示(1024px以上)と3段階のデザインになっています。

スマホ、タブレットではボタンを表示させてタップでメニュー展開、PC表示ではボタンを非表示にしてメニューを横に並べる仕様にしています。

なお、ボタンはFontAwesomeを使っています。それについては後述。

HTML

<div id="nav">
    <div id="menu-inner">
        <div id="btn-content">
            <span id="menu-btn"><i class="fas fa-bars"></i></span>
        </div>
        <ul id="menu-content">
            <li><a href="index.html">MENU 1</a></li>
            <li><a href="index.html">MENU 2</a></li>
            <li><a href="index.html">MENU 3</a></li>
            <li><a href="index.html">MENU 4</a></li>
            <li><a href="index.html">MENU 5</a></li>
        </ul>
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>$(function(){
        var n=$("#menu-btn"),
            i=$("#menu-content");
        n.click (function() {
            i.slideToggle()
        })
        ,$(window).resize (function(){
            var n=$(window).width(),
                e=1023;
            n>e?i.show():i.hide()
        })
    });
    </script> 
</div>

CSS

#nav {
    padding: 0 3.125%;
    margin: 0px auto 10px auto;
}
#nav ul {
    list-style-type: none;
    padding-left: 0;
    padding-right: 0
}
#menu-content {
    display: none
}
#btn-content {
    text-align: right
}
#menu-content li {
    border-bottom: solid .5px #aaa;
    display: block;
    font-size: .85em;
    text-align: center
}
#menu-content li:first-child {
    border-top: solid .5px #aaa
}
#menu-content li a {
    display:block;
    padding:10px 0;
    text-decoration: none
}
#menu-content li a:hover {
    background: #f5f5f5
}
@media (min-width: 768px){
    #nav {
        padding: 0 1.25%;
        max-width: 800px
    }
}
@media (min-width: 1024px) {
    #nav {
        padding: 0;
        max-width: 1130px
    }
    #menu ul,#menu-content {
        display: block
    }
    #btn-content{
        display: none
    }
    #menu-content li {
        float: left;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 20%;
        margin-bottom: 15px;
        border-right: solid 1px #aaa;
        border-bottom: 0
    }
    #menu-content li:first-child {
        border-top: 0;
        border-left: solid 1px #aaa
    }
}

補足として、PC表示の#menu-content li内のwidthの値は表示させたいメニューの数に合わせて変えてやる必要があります。

サンプルではメニューは5つなので100 / 5 = 20%です。4つならば100 / 5 = 25%ってな感じです。

サイドバー

パソコン表示でのサイドバー
タブレット表示でのサイドバー(メインカラムの下に回り込み2列で表示)
スマホ表示でのサイドバー(メインカラムの下に回り込み1列で表示)

サイドバーはPC表示の時は文字通り右隣に表示します。

スマホとタブレットではメインカラムの下に回る仕様なのですが、タブレットはスマホと比べて横幅に余裕があるので2つずつウィジェットが並ぶようにしています。

HTML

<aside id="box2">
    <div id="box2-inner">    
        <div class="sidebar-module">
            <div class="sidebar-module-title">SIDEBAR 1</div>
            <div class="sidebar-module-body">サイドバー1の中身です。</div>
        </div>
        <div class="sidebar-module">
            <div class="sidebar-module-title">SIDEBAR 2</div>
            <div class="sidebar-module-body">サイドバー2の中身です。</div>
        </div>
        <div class="sidebar-module">
            <div class="sidebar-module-title">SIDEBAR 3</div>
            <div class="sidebar-module-body">サイドバー3の中身です。</div>
        </div>
        <div class="sidebar-module">
            <div class="sidebar-module-title">SIDEBAR 4</div>
            <div class="sidebar-module-body">サイドバー4の中身です。</div>
        </div>
        <div class="sidebar-module">
            <div class="sidebar-module-title">SIDEBAR 5</div>
            <div class="sidebar-module-body">サイドバーの中身です。</div>
        </div>
    </div>
</aside>

CSS

#box2 {
    float: none;
    width: 93.75%;
    padding: 0 3.125%;
    font-size: 85%;
    line-height: 1.5
}
#box2-inner {
    width: 100%;
    overflow: hidden
}
.sidebar-module {
    float: none;
    margin-bottom: 30px;
    width: 100%
}
.sidebar-module-title {
    margin-bottom: 15px;
    font-size: 130%;
    font-weight: 700;
    line-height: 2.5em
}
.sidebar-module-title a {
    color: #333;
    text-decoration: none
}
.sidebar-module-title a:hover {
    text-decoration: underline
}
@media(min-width:768px) {
    #box2 {
        width: 92.5%;
        padding: 0 0 0 7.5%
    }
    #box2-inner .sidebar-module:nth-child(2n +1) {
        clear: both
    }
    .sidebar-module {
        float: left;
        width: 40.541%;
        margin: 0 9.460% 60px 0
    }
}
@media(min-width:1024px) {
    #box2 {
        float: right;
        width: 26.549%;
        padding-left: 2.655%
    }
    #box2-inner {
        width: 100%;
        overflow: hidden
    }
    .sidebar-module {
        float: none;
        width: 100%;
        margin-right: 0
    }
}

ウィジェットが2つずつ並ぶ仕様ですが、これを3つにする場合はタブレット表示の#box2-inner .sidebar-module:nth-child(2n +1)のところで、2nを3nに変えてやればOK。

あと.sidebar-moduleのwidthの値も整えてやればいいです。marginの値をそのままなら23.873%かな。

コードの圧縮を元に戻す

少しでも読み込みを速くするために圧縮していました。圧縮にはRefresh-SFを使ってました。

https://refresh-sf.com/

今回のサンプルページ用にコードを整理しようと思ったのですが、圧縮前のデータが見つからず。かと言ってアップしているコードを圧縮前の状態に手直しするのはめんどくさい!

https://prettydiff.com/?m=beautify

探してみたら普通に元に戻るツールがありました。Pretty Diffというものです。特に問題ありません。

Font Awesomeの追加

ナビゲーションメニューのボタンや、見出しのチェックマークなどの記号はFont Awesomeというウェブフォントを使っています。

使い方は簡単。HTMLのhead内に以下のコードを挿入。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

それから以下のリンクに飛んで表示させたいアイコンをクリック。

https://fontawesome.com/icons?d=gallery

直接貼り付ける場合は表示されているHTMLタグを挿入、CSSで指定する場合は以下のようにfont-familyとUnicodeを記述します。

.sample {
    font-family:'Font Awesome 5 Free';
    content: '\f00c'
}

noindexで検索エンジンに登録されないようにする

今回作ってアップしたページはサンプルなので、検索エンジンに登録などされたくありません。

別に登録されるだけならいいのですが、他のページの評価にも影響を及ぼします。SEOは大事です。

そういうわけでnoindexにしておきます。以下のコードをhead内に埋め込めばOK。

<meta name=”robots” content=”noindex” />

子テーマ編集に応用していきます

こんな記事を書いて、子テーマを編集するとか言ってましたが全然何もできていません。

いちからデザインするのは大変なので、このSentenceのデザインを再現する子テーマを作成しようと思います。

今年中にできたらいいな〜。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です