【SWELL】ヘッダーの右上に電話番号やお問合せボタンを配置する方法

広告:ページ内にてアフィリエイト広告を利用しています。

ヘッダー右上の電話番号ボタン

お店のサイトなどでは電話番号を読者がわかりやすい場所に配置したいですね。

SWELLではヘッダーの中に電話番号(や、お問合せ)ボタンを配置することができます。

ポイント

本記事では、

SWELLでヘッダーに電話番号ボタンを配置する方法を解説します。

読者が使いやすいサイトになりますね

本記事の情報は SWELL(バージョン: 2.7.6.2)にて確認しています。今後のバージョンアップなどで動作が変わる可能性があります。

SWELL おすすめサンプルページ
おしゃれサイト

\SWELL でオシャレサイトを作る方法は こちら をクリックしてください/

目次
PR

電話番号ボタンを配置したサンプル

ヘッダー右側に電話番号ボタン

飲食店のサイトや美容院など特にお店のサイトでよく利用されることが多いです。上部のヘッダーの中(右側)に電話番号ボタンやメールお問合せボタンを配置します。

電話番号を配置したサンプル

またボタンを複数個(電話番号ボタン+お問合せボタンなど)を並べることもできます。

ボタンを2個並べた例

電話でのお問合せと、メールでのお問合せの両方で受け付ける場合などに便利ですね。

ヘッダーにボタンを配置する方法

電話番号ボタンを配置する方法

実際にボタンを配置してみましょう。

■ Step.1 ブログパーツでボタンを作る

ブログパーツを使ってボタンを作ります。

ブログパーツ作成画面

WordPress の管理画面から「ブログパーツ」を選択して、ブログパーツを作ります。「呼び出しコード」は後ほど利用するのでメモっておきます。

電話番号ボタンをSWELLボタンで作る

「SWELL ボタン」ブロックを使って電話番号ボタンを作ります。アイコンは、右側のブロックの設定から「アイコン選択」で電話番後やメールなどのアイコンを選ぶことができます。

電話番号リンクの設定

電話番号をリンクとして設定する場合は、「tel:」の後に「電話番号」を入力します。

tel:090-1234-5678

「tel:」を使うことでスマホなどでクリックした場合に自動的に電話アプリと連携します。

ポイント

問い合わせボタンを作る場合は、「メール」のアイコンと、お問合せページへのリンクを設定しましょう。

■ Step.2 ヘッダー内部にブログパーツを設定する

作成したブログパーツをヘッダー内部に設定します。

ヘッダー内部にテキストウジェットを配置し電話番号用のブログパーツを設定するサンプル

WordPress の管理画面から「外観」→「ウジェット」を選択します。

  • 「ヘッダー内部」に「テキストウジェット」を設定する
  • 「テキスト」タブに、ブログパーツの「呼び出しコード」を入力する

右上に電話番号ボタンが表示されていれば、完成です。

複数個のボタンを並べる方法

複数個のボタンを配置する方法

すこしの工夫で複数個のボタンを並べることも可能です。実際に複数個ボタンを配置してみましょう。

■ Step.1 ブログパーツで複数個ボタンを作る

ブログパーツを使ってボタンを作ります。

カラムブロックを配置する

「カラムブロック」を「50 / 50」で配置します。

ブログパーツにボタンを2個配置するサンプル

各々のカラムに「SWELL ボタン」ブロックを配置します。

■ Step.2 ヘッダー内部にブログパーツを設定する

作成したブログパーツをヘッダー内部に設定します。

ヘッダー内部にテキストウジェットを配置し電話番号用のブログパーツを設定するサンプル

WordPress の管理画面から「外観」→「ウジェット」を選択します。

  • 「ヘッダー内部」に「テキストウジェット」を設定する
  • 「テキスト」タブに、ブログパーツの「呼び出しコード」を入力する

ボタンを複数個並べると、ボタン内部のテキスト(主に電話番号)が改行する場合があります。
次の工程で改行を禁止します。

■ Step.3 ボタン内部の改行を禁止する

ボタン内部の改行禁止は、CSS を使って設定します。

クラス名の設定

ボタンにクラス名を設定する

ブログパーツで作成した「SWELL ボタン」に対して、改行させたくないボタンの「追加 CSS クラス」に、任意のクラス名を入力します。

ポイント

本サンプルでは、任意のクラス名「my-button-nobr」を設定しています。すでにクラス名文字列が入力されている場合は、半角スペースで区切って追加で入力します。

CSSの設定

CSSを追加する画面

WordPress の管理画面から「カスタマイズ」→「追加 CSS」を選択します。

  • CSS を追加する

追加する CSS は以下です。

.my-button-nobr{
  white-space : nowrap;
}

先ほどボタンに設定したクラス(例:.my-button-nobr)に対して改行禁止「white-space : nowrap;」を指定しています。

右上のボタンで改行が修正されていれば成功です。

PR

まとめ:電話番号やお問合せボタンを配置する方法

ヘッダーボタンまとめ

お店のサイトなどでは電話番号を読者がわかりやすい場所に配置したいですね。

SWELLではブログパーツでボタンを作成し、ヘッダーの中に埋め込むことで、電話番号(や、お問合せ)ボタンを配置することができます。

複数個のボタンを配置した場合にボタン内のテキストが改行される場合は、CSSを使って改行禁止を設定することで回避が可能です。いろいろな表現を工夫して、ぜひ、おしゃれなサイトを作ってくださいね。

SWELL おしゃれサイト作り方

SWELL の利用方法などについてココナラにて「支援作業」を販売しております。

よかったらご利用くださいませ。

PR

PR

一番上に戻る(Back to the initial position on click.)

トップページ(Home.)

PR
Amazon でお買い物
楽天市場でお買い物
広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記

この記事が気に入ったら
フォローしてね!

目次