WordPressでサイト運営をしていく中で、サイトのテーマなどからサイトの見栄えをよくすることに取り組んでおられる方も多いでしょう。
ホームページやブログのトップ画面に表示されるグローバルメニューは、どのページに行っても表示されるものですので、少しでも見栄えの良いものにしたいところです。
HTMLやCSSの知識をしっかり持っておられれば、テーマの編集から思い通りのデザインに思い通りの編集を加えることができるでしょう。
しかし、HTMLやCSSの知識などを持っていなくても、WordPressのプラグイン「Max Mega Menu」を利用すれば、簡単にグローバルメニューを加工していくことができます。
[Twitter:followme@EASILY_3]
Contents
「Max Mega Menu」プラグインをインストールしよう
プラグインのインストールは簡単です。
WordPressのダッシュボードのメニューよりプラグイン＞新規追加をクリックします。
プラグインの検索欄に「Max Mega Menu」と入力し検索します。
下記のプラグインが表示されますので、「今すぐインストール」をクリックし、インストールが完了しましたら「有効化」するのも忘れないようにしましょう。
[Twitter:followme@EASILY_3]
グローバルメニューにアイコンを入れてみよう
グローバルメニューは、通常テキストのみで表示されているものですが、アイコンをテキストの横につけるだけで、見栄えはとても変わってきます。
プラグインのインストールと有効化が完了したら、WordPressサイドバーの外観より「メニュー」をクリックします。
「Max Mega Menu Settings」のヘッダーナビとフッターナビの「Enable」にチェックをいれましょう。
すると「メニュー構造」の中のメニューの横にカーソルを持ってくることで「Mega Menu」というボタンをクリックすることができるようになっているのでクリックしましょう。
選んだメニューに関する設定画面が開きますので、「Icon」をクリックしてテキストの横に表示させるアイコンを選択しましょう。
アイコンをクリックしたら画面を閉じて大丈夫です。
この時、「メニュー構造」の画面上では選択したアイコンは表示されていませんが、実際に表示されるサイトのメニューにはアイコンが表示されているはずですので確認をしてみましょう。
[Twitter:followme@EASILY_3]
グローバルメニューバーのデザインを変えてみましょう
グローバルメニューバーのデザインを変更させる方法について簡単に説明しておきます。
実際にいろいろな設定を実際に操作していきながら、納得のいくデザインに寄せていかれるのが良いと思います。
まず、WordPressサイドバーに「Mega Menu」という項目が追加されているので、その中から「Menu Themes」をクリックしましょう。
「Menu Bar」というタブを開きます。
「Menu Hight」ではグローバルメニューの太さを変更することができます。
「Menu Background」ではグローバルメニューのバックグラウンドの色を設定することができます。グラデーションもつけることができますが、不要な人は「FROM」と「TO」に同じ色を設定しましょう。
「Menu Padding」ではグローバルメニューの余白の設定をすることができます。
「Menu Border Radius」ではグローバルメニューバーの四隅の角に丸みを持たせることができます。
「Menu Items Align」ではグローバルメニューの中身の配置をどこに寄せるか設定することができます。
他にも、グローバルメニューにカーソルがあった時の表示の変更も可能です。
[Twitter:followme@EASILY_3]
グローバルメニューのデザインをいろいろさわってみよう
「Max Mega Menu」を利用すれば、グローバルメニューのデザインをいろいろと変更することができます。
このページで紹介できていない部分もかなりあるので、ご自分で確認しながら編集していくと面白いと思います。
利用されてみてはいかがでしょうか。