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で対応。
