藤枝市・島田市・焼津市でホームページ制作・作成するならLIFESEEDSへ

今回は、CSSで便箋風なものを簡単に作れるように、説明していきたいと思います。ポイントで目立たせたい!少し注意を引きたい。という文章の時には、この便箋風なデザインにすることによって、他の文章との差別化を図れるのではないでしょうか。

では、いってみましょ~!

SPONSORED LINK

CSSで作る便箋風ライン01

この様にCSSで便箋風のラインを引くことが出来ます。

この「便箋風ライン01」は、線が点で出来ています。

少し目立たせたい部分などに使うと効果的ですね。果てしなく改行しても問題ありません。
スマホでも、PCでもタブレットでも大丈夫!コピーして使ってみてくださいね。

HTML

<div class="line01 bgred">
<p>この様にCSSで便箋風のラインを引くことが出来ます。<br />
この「便箋風ライン01」は、線が点で出来ています。<br />
少し目立たせたい部分などに使うと効果的ですね。果てしなく改行しても問題ありません。
スマホでも、PCでもタブレットでも大丈夫!コピーして使ってみてくださいね。</p>
</div>

CSS

.line01 p {
	line-height: 36px;
	background: url(/images/bg-note01.png) bottom;
	margin: 0;
	padding: 0;
}
.bgred {
	border: 1px solid #dddddd;
	background-color: #fcf8fb;
	margin: 30px 0;
	padding: 20px 40px 40px;
}

CSSで作る便箋風ライン02

この様にCSSで便箋風のラインを引くことが出来ます。

この「便箋風ライン02」は、線が4pxの線と2pxの空白で出来ています。

少し目立たせたい部分などに使うと効果的ですね。果てしなく改行しても問題ありません。
スマホでも、PCでもタブレットでも大丈夫!コピーして使ってみてくださいね。

HTML

<div class="line02 bgblue">
<p>この様にCSSで便箋風のラインを引くことが出来ます。<br>
この「便箋風ライン02」は、線が4pxの線と2pxの空白で出来ています。<br>
少し目立たせたい部分などに使うと効果的ですね。果てしなく改行しても問題ありません。 スマホでも、PCでもタブレットでも大丈夫!コピーして使ってみてくださいね。</p>
</div>

CSS

.line02 p {
	line-height: 36px;
	background: url(/images/bg-note02.png) bottom;
	margin: 0;
	padding: 0;
}
.bgblue {
	border: 1px solid #dddddd;
	background-color: #f8fbfc;
	margin: 30px 0;
	padding: 20px 40px 40px;
}
SPONSORED LINK

CSSで作る便箋風ライン03

この様にCSSで便箋風のラインを引くことが出来ます。

この「便箋風ライン03」は、線が3pxの線と4pxの空白で出来ています。

少し目立たせたい部分などに使うと効果的ですね。果てしなく改行しても問題ありません。
スマホでも、PCでもタブレットでも大丈夫!コピーして使ってみてくださいね。

HTML

<div class="line03 bggreen">
<p>この様にCSSで便箋風のラインを引くことが出来ます。<br>
この「便箋風ライン03」は、線が3pxの線と4pxの空白で出来ています。<br>
少し目立たせたい部分などに使うと効果的ですね。果てしなく改行しても問題ありません。 スマホでも、PCでもタブレットでも大丈夫!コピーして使ってみてくださいね。</p>
</div>

CSS

.line03 p {
	line-height: 36px;
	background: url(/images/bg-note03.png) bottom;
	margin: 0;
	padding: 0;
}
.bggreen {
	border: 1px solid #dddddd;
	background-color: #fbfcf8;
	margin: 30px 0;
	padding: 20px 40px 40px;
}

素材(点線)ダウンロード

上記であげた3つの背景(点線)素材をダウンロードできるように、用意しておきました。欲しい方はダウンロードして自由に使用してください♪

ダウンロードする。

SPONSORED LINK

まとめ

ポイントとなる部分や他の段落との差別化で、記事自体が読みやすくなります。ずらずら書いてあるよりも、ポイントを読みやすくすると離脱率も少なくなりますね。ということは、PV数も増えていくという事になります。

line01で使っている点線と、line03で使っている背景(緑色)の組み合わせでもしっかり表示しますので、好みの線と好みの色を使ってみてくださいね♪

簡単にコピーでつくれるので参考にしてください~!

では、bye!!

最近読まれている記事

エラー: 現在のテーマで WordPress Popular Posts を ajax 化することは出来ません。id 属性が before_widget から抜け落ちています (詳しくは、register_sidebar を参照してください)。.

プロフィール

こまいたつお
静岡県島田市でフリーランスとして活動するwordpressエンジニア・ホームページ制作・コンサルティングをしています。

中小企業・店舗のホームページ制作や集客コンサル・アドバイス、ブロガー・アフィリエイター様のWordPressサイトのカスタマイズなどのご相談を受けております。お仕事のご相談はお問い合わせページからお願いします。