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

by souichirou · 公開済み 2020年4月23日 · 更新済み 2021年7月15日

コンテンツ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2020年4月28日イメージサイズ指定を追記

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

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

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

最後に

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

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