最終更新日：2025年3月22日 at 8:24 AM
本Webサイトにおいて、WordPressプラグイン Popup Maker と CSS を活用し、クラシックなWebデザインにスタイリッシュなハンバーガーメニューを設置しました。
モーダルウィンドウで開かれるポップアップメニューは、ブロックエディタで作成し、各種ボタンの装飾やマウスオーバー時の制御は、全てCSSでの実装です。
メニュー表示に関しては、追従型メニューを表示させる WordPress プラグイン「Sticky Menu (or Anything!) on Scroll」を利用する方法もありますが、無料版では機能が乏しいのと、Stickyメニューが邪魔にも感じるため、採用は見合わせました。
よって、現デザインとの調和を鑑み、画面右上の邪魔にならない固定位置に小さなハンバーガーメニューを設置するのがベストと考え、メニューの作り込みは自作する事にしました。
これらの対応により、クラシックなWebデザインでありながらも、少しスタイリッシュでスマートな GUI を実装したことで、ブラウジングにおけるUXの向上を期待します。
目次
ハンバーガーメニューのデモ（動画）
ブログ閲覧の画面で、右上のハンバーガーメニューをクリックしてからの一連の操作を動画でご覧ください。
Popup Maker とは
Popup Maker は、人気のWordPressプラグインであり、ウェブサイトにポップアップを簡単に追加できるツールです。このプラグインを使用すると、ユーザーがサイトを訪れた際に表示されるポップアップをカスタマイズして、メッセージを伝えたり、広告を表示したり、フォームからの情報を集めたりすることができます。
主な機能
- 多様なポップアップタイプ: ポップアップの種類は豊富で、フローティング、スライドイン、スライドアウト、モーダルなどがあります。
- カスタマイズ可能: ポップアップのデザイン、テキスト、画像、動画などを自由にカスタマイズできます。
- トリガー設定: ポップアップを特定のイベントや条件に基づいて表示することができます。例えば、ページの訪問、特定のタイミング、ユーザーの行動などです。
- レスポンシブデザイン: モバイルデバイスや異なる画面サイズに対応したデザインが可能です。
- 分析ツール: ポップアップのパフォーマンスを追跡し、成功率やクリック率などのデータを収集できます。
使用方法
- プラグインのインストール: WordPressのプラグインメニューから「Popup Maker」を検索してインストールします。
- 設定の初期化: プラグインを有効化し、初期設定を行います。
- ポップアップの作成: 新しいポップアップを作成し、必要な情報を入力します。
- トリガーの設定: ポップアップが表示される条件を設定します。
- デザインのカスタマイズ: ポップアップの見た目をカスタマイズします。
- 保存と公開: 設定が完了したら、ポップアップを保存し、公開します。
Popup Maker は、ユーザーエンゲージメントを向上させるための強力なツールで、多くのウェブサイトで利用されています。
ハンバーガーメニューの作成
WordPress において、Popup Maker を利用しハンバーガーメニューを作成する方法を解説します。
本例では、ジャストシステムが販売するホームページビルダーのWordPressテーマに変更を加えます。
変更箇所は、上記の通りサイトのサブタイトル部分とし、最後尾にハンバーガーメニューのアイコンを仮置きし、後にCSSで指定位置へ移動させます。
テーマのプログラム修正
修正するテーマのプログラムは、”header.php”です。以下のハイライトされた行が追加するスクリプトです。
ハンバーガーメニューのアイコンファイルのディレクトリは、”/icons”、ファイル名は “sticky.jpg”、クラス名は “sticky-menu”とします。
<div id="hpb-header-extra1">
<p class="address">元SEの千里が運営するサーバーやWordPress, LGBT関連の話題を提供</p>
<img src="/icons/sticky.jpg" class="sticky-menu" border="0" width="18" height="18" alt="メニュー表示" title="メニュー表示">
</div>ハンバーガーメニュー用アイコンのCSS定義
ハンバーガーメニュー用アイコンのCSSは、以下の通りです。
アイコンを透過画像に設定し、表示位置固定（画面右上）、最前面表示（z-index値は最大）、画像サイズ切り換え（PC/スマホ）、マウスオーバー時に拡大するよう、レスポンシブ対応で記述しています。
本Webサイトにおいては、現行のデザインと調和させるため、ハンバーガーメニューは、stickyメニューではなく固定位置表示での対応としたため、position のプロパティを ‘sticky’ ではなく、表示位置を常時固定させる ‘fixed’ に設定しています。
なお、以下の例でハンバーガーメニューをポップアップよりも最前面表示にしたい場合は、z-index値を ‘calc(infinity)’ のように設定します。
また、Googleアドセンスの広告バナーの影響で、アイコンが表示されなくなるのを防ぐため、スマホでは表示位置を下方向へずらして設定しています。
以下の例では、アイコンの大きさを小さめに設定していますが、必要に応じて ‘width’ の値で大きさを変更できます。
Googleアドセンスを採用したサイトでハンバーガーメニューを設置した場合、アドセンスの広告でメニューが見えなくなる場合があるため、できれば「除外ページ」の設定で画面上部には表示させないようにし、アンカー広告や全画面広告も避けた方がデザイン的には良いと思います。
その場合、Googleからの広告収入は減りますが、UXの向上には寄与しますし、広告で画面の乱れがなくなるため、Google Search Console における「CLS に関する問題」の数値が改善され、検索順位が上がる可能性もあります。
当サイトでは、広告収入で稼ぐことを目的とはしていないため、Googleアドセンスには大きな期待は寄せていませんが、そうでない方は難しい問題かと思います。
/*
Stickyメニュー設定
*/
#hpb-header-extra1 .sticky-menu {
opacity: 0.5; /* 透過指定 */
z-index: 2147483646; /* 最前面表示*/
position: fixed; /* 画面上の位置を固定 */
top: 40px; /* 上からの位置 */
right: 30px; /* 右からの位置 */
width: 24px; /* 画像の幅 */
height: auto; /* 画像の高さ */
}
@media (max-width: 480px) {
/* スマホ対応 */
#hpb-header-extra1 .sticky-menu {
top: 70px;
right: 10px;
width: 18px;
height: auto;
}
}
/* マウスオーバー時に拡大 */
#hpb-header-extra1 img.sticky-menu {
display: block; /* コンテンツのひとかたまりとなる要素 */
transition-duration: 0.5s; /* 変化にかかる時間 */
}
#hpb-header-extra1 img.sticky-menu:hover {
transform: scale(1.3,1.3); /* 画像の拡大率 */
transition-duration: 0.5s;
}ポップアップメニューの作成
ポップアップメニューは、WordPressプラグイン「Popup Maker」で作成します。
インストール 直後は、クラシックエディタがデフォルトのエディタとなるため、上記のように設定画面 “Settings” にて、予めブロックエディタのサポートを有効化しておきます。
本例では、ポップアップメニュー名を “Menu” として、ポップアップを作成します。
ポップアップメニューの設定
以下のギャラリーは、ポップアップの設定画面です。
設定内容は、トリガー：ハンバーガーメニューのアイコン（クラス名：”.sticky-menu”）をクリックしてポップアップ表示、ポップアップのテーマ：”Enterprise Blue”、サイズ：”Auto”、アニメーション表示：”Fade and Side”、表示位置：”中央”、通知音：”Beep 2″ としています。
また、Closeの処理では、”Alternate Methods”タブを選択し、”Click Overlay to Close”をチェックすれば、ポップアップウィンドウの背景をクリックしても画面を閉じることができるようになります。
なお、Cookie の設定を有りにすると、ポップアップが一度しか表示されなくなりますので、ポップアップを常時表示させたい場合は、”None”に設定する必要があります。
ポップアップテーマのカスタマイズ
ポップアップのテーマは、カスタマイズできます。以下は、背景（Overlay）のカラーと透過率の設定画面です。モーダルウィンドウのテキスト画面（Container）の背景色やスタイル、タイトルなども設定可能です。
有料版では、PhotoShopまたはCanvaで作成したデザインをポップアップ背景としてテーマに追加できるツール “Advanced Theme Builder ” も提供されています。
ポップアップメニューの作成
以下のギャラリーは、ポップアップ画面の作成例です。
ここでは、ブロックエディタを拡張するプラグイン「VK Blocks」で枠線ボックスの中にメニューのリンクを置いています。
ポップアップ画面の背景色は、ポップアップテーマの方で設定できますので、この画面で背景色の設定は不要です。
なお、メニューのリンクを記述したブロック（枠線ボックス）には、追加 CSS クラスに “popup-menu” を設定します。枠線ボックスの代わりに、ブロックエディタのカラムブロックや段落ブロックを使用しても構いません。
ポップアップメニューのCSS定義
ポップアップメニュー用のCSSは、以下の通りです。
テキストリンクを水色のボタン形状で表示します。マウスオーバー時は、ボタンが白色に変化します。
/*
ポップアップメニュー設定
*/
.popup-menu {
margin:10px;
a {
color:white;
background-color: skyblue;
padding:5px 8px;
border-radius: 5px;
text-decoration: none;
}
a:hover {
color:skyblue;
background-color: white;
border:3px solid skyblue;
}
}ポップアップメニューの表示
ポップアップメニューは、画面右上に固定配置されたハンバーガーメニューのアイコンをクリックします。以下の例では、ポップアップメニューからニュースの記事一覧を表示しています。
