Dressing 
WordPressテーマ「SWELL」のサイトで、「お店やサロンの電話番号をヘッダーに載せたい」と考えている方へ。
SWELLには、コード不要で、初心者でも簡単に電話番号を設置できる方法があります。
この記事では、電話番号だけのシンプルな表示から、お問い合わせボタンと並べた見やすいデザインまで、画像つきでわかりやすく解説します。
PCとスマホの両方に対応しているので、どんなデバイスでもコンタクトしやすいサイトが作れますよ。
さっそく、一緒に設定していきましょう。
1.完成イメージ
まずは、PCとスマホそれぞれの完成イメージを見ていきましょう。
この記事では、以下の２パターンをご紹介します。
- 電話番号のみ表示する場合
- 電話ボタン＋お問い合わせボタンを並べた場合
1. 電話番号のみ表示する場合
PCでの表示
画面の右上に「☎ 03-1234-5678」ボタンが表示されるだけのシンプルな形です。
スマホでの表示
メニューの横に電話アイコンが表示され、タップすると電話アプリが開きます。
2.電話番号とお問い合わせボタンを並べる場合
PCでの表示
画面の右上に「☎ 03-1234-5678」ボタンと「お問い合わせ」ボタンが並んで表示されます。
スマホでの表示
SWELLのスマホヘッダーにはアイコンが１つしか表示できないため、「電話」と「お問い合わせ」を並べて置くことができません。
代わりに、固定メニューや開閉メニューを活用して、電話番号とは別にお問い合わせボタンを表示します。
1. 下部固定メニューに表示（おすすめ）
ヘッダーに「電話」ボタン、下部固定メニューに「お問い合わせ」リンクを表示します。
「LINE予約」なども並べて表示可能で、お客様がいつでもアクセスできるので便利です。
2. 開閉メニュー内に表示
ヘッダーに「電話」ボタン、メニューを開いたときに「お問い合わせ」ボタンを表示します。
シンプルな見た目にしたい場合は、こちらがおすすめです。
▼通常時
▼メニューを開いた時
それでは、これらの設定方法について具体的に解説していきます。
SWELLのヘッダーに電話番号を表示する方法
1. 電話番号のみ表示する場合
まずは、電話番号だけをシンプルに表示するパターンからご紹介します。
SWELLのブログパーツ機能を使えば、コードを書かなくても簡単にボタン形式で電話番号を表示できます。
管理画面の左メニューから「ブログパーツ」→「投稿を追加」をクリックします。
ブログパーツのタイトル欄に「ヘッダー電話番号」など、分かりやすい名前を入力します。
このタイトルは管理用なので、サイトには表示されません。
画面左上の「+」ボタンをクリックし、「SWELL」ブロックから「SWELLボタン」を選択します。
SWELLボタンブロックが追加されたら、以下のように設定します。
- ボタンテキスト：03-1234-5678
- ボタンのリンク先：tel:0312345678
※「tel:」の後にはハイフンを除いた数字のみを入力します
右側の設定パネルで、ボタンの見た目を調整します。
- ボタンサイズ：「小」または「標準」
- カラー設定：お好みの色
- アイコンの位置：「左」
- アイコン選択：「電話のアイコン」を選択
- アイコンサイズ：「1.1」em
設定が完了したら「公開」ボタンをクリックして、ブログパーツを保存します。
画面左上の「W」ロゴをクリックして、ブログパーツ一覧画面に戻ります。
[blog_parts id=”123″]のような呼び出しコードが表示されるので、コピーしておきます。
次に、作成したブログパーツをヘッダーに表示するため、ウィジェット機能を使って設置していきます。
管理画面の左メニューから「外観」→「カスタマイズ」をクリックします。
カスタマイザーのメニューから「ウィジェット」→「ヘッダー内部」をクリックします。
「+ウィジェットを追加」ボタンをクリックし、「カスタムHTML」ウィジェットを選択します。
カスタムHTMLウィジェットの内容欄に、先ほどコピーしたブログパーツの呼び出しコードを貼り付けます。
プレビュー画面で、電話番号ボタンの表示を確認できます。
「公開」ボタンをクリックして設定を保存します。
これで、PC用の電話番号表示は完了です。
続いて、スマホでの電話アイコン表示を設定していきましょう。
スマホ用の設定（電話アイコン表示）
左上の戻るボタン「＜」ボタンを2回クリックして、メイン画面に戻ります。
その後「ヘッダー」を選択します。
カスタマイザー下部にあるプレビューアイコンから、スマホのアイコンをクリックします。
プレビュー画面がスマホ表示に切り替わります。
設定画面をスクロールして「レイアウト・デザイン設定」の「ヘッダーのレイアウト（SP）」で、
「ロゴ：左 / メニュー：右」を選択します。
一番下までスクロールして、「カスタムボタン設定」を以下のように設定します。
- アイコンクラス名：「icon-phone」を入力
- アイコン下に表示するテキスト：「ご予約、電話する」など（空欄でもOK）
- カスタムボタン背景色：お好きな色を選択（メインカラーなど）
- リンク先URL：「tel:0312345678」を入力（ハイフンなし）
「公開」ボタンをクリックして、すべての設定が完了です。
これで、PCのヘッダーにはボタン形式で、スマホのヘッダーには電話アイコンで電話番号が表示されます。
どちらもクリック・タップで電話をかけられるようになりました！
次は、電話番号ボタンの右側に「お問い合わせ」ボタンを並べる方法を解説していきます。
横並びボタンは、お店やサロン、スクールなど、予約や問い合わせの手段が複数ある場合におすすめです。
2. 電話番号＋お問い合わせを表示する場合
基本の流れは、先ほどご紹介した「電話番号のみの場合」と同じです。
違いは、ブログパーツで「横並びブロック」を使って、電話番号ボタンとお問い合わせボタンを並べるという点。
最初にやった手順の応用編として考えればOKです。
管理画面から「ブログパーツ」→「投稿を追加」をクリックします。
タイトルに「ヘッダー電話番号＋お問い合わせ」などわかりやすい名前を入力します。
エディタの「+」ボタンをクリックして「横並び」ブロックを選択します。
横並びブロック内で「+」ボタンから「SWELLボタン」ブロックを追加し、電話番号ボタンの設定を行います。
- ボタンテキスト：03-1234-5678
- ボタンのリンク先：tel:0312345678
- スタイル：アウトライン
- ボタンサイズ：「小」または「標準」
- カラー：お好みの色
- アイコン位置：「左」
- アイコン選択：「電話アイコン」を選択
同じ横並びブロック内で「+」ボタンをクリックし、もう一つ「SWELLボタン」ブロックを追加します。
※画面左下の「横並び」をクリックしてから「+」ボタンをクリックするとスムーズです。
お問い合わせボタンは以下のように設定します。
- ボタンテキスト：お問い合わせ
- ボタンのリンク先：お問い合わせページのURL
- スタイル：ノーマル（電話ボタンと違うスタイルがおすすめ）
- ボタンサイズ：「小」または「標準」（電話ボタンと同じサイズに）
- カラー：お好みの色
- アイコン位置：「左」
- アイコン選択：「メールアイコン」を選択
ボタンの設定が終わったら、「公開」ボタンをクリックして、ブログパーツを保存します。
ブログパーツ一覧に戻り、横並びボタンの「呼び出しコード」をコピーします。
次に、作成したブログパーツをヘッダーに表示するため、ウィジェット機能を使って設置していきます。
管理画面の左メニューから「外観」→「カスタマイズ」をクリックします。
カスタマイザーのメニューから「ウィジェット」→「ヘッダー内部」をクリックします。
「+」ボタンをクリックし、「カスタムHTML」ウィジェットを選択します。
カスタムHTMLウィジェットの内容欄に、先ほどコピーしたブログパーツの呼び出しコードを貼り付けます。 プレビュー画面で、横並びボタンが表示されることを確認します。
「公開」ボタンをクリックして設定を保存します。
これで、PC用の「電話番号＋お問い合わせ」表示設定は完了です。
続いて、スマホ用の設定を行います。
スマホでは2通りの表示方法があるので、ご自身のサイトに合ったやり方を選んでみてくださいね。
スマホ用の設定：方法１（下部固定メニューに「お問い合わせ」表示）
この方法では、画面下部の固定メニューに「お問い合わせ」ボタンを表示します。
固定メニューは常に表示されるので、アクセスしやすいのがメリットです。
▼完成イメージ
まずは、スマホのヘッダーに電話アイコンを設定します。
「外観」→「カスタマイズ」→「ヘッダー」に移動して、カスタムボタンを設定します。
- アイコンクラス名：「icon-phone」を入力
- アイコン下に表示するテキスト：「ご予約、電話する」など（空欄でもOK）
- カスタムボタン背景色：お好きな色を選択（メインカラーなど）
- リンク先URL：「tel:0312345678」を入力（ハイフンなし）
※詳しい設定手順は → こちら をご参照ください。
次に、スマホ用の下部固定メニューを作成します。
カスタマイザーで「メニュー」を選択し、「メニューを新規作成」をクリックします。
以下の設定を行います。
- 「メニュー名」の欄に「スマホ下部メニュー」と入力
- 「固定フッター（SP）」にチェックを入れる
- 「次」ボタンをクリック
- 「＋項目を追加」をクリック
右側のメニュー項目から、「お問い合わせ」と任意の項目を追加していきます。
ここでは、「ホーム、アクセス、LINE予約、お問い合わせ」をメニューに設定しました。
メニューに使用するアイコンを SWELLで使えるアイコンの一覧 から選び、クラス名をコピーします。
メニュー項目（「お問い合わせ」など）をクリックして、「説明」欄に先ほどコピーしたアイコンのクラス名を貼り付けます。
メニューの設定が終わったら、「公開」ボタンをクリックして設定を保存します。
実際にスマホでサイトを開いて、固定メニューが正しく動作することを確認しましょう。
これで、スマホユーザーは画面下部の固定メニューからお問い合わせに簡単にアクセスできるようになりました。
続いて、もう１つの方法を解説します。
スマホ用の設定：方法２（開閉メニュー内に「お問い合わせ」表示）
この方法では、スマホで開閉メニューを開いたときに、メニュー項目の一番下にお問い合わせボタンが表示されます。
▼完成イメージ
（開閉メニューを開いた時）
まずは、スマホのヘッダーに電話アイコンを設定します。
「外観」→「カスタマイズ」→「ヘッダー」に移動して、カスタムボタンを設定します。
- アイコンクラス名：「icon-phone」を入力
- アイコン下に表示するテキスト：「ご予約、電話する」など（空欄でもOK）
- カスタムボタン背景色：お好きな色を選択（メインカラーなど）
- リンク先URL：「tel:0312345678」を入力（ハイフンなし）
※詳しい設定手順は → こちら をご参照ください。
管理画面から「ブログパーツ」→「投稿を追加」をクリックします。
タイトル欄に「開閉メニュー お問い合わせ」など、分かりやすい名前を入力します。
エディタの「+」ボタンをクリックし、「SWELL」カテゴリから「SWELLボタン」を選択します。
SWELLボタンブロックが追加されたら、以下のように設定します。
- ボタンテキストお問い合わせ
- ボタンのリンク先：お問い合わせページのURL
- スタイル：ノーマル
- ボタンサイズ：「小」または「標準」
- カラー：お好みの色
- アイコン位置：「左」
- アイコン選択：「メールアイコン」を選択
「公開」ボタンをクリックして、ブログパーツを保存します。
ブログパーツの一覧画面に戻り、[blog_parts id=”123″]のような呼び出しコードをコピーします。
次に、作成したブログパーツをヘッダーに表示するため、ウィジェット機能を使って設置していきます。
管理画面の左メニューから「外観」→「カスタマイズ」をクリックします。
カスタマイザーのメニューから「ウィジェット」→「スマホ開閉メニュー下」をクリックします。
「+ウィジェットを追加」ボタンをクリックし、「カスタムHTML」ウィジェットを選択します。
カスタムHTMLウィジェットの内容欄に、先ほどコピーしたブログパーツの呼び出しコードを貼り付けます。
※スマホプレビューに切り替えて開閉メニューを開き、お問い合わせボタンが表示されていることを確認しましょう。
「公開」ボタンをクリックして設定を保存します。
これで、スマホの設定もすべて完了です。
PCでは横並びボタン、スマホでは電話アイコン＋開閉メニュー内のお問い合わせボタンで、どのデバイスからでもお客様が簡単に連絡できる環境が整いました。
お疲れ様でした！
まとめ
今回は、「SWELLのヘッダーに電話番号を表示する方法」についてご紹介しました。
SWELLのブログパーツとウィジェットを使えば、コードなしでも簡単に設置できるので、初心者の方でも手軽に導入できるのがポイントです。
もし設定に迷ったときは、WordPress無料サポートでもお手伝いできますので、気軽にメッセージを送ってくださいね。
お店やサロンのサイトは「すぐに連絡できること」がとても大切。
電話番号やお問い合わせボタンを分かりやすく設置しておくと、お客様も安心してコンタクトできます。
ぜひ今回の手順を参考に、あなたのサイトにも取り入れてみてくださいね。
\ 関連記事もあわせてチェック！ /
