STINGER

STINGER PLUS2のアコーディオンメニュー(ハンバーガーメニュー)を非表示にする方法

投稿日: 更新日: 2017年11月15日

どーも!これが3記事目のSTINGER PLUS2カスタマイズシリーズ!でででーさん(@d3_dayo) です!

 
前回の記事ではSTINGER PLUS2のヘッダー背景色を画面幅いっぱいに表示し、タイトルテキストを中央寄せにするカスタマイズ手順を紹介しました!

今回は、STINGER PLUS2をスマホでみた時に表示されている右上のアコーディオンメニュー(ハンバーガーメニュー)を非表示にする方法を紹介したいと思います。
 
基本的にはハンバーガーメニューはあったほうが便利かとは思いますが、サイトのデザインの関係で非表示にしたい場合や、デフォルトのメニューを非表示にして別のメニューを(プラグインなど)設置したい場合なんかもあると思います。
 
 

スポンサーリンク

STINGER PLUS2

ダウンロード及び規約
STINGER PLUS2は上記のリンクからダウンロードすることができます。
 
 

完成図

今回の手順でアコーディオンメニューを非表示にすると、このようにページ右上には表示が何もない状態になります。
 

 
非表示の手順は決して難しくありません。基本的にCSSの編集のみで非表示にすることができます。
 
 

メニュー非表示の手順

ここからメニューを非表示にするための手順を解説していきたいと思います。
 

PCのグローバルメニュー非表示

念のため、PCからSTINGER PLUS2をみた時にヘッダー下に表示されるグローバルメニューの非表示方法についても書いておきます。こちらはCSSを編集する必要もなく、WordPressの管理画面から「STINGER+2 管理」内の設定を変えるだけで非表示にすることができます。
 

 
「STINGER+2 管理」に入り、「メニュー設定」→「PC用グローバルメニュー」の「PC用メインメニューを表示しない」にチェックを入れれば、メニューを非表示にすることができます。
 

スマホで表示されるアコーディオンメニュー概要

上記の操作で非表示にしたのはPCでみた時にヘッダー下に表示される横帯のグローバルメニューです。厳密に言えば、画面幅が960以上の端末でサイトを閲覧した時に表示されるメニューを非表示にしました。
 
ただ、このメニューとスマホで表示されるメニューは別物で、PC版のメニューを非表示にしてもサイトをスマホから閲覧した時には、画面右上に「三」のアイコンをしたメニューが表示される状態です。
 
このスマホでみた時に表示されるアコーディオンメニューはSTINGER PROなら管理画面で非表示に設定できるようですが、無料版のSTINGER PLUS2では非表示にする機能が搭載されていないので、CSSを調整する必要があります。
 

アコーディオンメニュー非表示手順

まずは以下のCSSを子テーマのstyle.cssに追記するか、子テーマを有効化していない場合には元のCSSに付け足します。

上記CSSを追記・適用するだけでスマホページ右上のメニューアイコンがなくなったと思います。
 
ただ、前回の記事で紹介したヘッダー部分の背景色を画面幅いっぱいに表示するカスタマイズでヘッダー部分に背景色をつけている場合は特に目立つと思いますが、メニューを非表示にした分だけページ丈夫に不要な余白ができてしまっていると思います。
 
この余白を解消するためには、以下のCSSを追記します。

上記CSSを適用することで余白は解消されたかと思いますが、サイトの説明文が上に行き過ぎて非表示になってしまうかもしれません。その場合にはもう少しタイトルテキストの位置を下げる必要があるので、更に以下のCSSを追記します。

上記のコードは画面幅が960以下の本来ならアコーディオンメニューが表示される幅の時のみ適用されるCSSなので、PCでみた時の見栄えには影響しません。padding-top:30pxで指定しましたが、実際に適用してみて問題があるようでしたら数値を変えてみてください。
 
 

終わりに

以上の編集作業でSTINGER PLUS2でもスマホで表示されるアコーディオンメニューを非表示にすることができたかと思います。改めて表示したい時には上記の適用したCSSを全て削除すれば元通りになります。
 
或いは、このようなハンバーガーメニュー表示に特化したプラグインもあります。けっこういろんな設定ができてメニューがオシャレになった感じがするので私はこのプラグインを気に入っています。
 
WordPressで作成したウェブサイトにプラグインだけでレスポンシブ対応のハンバーガーメニューを実装できる「Responsive Menu」 | カキタクナッタラ
STINGER PLUS2のカスタマイズ関連のネタ、引き続き公開していきたいと思います!

でででーさん

2017年2月21日はてなブログでカキタクナッタラ開設。2017年10月22日にWordPressへ移行しました。基本的に毎日更新。ウェブ・スマホなどIT関連のネタをメインにラーメンのことや雑談記事など幅広く書きます。たまに変なイラストを描いたりウェブ制作をすることもあります。

あなたにオススメ