こんにちは。少し前からちょこちょこ弄りつつ、ようやくひと通り完成したのでひとまず公開させていただきます。今回カスタマイズしたポイントをいくつかご紹介したいと思います。

ドロワーメニューを導入

これまではグローバルナビを画面上部に固定して、スクロールによって消えたり出現したりていうのをjQueryで実装していました。しかし、今回のプチリニューアルに伴い、トップ画面から余計な装飾は極力省きたいという考えからこれを廃止することとしました。その代わりにシンプルに三本線のメニューアイコン（いわゆるハンバーガーメニュー）を固定配置することにしました。問題はグローバルメニューをどのように表示させるかという点でしたが、色々と試してみた結果、今回のようなドロワーメニューに落ち着きました。

理想のドロワーメニュー

私がドロワーメニューを実装する際に重視したポイントは以下の通りです。

• （できれば）CSSだけで動くもの
• ハンバーガーアイコンを細かく制御したい
• ドロワー画面が出現した時の挙動

大まかに言うとこんなところでしょうか。詳しく解説していきます。

CSSだけで動くもの

理由は簡単で、Javascriptが苦手（よく理解していない）だから。CSSだけでもまだまだ理解できていないものがたくさんある中、jQueryなどのJavascriptに手を出すのは自分の中で若干の葛藤があります。特にjQueryは軽量で文法も簡単に見えるし、ネットを検索すれば有志の方々のありがたい記事がたくさん出てきてコピペだけである程度実装できますので利用しない手はないとは思うんですが、性格上、自分がこだわっている部分は自分で何とかしたいと思っているのでそういう意味で葛藤があるんですね（我ながら面倒臭い）

ということでCSSだけで実装できるドロワーメニューを試してみましたが、結論から言うと諦めました。やっぱりjQueryを利用する方が直感的に分かりやすいし、シンプルなHTMLとCSSになるので弄りやすいんですよね。この辺がjQueryを併用する大きなメリットなのではないかと考えます。

ハンバーガーアイコンを細かく制御したい

これも自分のこだわりの一つで、CSSで作るハンバーガーアイコン（これは正式名称なんでしょうか）を自分好みに細かくカスタマイズしたいので、ソースコードが分かりやすくて弄りやすいものにしたかったんです。これに関してもいろいろなやり方がありましたが、input要素のチェックボックスを使う方法よりも空タグにはなりますがspanを3つ並べる方法を採用しました。これなら1本1本の挙動を細かく制御できるので拡張性があるのかなと考えました。

<div class="toggle">
    <span></span>
    <span></span>
    <span></span>
</div>

こんな感じのHTMLです。コードの見た目も三本線ぽくて視覚的にも見やすいですよね。

ドロワー画面が出現した時の挙動

これも個人的な好みの問題ですけど、画面右上に配置したハンバーガーアイコンをクリックすると右側からスルッとメニュー画面が出現して、その際にメインコンテンツの方もドロワーの動きに併せて画面外の方向へやや暗転しながら移動する、この挙動が理想でした。つまり今実装している動きですね。しかもドロワーを閉じる際にはドロワー画面以外のどこをクリックしても閉じる動きにしたかったんです。

参考にしたもの

最終的に実装したのは以下のコードを参考にしました。

まさに私の理想とした挙動を実現するドロワーメニューでした。解説記事は以下です。

基本的には上のサイトのソースコード通りに実装しましたが、一部クラス名を変えたところがあります。

HTML

全部は掲載しませんが、ハンバーガーメニューとその中身に関する記述部分です。

<div class="container">
    <div class="toggle">
        <span></span>
        <span></span>
        <span></span>
    </div>
    <nav class="global_navi">
    <h3 class="navi_title">menu</h3>
    <?php wp_nav_menu(array(
        'theme_location'=>'mainmenu',
        'container'     =>'',
        'menu_class'    =>'',
        'items_wrap'    =>'<ul>%3$s</ul>'));
    ?>
    </nav>
    <div class="overlay"></div>
    
    <main>
        ～省略～
    </main>
</div>

CSS

まずはハンバーガーアイコンに該当する箇所だけどうぞ。

.toggle {
    position: fixed;
    top: 32px;
    right: 32px;
    z-index: 100;
    display: inline-block;
    width: 32px;
    height: 28px;
    vertical-align: middle;
    cursor: pointer;
}

.toggle span {
    position: absolute;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background-color: #000;
    transition: all .5s;
}

.toggle.active span {
    background-color: #fff;
}

.toggle span:nth-of-type(1) {
    top: 0;
}

.toggle span:nth-of-type(2) {
    top: 12px;
}

.toggle span:nth-of-type(3) {
    top: 24px;
}

.toggle.active span:nth-of-type(1) {
    transform: translateY(12px) rotate(-45deg);
}

.toggle.active span:nth-of-type(2) {
    opacity: 0;
}

.toggle.active span:nth-of-type(3) {
    transform: translateY(-12px) rotate(45deg);
}

7行目でアイコンの横幅を32pxに指定しました。18行目のheightは高さなんですけどここでは線の太さと言い換えた方が分かりやすいかもしれません。つまり、横幅32pxで太さが4pxの線を3つ作成します。さらにborder-radius: 4px;で角丸にします。そして28行目～38行目でそれぞれの線の間隔を決めています。:nth-of-type(x)ではその要素の何番目という形でCSSを充てることができます。つまり、.toggle span:nth-of-type(1)は1本目（一番上）の線、以下2本目、3本目となります。線と線の間隔は8pxで統一しました。40行目以降はハンバーガーアイコンをクリックした後の挙動です。一番上の線と一番下の線をそれぞれ移動させて交差するような動きになります。また、2番目の線はopacity: 0;で透明にします。

続いてはグローバルナビ部分です。

.global_navi {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10;
    padding-top: 92px;
    width: 320px;
    height: 100%;
    background-color: rgb(0, 0, 0, .6);
    transition: all .5s;
    transform: translate(320px);
}

.global_navi.open {
    transform: translateZ(0);
}

ハンバーガーアイコンをクリックする前は画面外に待機させておき、クリックするとスルッと画面上の現れる挙動を実現しています。

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: block;
    width: 0;
    height: 0;
    background-color: rgba(0, 0, 0, .6);
    content: "";
    opacity: 0;
    transition: opacity .5s;
}

.overlay.open {
    width: 100%;
    height: 100%;
    opacity: 1;
}

続いてはオーバーレイ部分です。ドロワーパネル以外の部分をクリックしても閉じるように指定しています。透明度などの細かい数値はお好みで変更してください。

インデックスページ

これまでは横幅240pxのサムネイル画像を横一列に4枚並べていましたが、これを横幅320pxのサムネイル画像に変更しました。それに伴いフォントサイズの見直しも行いました。画像が大きくなった分、記事タイトル部分も大きく表示するように変えました。また、フッター部分はとりあえずシンプルにコピーライト表記のみにしました。ただ、プライバシーポリシーページへのリンクをどこかに貼らないといけないのでここはまだ変える必要があるかなと思ってます。

最後に

スマートフォン版などまだまだ整理する箇所があるとは思いますが、とりあえず公開しました。その他に実装したいのがパンくずリストと検索フォームですね。どちらもやり方は分かっているのであとはデザインをどうするか考えたいと思います。変えたそばから他にも変えたい箇所がどんどん出てきます。終わりがない（笑）でもそこがWordPressの楽しいところでもあります。

他にも参考にしたサイトが以下です。