SIRIUS2 ver.1.230にて追加搭載されたのが＜電話番号の挿入＞機能です。
この機能を使うとスマホ上で電話番号をタップ→発信画面に移動させることができます。
設定画面
記事装飾メニューの［店舗情報］→【電話番号】を選択すると下のような設定画面が立ち上がります。
とりあえず電話番号と説明文を入れてみます。
赤枠内の『リンク』をONにするとスマホ上で電話番号をタップ→発信画面に移動します。
ただの電話番号表示だけにしたいならOFFにしておきます。
OKをクリックで確定させると編集画面内には下のような専用コードが自動生成されます。
そして実際の表示がこちら。
文字の色も変えられます。
赤枠内の『スマホ白色固定』はONにすると文字色が”白”になります。
背景色が暗い時用でしょうか。
文字サイズも変えられます。
画像を見てわかるようにサイズが変わるのは電話番号の数値のみで説明文は固定サイズのようです。
また最小は18pxからで最大でも32pxまでしか変えられません。
ということでこのあといくつかカスタマイズのやり方をご紹介します。
カスタマイズ
説明文を太字にしたい
コードを直接編集することで対応可能です。
『説明文』のテキストを範囲選択→記事装飾メニューの［強調（Bのアイコン）］をクリックします。
これでコードが下のように変更になります。
実際の表示でもちゃんと太字になってます。
専用コードをダブルクリックして設定画面を出してみると該当箇所にもコードが反映されてます。
なのでHTMLに詳しい方は直接ここで編集してもいいでしょう。
説明文だけテキストサイズを変えたい
上のやり方同様、記事装飾メニューの［装飾］にてフォントサイズを変更してみます。
こちらもちゃんと反映されます。
説明文を上に表示したい
デフォルトでは電話番号の下に説明文が表示されます。
これを反対の位置関係にするには下のコードの青枠エリアのコードを赤枠エリアの位置に移動します。
電話番号を32px以上で表示したい
デフォルト設定では文字サイズは18px～32pxまでしか変更できません。しかしながら電話番号をもっと大きくしたいというケースもあるでしょう。
こちらに関してはやや面倒なカスタマイズにはなりますが、できます。
やり方としてはまずは適当に文字サイズを調整した設定で保存します。
自動生成されたコード内の赤下線部分が電話番号表示用のHTMLコードになるので、文字サイズ設定タグの「style="font-size:18px;"」のところを今回はわかりやすいように「50px」に変更してみます。
その結果がこちら。電話番号が大きくなりました。
ただ電話アイコンのサイズは変わらずです。
電話アイコンに関してはコード上での変更が効きません。
もしも電話アイコンのサイズも大きくしたいということであれば下のスタイルをユーザー指定スタイルなどに貼り付けます。
今回は電話番号用テキストサイズと同じ「50px」に設定してみます。
.tel-number::before {
width: 50px;
height: 50px;
}
そして実際のブラウザ表示がこちらです。
電話アイコンも確かに大きくなりましたが、ちょっと位置が下がり気味ですね。
そこであらたに「margin-top」というスタイルを一個足します。
数値は「-20px」とマイナスの数値を付けてみます。
.tel-number::before {
width: 50px;
height: 50px;
margin-top: -20px;
}これで表示したのがこちら。
今度は列が揃いました。
電話アイコンだけ少し小さくしたい場合は「width」と「height」の数値を少し小さくしてやります。
試しに「35px」にして表示させたのがこちら。いい感じのレイアウトになりました。
カスタマイズしたコードをダブルクリックして設定画面を出すと、一部のカスタマイズ部分はデフォルト設定に戻ってしまう場合があります。
そのため設定画面を出すときは事前にカスタマイズしたコードをコピーして保管しておくとよろしいかと。
『電話番号の挿入機能』の関連記事
-
＜ヘッダーアニメーション＞機能の詳しい使い方。 -
SIRIUS2の＜画像最適化機能＞についての紹介ページ。 -
SIRIUS2の＜スマホ固定フッターメニュー＞機能についての詳細ページ。 -
SIRIUS2で用意されてるキャラクター画像についての詳細ページ。 -
SIRIUS2の＜PR表記＞についての紹介ページ。 -
SIRIUS2の1カラムLP向け＜ブロック設定＞についての詳細ページ。 -
SIRIUS2のトップページ表示用＜スライダー＞の使い方についての詳細ページ。 -
SIRIUS2のサイト全体の＜レイアウト設定＞についての詳細ページ。