WordPressメニュー応用編｜2段表記＆ヘッダーボタンで完成度アップ【SWELL】

WordPressのメニュー作成の基本ができたら、「もう一歩プロっぽくしたい」と感じませんか？

メニュー項目の下に英字を表示したり、お問い合わせやYouTubeチャンネルへのボタンをヘッダーに設置できると、サイトの完成度が一気に上がりますよね。

ただ、特にヘッダーへのボタン設置は、テーマによっては結構難しい作業だったりします。 SWELLなら、コード一切なしで実装できますよ。

そこでこの記事では、メニューを英字2段表記にする方法と、ヘッダーにブログパーツでボタンを設置する方法を、当ブログ（AIブログ研究所）の実装例と合わせてわかりやすく解説します。

それでは詳しく見ていきましょう。

WordPressメニューを2段表記にする方法

メメニューを2段表記にする機能は、実はWordPress標準で用意されています。

SWELLに限らず、ほとんどのテーマで同じ手順で設定できます。

表示オプションで「説明」にチェックを入れる

設定手順は以下の通りです。

1. WordPress管理画面を開く
2. 「外観」→「メニュー」をクリック
3. 画面右上の「表示オプション」を開く
4. 「説明」にチェックを入れる
5. 各メニュー項目の「▼」を開いて「説明」欄に英字を入力
6. 「メニューを保存」をクリック

ここで大事なのが、画面右上にある「表示オプション」です。

初期状態では「説明」欄が表示されていないことがあります。

そのため、「メニュー項目を開いても説明欄が見つからない」という場合は、まず表示オプションを確認してみてください。

英字の選び方のコツ

英字を選ぶときは、メニュー項目同士の文字数を揃えると見た目が綺麗に整います。

定番の対応例はこんな感じですね。

• ホーム → HOME
• このブログについて → ABOUT
• ブログ記事一覧 → ARTICLES（または BLOG）
• お問い合わせ → CONTACT
• プロフィール → PROFILE

「ARTICLES」と「BLOG」のどちらを選ぶかは、サイトの雰囲気で決めるのがおすすめですよ。 形式的に見せたいなら「ARTICLES」、カジュアルにいきたいなら「BLOG」が合いますね。

英字以外に、ひらがなやキャッチコピーを入れることもできます。 たとえば「ホーム → トップへ戻る」のように、サイトの雰囲気に合わせて自由に設定できますよ。

前回の記事で解説したアイコンを設置する方法で、アイコンとテキストのような設定もできますよ。

アイコンを付ける方法の詳しい解説はこちらの記事でどうぞ。

 注意：説明欄が反映されないケース

設定するときに知っておきたい注意点が2つあります。

1つ目は、説明欄はPCのグローバルナビにのみ反映されること。
フッターメニューやスマホ用の開閉メニューには表示されません。
2つ目は、テーマによって表示位置やデザインが異なること。
SWELLでは大きいメニュー名の下に小さく英字が表示されますが、別のテーマだと位置が違ったり、そもそも非表示の設定になっている場合もあります。

設定後は必ずサイトを確認して、意図通りの表示になっているかチェックしましょう。

SWELLでヘッダー下にボタンを設置する方法

次に、SWELLのヘッダー下にボタンを設置する方法を解説します。

メニューの中の「お問い合わせ」というテキストリンクと比較すると、目立つボタンを別途用意した方がクリック率が大きく変わりますよね。

ヘッダーにボタンを置くのって、テーマによっては結構大変な作業だったりします。 コードを書いたり、プラグインを入れたりと、初心者には壁が高い…

でもSWELLなら、ブロックエディタ感覚でコード一切なしに設置できますよ。 ここからは、SWELLでの実装手順を解説していきます。

ブログパーツでボタンを作成する

まずはヘッダーに表示するボタンを「ブログパーツ」として作成します。

ブログパーツは、SWELLが用意している便利な機能で、一度作ったパーツを複数の場所で使い回せます。 ヘッダー、フッター、記事内のCTAなど、同じデザインのボタンを何度も作る必要がなくなって便利ですよ。

設定手順は以下のとおりです。

ブログパーツのショートコードをコピーする

ブログパーツを公開すると、ショートコードが発行されます。

ショートコードとは、作成したブログパーツを別の場所に呼び出すための短いコードです。たとえば：

[blog_parts id="123"]

このショートコードをコピーしておきます。

あとでヘッダー内部のウィジェットに貼り付けることで、作成したボタンを表示できます。

ヘッダー内部ウィジェットに貼り付ける

ボタンを作成したら、ヘッダーに設置していきます。

これで、ヘッダー下にボタンが表示されます。

もし表示されない場合は、ショートコードの貼り間違いがないか確認してみてください。

また、キャッシュ系の設定を使っている場合は、反映まで少し時間がかかることもあります。

ボタンが下にズレるときは余白を調整する

ボタンを設置したあと、ヘッダー内で少し下にズレて見えることがあります。

その場合は、ブログパーツ側のボタン余白を確認してみてください。

ボタンを横並びにすると読者が選びやすくなる

ボタンの応用テクニックとして、横並びカラムを使って2つのボタンを並べる方法もおすすめです。

ブログパーツの中で「横並び」ブロックを使えば、ボタンを綺麗に横並びで配置できますよ。 1つのCTAだけだと興味を持たない読者でも、2つの選択肢があると「こっちなら」と引っかかる確率が上がります。

具体的にどんな組み合わせができるか、活用例を3つ紹介していきますね。

電話番号とお問い合わせを並べる

店舗サイトや教室、地域ビジネスのサイトなら、電話番号とお問い合わせボタンの組み合わせが使いやすいです。

[📞 03-1234-5678] [📩 お問い合わせ]

法人サイトやサービス業のサイトに向いている組み合わせです。 電話で直接話したいユーザーと、メールで落ち着いて問い合わせたいユーザー、両方のニーズに応えられますよね。

電話番号はリンク先に「tel:電話番号」を設定すると、スマホでタップすればそのまま発信できますよ。

お問い合わせとLINEを並べる

個人サービスや相談系のブログなら、お問い合わせフォームとLINEを並べるのも使いやすいです。

[📩 お問い合わせ] [LINEで相談]

しっかり文章で相談したい人はお問い合わせフォームへ。気軽に聞きたい人はLINEへ。

このように分けておくと、読者の心理的なハードルを下げやすくなります。

ただし、LINEへ誘導する場合は、何を相談できるのかを近くに書いておくと親切です。

YouTubeとXを並べる

ブログ以外にSNSや動画でも発信している場合は、YouTubeとXを並べる方法もあります。

[▶ YouTube] [Xを見る]

動画で見たい人はYouTubeへ。最新情報や短い投稿を追いたい人はXへ。

当ブログではSnow Monkey Blockのボタンを使ってブログパーツを作成しました。

SWELLボタンもおしゃれですが、自分好みの背景色や形、テキストを変更しやすいSnow Monkey Blockのボタンはおすすめです♪

横並びにボタンを増やすのも、Snow Monkey Blockならプラスボタンを押すだけで簡単ですよ。

読者によって情報の受け取り方は違います。ブログだけでなく、別の場所でもつながってもらいたい場合に向いています。

初心者向けガイドと質問窓口を並べる

ノウハウ系ブログでは、初心者向けガイドと質問窓口の組み合わせも便利です。

[📚 スタートガイド] [📩 質問する]

初めて来た読者は、どの記事から読めばいいか迷いやすいです。そこで「初心者ガイド」を用意しておくと、ブログ内を回遊しやすくなります。

ヘッダーボタンを設置するときの注意点

ヘッダーボタンは便利ですが、置き方を間違えると画面がごちゃついて見えます。設置前に、次の3つを確認しておきましょう。

ボタンを増やしすぎない

ヘッダーは限られたスペースなので、ボタンを増やしすぎると逆効果になります。 3個以上のボタンを並べると視線が散らばって、結局どれもクリックされないという結果になりがちです。

最大2個までに絞って、本当に押してほしいCTAを厳選しましょう。 ヘッダーに置かないCTAは、フッターやサイドバーなど別の場所に分散させるのがおすすめです。

ボタンの活用方法は、ブログの目的に合わせて自由に決めるといいと思います。

スマホ表示も必ず確認する

設置後は必ずスマホ表示でも確認しましょう。 PCで綺麗に並んでいても、スマホだとボタンが大きすぎてヘッダーが圧迫感のある印象になることがあります。

設置したヘッダー内部ウィジェットは、SWELLの仕様上PCのみで表示されるため、スマホでは別途対応が必要です。

SWELLではスマホ向けに「固定フッター（SP）メニュー」が用意されています。新規メニュー作成で画像のように設定すると、スマホの固定フッターにアイコンとテキストの2段メニューもできますよ。
他にもサイト全体設定にスマホ用の固定フッターの特殊メニューがありますので、興味のある方は✓してみてください♪
使い方は公式ページに詳しい設定が掲載されています。

　公式→　スマホ用の固定フッターメニューの設定方法

ヘッダーメニューにアイコンを設置する方法は、前回の記事で詳しく解説しています。 Font Awesomeの使い方も解説しています。

ボタンの行き先をわかりやすくする

ボタンの文言とリンク先は、必ず一致させましょう。

たとえば、「お問い合わせ」と書いてあるのにLINEに移動すると、読者は少し戸惑います。

• LINEへ誘導するなら「LINEで相談」
• YouTubeへ誘導するなら「YouTubeを見る」
• Xへ誘導するなら「Xで最新情報を見る」

このように、押した後の行動が想像できる言葉にすると親切です。小さなことですが、読者にとっては安心感につながります。

まとめ

今回は、WordPressメニューを2段表記にする方法と、SWELLでヘッダーにブログパーツでボタンを設置する方法を解説しました。

ヘッダーは訪問者が最初に目にする場所なので、ここを少しカスタマイズするだけでブログ全体の印象が大きく変わりますよね。
ぜひ、お好みのボタンを設置してみてください。

メニュー作成の基本から確認したい方は、前回のメニュー作成記事もあわせて参考にしてみてください。

SWELLレビュー記事もおすすめです。