セルフルの上級者機能に追加された「カスタムCSS」
この機能を利用した裏技をこのブログでは紹介しています🤗
完成図
デザインテーマが「Solid」の場合反映された文字の様子はこちら。
文字と文字の間隔や文字の大きさが、多少変わっていることがわかるかと思います。
対応しているサイトデザイン※
全てのデザイン
※サイトデザインとは、セルフルの管理画面左にある「サイト設定」に入った画面の一番上「サイトデザイン」で選択しているデザインのことです。
変更方法
下記のコードをコピーして「上級者設定」の中にある「カスタムCSS」をクリックしたページに貼り付けしてください。
文字の調整をする
/* -------- 文字の調整 -------- */
#contents {
font-size: 17px; /* -- 文字サイズ -- */
line-height: 1.8; /* -- 行間 -- */
letter-spacing: 0.1em; /* -- 文字間 -- */
font-feature-settings: "palt"; /* -- 自動文字詰め -- */
}
細かくカスタマイズするとき
それぞれ、font-size:／line-height: 1.8;／letter-spacing:の右側にある数字を変更することで細かい調整が可能となります。ただし、読みやすいサイズや行間がありますので、以下の設定目安を参考にしてみてくださいね。
設定目安
・文字サイズ：15px～18px
・行間：1.6～1.8
・文字間：0.05em～0.1em
・font-feature-settings（入れておくと文字間隔が自動調整されて読みやすくなる）
