Elementor テキストエディターに罫線

Elementor のテキストエディターの文章に、ノート風に罫線を入れるCSSです。ちょっとアナログっぽい雰囲気になる。

テキストエディターに罫線

Elementor の テキストエディターに横の罫線を入れるには、

				
					.elementor-widget-text-editor {
  background-image:
  repeating-linear-gradient(
    #eee ,
    #eee 1px,
    #ffffff00 1px,
    #ffffff00 32px
  );
}
				
			

罫線の間に文字を入れるには間隔を考えれば良いことになる。

CSS側の間隔が32px に設定したのであれば、本文の文字間隔も 32px にすれば良い。

簡単な説明

.elementor-widget-text
Elementor で使用する テキストエディター ウィジェットの CSS クラスです。

repeating-linear-gradient
角度 デフォルト 180度なので省略 (ex : 180deg)
#eee , #eee 1px , – 始点から1px地点までを #eee にする。
#ffffff00 1px , #ffffff00 32px , – 1pxから32px地点までを #ffffff00 にする。

#eee 薄いグレー色
#ffffff00 白の透明

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

エレメンター 罫線

Elementor テキストエディターに罫線

関連記事

最新記事

iframe

iframeを使って、他サイトをページに表示させることができます。

例)スクロール効果

スクロールの効果のサンプルページです。印象に残るページの参考にしていただけると良いですね。Elementorより。

Scroll Snap

WEBページでスクロールを所定の位置で一旦止まるように設定することができると可読性が上がりそう。

スクロール効果 横移動

ページをスクロールさせると画像が横方向に移動させる。注目させたり違和感を感じさせる時に使える。