WordPress Sydney（シドニー） でスマホのハンバーガーメニューを変更する

スマホのハンバーガーメニュー

WordPressのテーマのSydney（シドニー）にてスマホモードにした時のハンバーガーメニューを３本線以外に変更したいとの質問を頂いた。

その時に調べた事を備忘録として記事にしておく。

ちなみにシドニーのデフォルトではハンバーガーメニュー位置は中央に表示されているがこの記事では右側に表示されている状態で画面ショットを撮っている。

メニューを右寄せする方法についてはこちらの過去記事を参照。

デフォルトのハンバーガーメニュー

デフォルトのハンバーガーメニューは以下の様に３本線になっている。

変更方法

画像の用意

まずはメニュー用の画像を用意する。

今回はFLAT ICON DESIGNさん（商用利用可、無料）のアイコンをダウンロードして利用させてもらった。

ハンバーガーメニューの代わりにこのアザラシの画像に変更してみる。

画像のアップロード

WordPressのメニュー用からメディア、新規追加を選択して「ファイルを選択」で先程ダウンロードした画像を選択する。

アップロードが終了したら、WordPressのメニューのメディア、ライブラリで追加されている事を確認して画像をクリックする。

ファイルのURLの取得

ファイルのURLをコピーしておく。

CSSの変更

WordPressのメニューから外観、カスタマイズ、追加CSSを選択して以下を追記する。

URL欄は先程コピーしたURLを指定する。

.btn-menu {
	background-image: url("先程コピーしたURL");
	background-size:contain;
	width:40px;
	height:40px;
}
.btn-menu i.sydney-svg-icon{
display:none;
}

公開ボタン

ハンバーガーメニューがアップロードした画像に変更されるのでタブレット、スマホモードで確認した後、「公開」ボタンをクリックする。

三本線がアザラシの画像に変更された。

この記事が何処かで誰かの役に立つことを願っている。

尚、当記事中の商品へのリンクはAmazonアソシエイトへのリンクが含まれています。Amazonのアソシエイトとして、当メディアは適格販売により収入を得ていますのでご了承ください。