【コピペでOK】AffingerレスポンシブのハンバーガーメニューをCSSで簡単調整

当サイトでも利用させていただいているWordpressテーマ「Affinger」ですが、レスポンシブ時のハンバーガーメニューがずっと気になっていたのですが、CSSで簡単に調整できましたので今回はその方法をご紹介いたします。

なお、いざというときのためにテーマ(テンプレートファイル)やCSSファイルを触る際は、バックアップを取ってから作業してくださいね。

レスポンシブ時のハンバーガーメニューの気になるところ

ハンバーガーメニューとロゴの間に隙間がある

Affingerをとくになにもいじらないまま使っているとき、レスポンシブ時ではこのような状態になります。

画像のように上部に隙間ができてしまうので、その分ロゴ位置も下がってしまいヘッダーエリアが多く取られてしまいます。

ディスプレイが小さいスマホではだいぶファーストビューにヘッダー要素が入ってしまいますね。

アコーディオンを開くとロゴの上部で開いてしまう

アコーディオンの開閉がロゴの上部にできてしまうので、これも直したいと思います。ロゴ位置を固定して、アコーディオンの開閉はロゴの上をオーバーレイ(覆う)ように表示順序を変更したいです。

 

【コピペOK】CSSファイルにて簡単調整

こういった不具合を調整する場合、どのCSSファイルのどのスタイルを直せば良いかを一発で調べる方法があります。以前もご紹介しましたが、ブラウザの機能で標準搭載されているWEBデベロッパーツールを使うととても簡単です。

私がおすすめするのはFirefoxのアドオン「Firebug」です。

CSSの知識を飛躍的に向上させる! Firebugを使うべき大きな2つの理由

主にCSS初心者・初級者の方に向けた内容になりますが、CSSのスタイリング作業が苦手な方に是非参考にしていただければと思います。私もこれでCSSを克服することができ、今では切っても切り離せれない相棒ツ ...

こういったデベロッパーツールを使えば、早ければ1〜2分で解決しますし、よっぽど雁字搦めのCSSでも10分くらいで解決できてしまいます。

CSSの修正はstyle.cssに記述する

テーマのCSSはすべてstyle.cssにてコントロールされています。

ですがこういった個別の修正をしたい場合、テーマファイルのstyle.cssを直接触るのは大変危険なので、子テーマを作りその中にstyle.cssを作って作業するようにしましょう。

AFFINGERカスタマイズの基本、子テーマを使おう

スタイルを修正する

#headbox {
    position: relative;
}	

#s-navi {
    margin: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 9999;
}

#s-navi dd.acordion_tree {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

#s-navi dd.acordion_tree ul.menu li a,
#s-navi dd.acordion_tree ul.menu li {
    color: #d3d3d3 !important;
}

#s-navi dd.acordion_tree ul.menu li a:hover {
    color: #ffffff !important;
}

#header-l {
    padding-top: 10px;
}

#header-l img {
    width: 500px;
}

@media print, screen and (max-width: 650px) {
    #header-l img {
        max-width: 500px;
        width: 70%;
    }
}

 

【解説】

#s-naviはハンバーガーアイコンおよびアコーディオンメニューのブロック全てを包括している要素です。この要素をposition: absolute;で絶対位置を決め、z-index: 9999;を与えて表示順位を最前面にしています。さらに子要素と孫要素に対して色の指定などを行っています。

#header-lはロゴおよびサブタイトルを包括する要素です。#s-naviの要素が絶対位置かつ最前面になったため、#header-l要素が上部にくっつきました。イメージとしては#header-l要素に覆いかぶさるように#s-navi要素が重なっています。

 

CSS修正後はこうなる

ハンバーガーアイコンとロゴの位置

はい、隙間がなくなりましたね。ウィンドウサイズを小さくしてもハンバーガーメニューに当らないように、相対的にロゴが小さくなるようにしています。

アコーディオンメニューを開閉した場合


はい、こちらもロゴやコンテンツにオーバーレイして最前面になっていますね。メニューの背景を少し透過させるため、background-color: rgba(0, 0, 0, 0.8) でrgba指定しています。

 

いかがでしたでしょうか。
デフォルトのままで使うと、「ここを直したい!」「もっとこうだったらいいのに!」と思うところがありますよね。
見た目上の問題は大概CSSで何とかなる場合が多いので、少し工夫するともっとよいサイトになりますよ。

みなさんも是非参考にしてみてくださいね。

それでは。

よく読まれている人気記事

1

新居に引っ越してから我が家のインターネットはJ:COM NET(120MB)を利用しています。 以前Wi-Fi中継機を導入して快適インターネットを構築した記事を書きましたが、その後別の問題が起きてしま ...

2

新婚旅行でハワイに行ったときに買ってきたソルトスクラブとシアボディバターの紹介です。 ご自身用にもお土産用にもおすすめですので、ハワイに行かれた際にはぜひどうぞ! 見た目もかわいいソルトスクラブ「So ...

3

TOKYO MXで放送中の情報番組「5時に夢中!」の人気コーナー「中瀬親方のエンタメ番付」で紹介されたおすすめ作品を紹介します。(2018年5月31日放送分) 新潮社出版部部長の中瀬ゆかりさんが感銘を ...

Copyright© ヤッテキュー! , 2018 All Rights Reserved.