検索
Close this search box.

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 白の透明

コメントを残す

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

エレメンター 罫線

記事の見出し番号

関連記事

見出し装飾CSS

投稿記事の見出しを CSS で装飾できれば、編集作業は大幅に削減で、また、ページの見栄えも良くなる。

CSSで自動で見出し番号 その2

見出し番号をCSSで、ブロックエディタ投稿は動作するが、Elementorで投稿するとうまく動作しないので原因を探る

Elementor で CSS

Elementorで CSS を使う時のポイントは CSS のクラスや ID を使って適応範囲をコントロールするのがポイントになる

最新記事

iframe

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

例)スクロール効果

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

Scroll Snap

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

スクロール効果 横移動

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