FC2ブログのヘッダー下にドロップダウンメニューを設置。文章にかぶらない工夫も

FC2ブログヘッダー下に設置したグローバルメニューについて

こんにちは。Mです。

今回は、FC2ブログのヘッダー下に表示する「グローバルメニュー」について書いていきます。

昨年の大晦日。FC2ブログ「ゆうらり Happy Smile」をレスポンシブ対応のテンプレートに全面リニューアルしました。その際にいろいろと細かいカスタマイズを行ないましたが、一番やりたかったのがヘッダー下にメニューを表示させることでした。

なぜ今までやらなかったのか？理由はいろいろありますが、PCとスマホで異なったテンプレートだったことや、ヘッダー部分に配置した画像が場所を取りすぎてしまい、メニューが見づらいというのが主な原因です。

カスタマイズするにあたっては、ネットでさまざまな設置例を調べました。色んなブログで使いやすいメニューや簡単に実装できるメニューが紹介されていますが、ボクがこうしたい！と定めたのは以下の通り。

①レスポンシブ対応
②スマホ表示の場合でもハンバーガーメニューを使わない
③メニューの親カテゴリをクリックすると子カテゴリが展開されるドロップダウンメニュー
④ドロップダウンされた場合、メニューが下の文章に被らないようにしたい