2024年10月20日WordPressテーマ「SWELL」でメガメニューを実装するカスタマイズ方法を紹介します。SWELLには、メガメニューの機能はなく、導入にはカスタマイズが必要ですが、ブログパーツとCSSコードの追加だけで簡単に導入可能です。実際に行ってみて、ブログパーツの応用範囲の広さに改めて驚かされました。ここで紹介するのは、グローバルメニュー上でマウスをホバーした際、画像を使ったメガメニューが表示されるようにする方法です。以下のようなメガメニューをサンプルにご紹介します。ここで紹介するメガメニューはブログパーツを使うので、様々な形式が可能です。以下のような項目数が多いメガメニューも可能です。目次メガメニューとはメガメニューとはメガメニュー(メガドロップダウンメニュー)とは、Webページのナビゲーションメニューの一種で、画面の半分から大半を覆うほどの大きなスペースを持つドロップダウンメニューのこと。e-Wordsメガメニューは、グローバルメニューのサブメニュ―(通常はテキストの項目が並ぶ)の表示範囲を拡大したものです。設置するメリットは、メニュー(ナビゲーション)内に、画像を含めた多くの情報を掲載できることです。Menuがよく使われているようです。SWELLにメガメニューを導入する手順ここでは、このような画像付きメガメニューを導入する方法をご紹介します。この例では、メインメニューの「ライフスタイル」という項目にマウスを載せると、画像が横に並んだメニュー項目がポップアップ表示されるようになっています。メガメニューはPCのみの表示で、スマホでは通常のハンバーガーメニューのままにします。SWELLにメガメニューを導入する手順は以下の5ステップです。ブログパーツでメガメニューの内容(ポップアップ部分)を作成PC用のメニューとスマホ用のメニューを作成PC用のメニューにブログパーツのショートコードとクラス名を設定スマホ用のメニューにクラス名を設定CSSコードを追加STEPブログパーツでメガメニューの内容(ポップアップ部分)を作成この例では、フルワイドブロックの中にリッチカラムブロックを入れて作成しています。参考までに、設定内容は以下です。画像とテキストにリンクを設定するSTEPPC用のメニューとスマホ用のメニューを作成グローバルメニューで、PC用のメニューとスマホ用のメニューを作成します。設定の場所:管理画面で、外観→メニューPC用のメニューPC用のメニューは、親メニュー、サブメニューともに、カスタムリンクで作成します。カスタムリンクのURLには、ダミーの#をいれます。後でPC用のサブメニューにメガメニューを設定します。スマホ用のメニュースマホ用のメニューは、通常と同じように作成します。以下は、PCとスマホ用のメニューを作成した段階のグローバルメニューです。同じ「ライフスタイル」が2つ並んでいます。スマホ用のメニューは、マウスを載せると、サブメニュー項目が以下のように表示されました。これを、後でPCでは表示しないようにします。class」にクラス名を記載します。「ナビゲーションラベル」に、作成したブログパーツのショートコードを貼り付けます。class」にクラス名を記載します。以下のCSSコードを追加します。0%;}メガメニューの導入は以上で完了です。CSSコードの解説PC用、スマホ用メニューの切り替え以下のコードで、端末によって、PC用のメニュー(メガメニュー)とスマホ用のメニューを切り替えています。対し、位置の指定を初期化しています。画面いっぱいに広がるようにしています。none;}SWELLでは、サブメニューの左側に「>」のような記号が付くので、これを消します。0%;}グローバルメニューの親メニューの上にマウスを載せると、テキストの下部の横線が表示されます。これは、好みによって、消さずに残しておいてもいいかもしれません。まとめイメガメニューは、インパクトがある、情報量が多いなどのメリットがあります。ブログパーツで作成した内容をメニューに利用できるので、様々なスタイルのメガメニューを作ることができると思います。当サイトもSWELLを使っています。SWELLカスタマイズよかったらシェアしてね!URLをコピーしました!URLをコピーしました!tsutchii(ツッチー)WordPressやブログに関する情報、中高年の学びや副業などについて書いています。管理人は、子供の英語教育のため、7年前、家族でフィリピンのセブに移住した引きこもり系おじさんです。これまで、ローカル紙記者、住宅会社や病院の広報、WEB担当、介護助手といった仕事をしてきました。今はNPO法人のサイト運営などネットで仕事をしながら、場所にとらわれずに生活していける働き方を模索しています。