フッターの情報をスマホで綺麗に見せるコツ

Cherieではフッター内に任意でテキストを入力できます。

デモでは、上記のようにサイト名や住所を設定しています。

また、スマホでは以下のように表示されます。

では、PCで以下のように表示されているものを、どのように調整しているのでしょうか。

フラワーデザインアトリエ ｜ Cherie
〒530-0000 大阪府大阪市なにわ町1-2-3 TEL.06-1234-5678

ただ入力するだけでは、以下のように表示されます。

電話番号が中途半端な位置で改行されてしまうんですよね。これでは不恰好なので、フッター情報の設定箇所に以下のように入力しています。

フラワーデザインアトリエ ｜ Cherie
〒530-0000 大阪府大阪市なにわ町1-2-3 <span>TEL.06-1234-5678 </span>

その上で、カスタムCSSに以下を記載しています。

@media screen and (max-width:800px) {
#footer_address span { display:block; }
}

電話番号の部分をspanタグで囲って、その部分をブロック要素に変更しています。ブロック要素として一塊になっているので、ワンセットで次の行に表示されるというわけです。

スマホでもコンテンツを見やすく美しく表示したい場合は、こういった設定方法を参考にしてみてください。

ちなみに本文内では、テーマに内蔵されている「a_break」というクラスを指定することで、同じ対策が可能です。
※フッターの情報欄は、エスケープ処理の都合上、直接スタイルを記述できないのでカスタムCSSで対応。