WordPress Sydney(シドニー) でスマホのハンバーガーメニューを変更する | そう備忘録

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

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

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

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

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

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

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

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

メニューが右に表示された

変更方法

画像の用意

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

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

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

画像のアップロード

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

画像のアップロード

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

アップロード完了

ファイルのURLの取得

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

ファイルのURLの取得

CSSの変更

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のアソシエイトとして、当メディアは適格販売により収入を得ていますのでご了承ください。

souichirou

やった事を忘れない為の備忘録 同じような事をやりたい人の参考になればと思ってブログにしてます。 主にレゴ、AWS(Amazon Web Services)、WordPress、Deep Learning、RaspberryPiに関するブログを書いています。 仕事では工場に協働ロボットの導入や中小企業へのAI/IoT導入のアドバイザーをやっています。 2019年7月にJDLA(一般社団法人 日本デイープラーニング協会)Deep Learning for GENERALに合格しました。 質問は記事一番下にあるコメントかメニュー上部の問い合わせからお願いします。

おすすめ

4件のフィードバック

  1. うさぎ より:

    この度は、ご親切に教えて頂きましてありがとうございました。
    プロのホームページ制作会社の方に、テーマを変更しないと出来ないと言われても諦めきれず、こちらのサイトに辿り着きました。

    出来ますよ、とお伝え頂き、あっという間に参考画像までアップされて、神業としか言いようがありません。
    本当に助かりました。

    • souichirou より:

      うさぎさん
      メールで問い合わせを頂いた方ですね。
      早速のコメントありがとうございます!
      HPの運営頑張って下さい。

  2. ゆかこ より:

    こちらすごいです!!感激です!三本ラインがすきな画像にできるなんて、ほんとうにうれしいです、この画像の大きさを変更することは可能でしょうか?、、、少しだけ大きくしてみたいです。

    • souichirou より:

      ゆかこさん、こんにちは。

      .btn-menuにwidthとheightを指定すればOKです。

      こんな感じです。
      .btn-menu {
      background-image: url(“先程コピーしたURL”);
      background-size:contain;
      width:40px;
      height:40px;
      }

      記事の方にも追記しておきますのでご確認ください。

質問やコメントや励ましの言葉などを残す

名前、メール、サイト欄は任意です。
またメールアドレスは公開されません。