文字の間に学習ノートのような罫線を入れる
ホームページを学習ノートのような罫線を書いて、アナログチックなページを作りたいとする。
この場合、フォントも手書き風にすると雰囲気が良くなるけどね。
テキストエディターに罫線を入れるCSS
.elementor-widget-text-editor {
background-image:
repeating-linear-gradient(
#cdc ,
#cdc 1px,
#ffffff00 1px,
#ffffff00 35px
);
}
CSSの内容を簡単に説明
.elementor-widget-text
Elementor で使用する テキストエディター ウィジェットの CSS クラスです。
repeating-linear-gradient
角度 デフォルト 180度なので省略 （ex : 180deg）
#cdc , #cdc 1px , – 始点から1px地点までを #cdc にする。
#ffffff00 1px , #ffffff00 35px , – 1pxから35px地点までを #ffffff00 にする。
#cdc 薄いみどり色
#ffffff00 白の透明（背景色になる）
段落の間隔は 35ピクセル
Post Content の カスタム CSS
ポストコンテンツ全体のテキストエディターに罫線を入れたいので
Post Content -> 高度な設定 -> カスタムCSS
カスタムCSSに
.elementor-widget-text-editor {
background-image:
repeating-linear-gradient(
#cdc ,
#cdc 1px,
#ffffff00 1px,
#ffffff00 35px
);
}を挿入、コピペする。
罫線と文字間隔をそろえる
罫線の間に文字を入れるには縦方向の間隔を考えれば良いことになる。
CSS側の間隔が35px に設定したのであれば、本文の段落間隔も 35px にすれば良い。
テキストの文字間隔
テーマによって段落間隔は異なる可能性があるが、
サイト設定 -> H1 タイポグラフィ
段落間隔 -> 35 px （罫線の数値に合わせる）
タイポグラフィ -> 本文の行の高さ -> 35px [ここも罫線の数値に合わせる）
動作確認
カスタムCSS に上記の設定を入れて、本文の文字の「行の高さ」と「段落間隔」を設定すると、行間に沿って罫線を入れることができた。
ここでは、罫線の色がはっきりするために
#d55
に変更してある。
罫線の間隔は 35px にしてあるので、文字の間隔、段落の間隔を35pxに設定してあります。
手書き風フォントは、Zen Kurenaido です。
罫線を入れた時は、こんな手書き風フォントでも合うように思います。
明治29年に開設された灯台。海上より146ｍの断崖上に立ち、東シナ海を行き交う船の指針になってきました。灯台の近くまで観光道路が整備され、白亜の灯台を間近で見ることができます。光は29.5海里（約55km）の彼方まで届くとされています。
花崗閃緑岩はどのようにしてできたのでしょうか？
その火山の地下数キロに高温のマグマがあって、80万年くらいかけてゆっくり固まり、今から約120万年前に完全に固まってしまいました。 これが「滝谷花崗閃緑岩」です。 つまり、地下深くにあったマグマだまりが、約120万年ほどで、露出したというわけです。 上昇するのも速かったということを意味します。
手書き風フォントは、Yuji Shuku です。
罫線を入れた時は、こんな手書き風フォントでも合うように思いますが、目が慣れるまでは、少し読みづらいかもしれません。
明治29年に開設された灯台。海上より146ｍの断崖上に立ち、東シナ海を行き交う船の指針になってきました。灯台の近くまで観光道路が整備され、白亜の灯台を間近で見ることができます。光は29.5海里（約55km）の彼方まで届くとされています。
花崗閃緑岩はどのようにしてできたのでしょうか？
その火山の地下数キロに高温のマグマがあって、80万年くらいかけてゆっくり固まり、今から約120万年前に完全に固まってしまいました。 これが「滝谷花崗閃緑岩」です。 つまり、地下深くにあったマグマだまりが、約120万年ほどで、露出したというわけです。 上昇するのも速かったということを意味します。
フォントは、WEBサイトでよく使われている Noto Sans です。
罫線を入れた時は、こんなフォントでも合うように思います。
明治29年に開設された灯台。海上より146ｍの断崖上に立ち、東シナ海を行き交う船の指針になってきました。灯台の近くまで観光道路が整備され、白亜の灯台を間近で見ることができます。光は29.5海里（約55km）の彼方まで届くとされています。
花崗閃緑岩はどのようにしてできたのでしょうか？
その火山の地下数キロに高温のマグマがあって、80万年くらいかけてゆっくり固まり、今から約120万年前に完全に固まってしまいました。 これが「滝谷花崗閃緑岩」です。 つまり、地下深くにあったマグマだまりが、約120万年ほどで、露出したというわけです。 上昇するのも速かったということを意味します。
フォントは、Sawarabi Gothic です。
罫線を入れた時は、フォントでも合うように思います。とても読みやすいですね。
明治29年に開設された灯台。海上より146ｍの断崖上に立ち、東シナ海を行き交う船の指針になってきました。灯台の近くまで観光道路が整備され、白亜の灯台を間近で見ることができます。光は29.5海里（約55km）の彼方まで届くとされています。
花崗閃緑岩はどのようにしてできたのでしょうか？
その火山の地下数キロに高温のマグマがあって、80万年くらいかけてゆっくり固まり、今から約120万年前に完全に固まってしまいました。 これが「滝谷花崗閃緑岩」です。 つまり、地下深くにあったマグマだまりが、約120万年ほどで、露出したというわけです。 上昇するのも速かったということを意味します。
罫線と相性の良さそうなフォントを入れてサンプルを作ってみました。
どうでしょうか？
設定を
- 罫線の間のpx
- 文字間隔のpx
- 段落の間隔のpx
をそれぞれ同じ値にすれば、罫線のちょうど真ん中に文字列が位置する。
罫線があると視覚的に ちょっとだけだが読みやすくなる感じがするのは 私だけだろうか？
