WordPressハンバーガーメニューをCSSで追加する【コピペのみ】

2021年7月23日

書いた人:TATSUO IYAMA

TATSUO Microsoft、KDDIのサポセン(表彰歴)、Androidアプリの開発などIT歴20年。猛毒親育ち。歌手はいだしょうこさんを絶賛。

ダークソウル3レベル1縛りカンスト周回クリア
Fall Guys メインショーソロ5連勝達成

ハンバーガーメニュー
「プラグインに頼らずハンバーガーメニューを追加したい」

そんな方に向けてCSSのコピペのみでのハンバーガーメニューの追加方法をご説明します。

動作イメージはこちら(右下にメニューボタンがあります)

プラグインもありますが、ページが重くなる原因になりますからCSSで追加するのが好ましいです。

あと無料プラグインだといいのがないんだよねー
タマ
タマ

【コピペ】かんたん2ステップでちゃちゃっと実装

犬

あとでちょこっと数値を変えればボタンの場所も変えられます。

バックアップをお忘れなく!
まだの方はWordPressに「UpdraftPlus」などのプラグインを追加して、バックアップを保存しましょう。

Step1 HTMLを追加する

次のコードをコピーします。

※バックアップをお忘れなく!

(1)WordPress管理画面左側の「外観」から「テーマの編集」をクリックします。

(2)画面右側の「テーマフッター(footer.php)」をクリックします。
※使用しているテーマによっては、他の名称の場合があります。

(3)Ctrl + Fで「</body>」を検索し、</body>の上に先ほどコピーしたコードを貼り付けます。
※一例として</body>の上にしていますが<body>~</body>の間ならどこでも良いです。

(4)画面下部の「ファイルを更新」をクリックします。

Step2 CSSを追加する

次のコードをコピーします。

※バックアップをお忘れなく!

(1)WordPress管理画面左側の「外観」から「カスタマイズ」をクリックします。

(2)画面左側の「追加 CSS」をクリックします。

(3)先ほどコピーしたCSSのソースコードを貼り付けます。場所はどこでも良いです。特にこだわりがなければ、一番下に加えると「どこまでが今回のコードなのか」がわかりやすくおすすめです。

(4)画面上部の「公開」をクリックします。

完成!

カスタマイズもできます【場所・デザイン】

レンチ

CSSコードの中にコメントを書いてますので、興味があれば見てみてください。

たとえば、ボタンの位置を右上にしたいときはCSS79行目「bottom: 10px;/*ボタンの場所。右上にしたければtop: 10px*/」となります!