【「Lightning」カスタマイズ】ハンバーガーメニューのデザインをオリジナルデザインに変更する方法

「Lightning」は、大変メジャーなWordPressの無料テーマです。メジャーなだけに見る人が見たら「このホームページはLightningで作ったな」と思われがちです。そこで今回は、Lightningのハンバーガーメニューのデザインをオリジナルのものに変えるカスタマイズです。

Contents

無料テーマ「Lightning（ライトニング）」とは

国産のWordPress無料テーマで、コーポレート企業サイトを自作するなら、まず一番に候補に挙がる大変メジャーなテーマです。使い方もわかりやすく、機能も豊富で、ネットにもいろいろな情報が載っていますので、初心者の方にもお勧めのテーマです。

Lightningのハンバーガーメニューのデザインとは

ハンバーガーメニューというのは、スマホの表示の時などに左上や右上にある三本線のアイコンです。タップ（クリック）すると、メニューリストが現れたりします。

Lightningの場合、表示しているホームページの横幅が、992px以下になったら、自動的に通常の横並びのメニューから、ハンバーガーメニューに切り替わるようになっています。

左上に表示され、デザインは下のように四角い枠の中に三本線というデザインになっております。

こちらのハンバーガーメニューをオリジナルデザインに変更したいと思います。

ハンバーガーメニューのデザイン画像を用意する

ハンバーガーメニューのデザインは何でもいいのですが、今回はシンプルに三本線とその下にMENUと書かれた画像とタップ時の×の画像の2枚を用意しました。

humb.png ダウンロード

humb-open.png ダウンロード

こちらからダウンロードできます

次にダッシュボード「メディア」＞「新規追加」で2枚の画像をアップロードします。

アップロードしたら、この2枚の画像のファイルURLをどこかにメモしておいてください。ファイルURLは、「メディア」＞「ライブラリ」でその画像をクリックすれば調べることができます。

「ファイルのURL：」に書かれていて、「URLをクリップボードにコピー」で、コピーできますので、メモ帳にでも貼り付けておきます。

CSSの追加

今度は追加CSSで、ハンバーガーメニューの見た目を変えるように指定します。

ダッシュボード「外観」＞「カスタマイズ」から、追加CSSをクリックして、以下のコードを記述します。

.vk-mobile-nav-menu-btn {
    border: none;
    background-image: url("ここにhumb.pngのファイルURLを書く");
	  background-size: cover;
}
.vk-mobile-nav-menu-btn.menu-open {
    border: none;
    background-image: url("ここにhumb-open.pngのファイルURLを書く");
	  background-size: cover;
}

.vk-mobile-nav-menu-btn　の　background-image: url()　の括弧の中に先ほどメモした三本線のファイルURLを記述、.vk-mobile-nav-menu-btn.menu-open　の　background-image: url()　の括弧の中にこちらも×のファイルURLを記述してください。

これで従来のLightningのハンバーガーメニューが、アップロードした画像に置き換えられます。

ハンバーガーメニューの位置を左上から右上に変える

Lightningのハンバーガーメニューの位置は画面の左上なのですが、どちらかというと右上にある方が主流のように思います。

そこで、ついでにハンバーガーメニューの位置を左上から右上に変更したいと思います。

.vk-mobile-nav-menu-btn {
	 right:5px;
	 left:inherit;
}

こちらのCSSを追加するとハンバーガーメニューの位置を右上に変更できます。

まとめ

WordPressの無料テーマLightningは、大変優秀なテーマですが、使っている方も多いので、他のホームページと同じようなデザインになりがちです。今回のようにスマホ表示のときのハンバーガーメニューのデザインを変えるだけでも印象が変わってくると思いますので、良かったらお試しください。