スマートフォン用の電話番号ボタンを変更する
スマートフォン表示の電話ボタンに設定していた電話番号から新しい番号になるので
設定してある番号を変更したい。
ホーム ≫ スマートフォン用電話ボタンの変更方法 ≫
[ケーススタディ]
スマートフォン用の電話番号ボタンを変更する
事前準備
ご準備いただくものは変更後の電話番号とWEB上のメモ帳のみです。
| 電話番号 | 0120−55−4682 |
1.自由HTMLを編集する
スマホ版下部の電話ボタンは自由HTMLにHTML形式で記述されています。
編集する際は「自由HTML」と記載のあるグレーのエリアをクリックします。
自由HTMLは1カラムの場合、画像の様にサイトの下部に、2カラムの場合は右部、左部に設置されているサブメニューの下部と上部にございます。 画像は1カラムの表示です。
1カラムとはサイトのメイン部分の右にも左にもサブメニューが無いサイトレイアウトで、2カラムはサイトのメイン部分の右か左にサブメニューがあるレイアウトです。
今回編集するのはスマホ用の電話番号ボタンなのでスマホ用HTMLに注目します。
2.バックアップの作成
ここで念の為バックアップを取ります。
バックアップは間違えてソースを崩してしまった時の保険です。
デザインを崩してしまった時には、崩れたデザインの記事をソースモードに切り替え、ソースを全て消し、改めてバックアップしたソースコードを貼り付ければ状態を元に戻すことができます。
まず、ソースコードを全選択します。
テキストエリア内に点滅する縦棒「｜」が出ている状態で
Windowsであればctrl+a（ctrlキーを押しながらa）
Macであればcommand+a（commandキーを押しながらa）
を押して全選択状態にします。
そのまま青く選択された部分で右クリック→コピー、
もしくはWindowsであればctrl+c（ctrlキーを押しながらc）
Macであればcommand+c（commandキーを押しながらc）
で選択した部分をコピーします。
先ほどコピーしたソースをPC上のメモ帳に貼り付けます。
Windowsであればctrl+v（ctrlキーを押しながらv）
Macであればcommand+v（comandキーを押しながらv）
で選択した部分を貼り付けます。
貼り付けたらバックアップ完了です。
せっかくバックアップをとっても削除してしまうと意味がないので、一時的にPCに保存しておきましょう。
編集に戻ります。 スマホ用HTMLに入力されているコードを画像のように変更します。
変更箇所は電話番号のみです。 それ以外のソースコードを変更してしまうと表示が崩れる場合がございますので お気をつけてください。
変更し終えたら「登録」をクリックします。
3.プレビューで確認する
右上の「プレビュー」をクリックし、実際に表記が修正されているか確認してください。 スマートフォンで実際に電話が掛けられるか確認する場合は 一度ホームページにBasic認証をかけてから公開し、スマートフォンからご確認ください。
何故Basic認証をかけるの？
Basic認証をかけていなければ当たり前ですが、公開作業を行った場合、通常通り公開されます。 公開された際にもしも間違った番号になっていたり、電話がかからないということがあると お客様に不信感を持たれるきっかけになってしまいます。
そういったチャンスロスを防ぐためにも今回はBasic認証をかけて確認しましょう。
ご確認いただきよろしければBasic認証を解除し、「公開」をクリックしてください。
