休業告知のデザインを変える方法

休業告知のデザインを変える方法

セルフルの上級者機能に追加された「カスタムCSS」
この機能を利用した裏技をこのブログでは紹介しています🤗

完成図

サイトデザインが「Classic」の場合の完成図はこちら。
こちらのように、院情報設定の休業告知で設定した文言のデザインを変更することができます。

対応しているサイトデザイン※

すべて

※サイトデザインとは、セルフルの管理画面左にある「サイト設定」に入った画面の一番上「サイトデザイン」で選択しているデザインのことです。

変更方法

基本編

カスタムCSSに以下のコードを入れる

/* -------- 休業告知 -------- */

#global-header #announcement {
  font-weight: normal;
  background: none;
  border: none;

  color: #cc1100; /* 文字色 */
  font-weight: bold; /* 太字 */
  font-size: 15px; /* -- 文字サイズ -- */
  line-height: 1.9; /* -- 行間 -- */
  letter-spacing: 0.1em; /* -- 文字間 -- */
  font-feature-settings: "palt"; /* -- 自動文字詰め -- */

  border-width: 4px; /* 枠線の太さ */
  border-style: double; /* 枠線のスタイル(solid,double,dotted,dashed) */
  border-color: #cc1100; /* 枠線の色 */

  padding: 16px 3%; /* 余白 */
  background-color: #ffffff; /* 背景色 */
}

※ 枠線のスタイルは好みに合わせ、solid(1本線),double(2本線),dotted(点線),dashed(破線)から選べます。もし、点線に変更したい場合は以下のような設定になります。

border-style: dotted; /* 枠線のスタイル(solid,double,dotted,dashed) */

おまけ 

改行を入れたい場合は、院情報設定の休業告知に文言を入れるとき、改行したいところで<br>を入力すると改行できます^^

例:
休業期間
2022年12月29日(火)~2023年1月4日(月)

と表示したい場合は、院情報設定で、

休業期間<br>2022年12月29日(火)~2023年1月4日(月)

と入力します!

アニメーションカテゴリの最新記事