Return to site

【ブログ技】文章を枠で囲むテンプレート

そのままコピーして使えます

· アメブロ,ブログカスタマイズ

こちらのページにはテンプレートを載せます。

前回の続きになりますのでこちらもチェックしてみてくださいね。

http://pandalabo.strikingly.com/blog/160a4516774

四角い枠

ホットピンク hotpink #FF69B4

<div style="border: 1px dashed #FF69B4; padding: 15px;">ここに文章をいれてください</div>

濃いピンク deeppink #FF1493

<div style="border: 1px dashed #FF1493; padding: 15px;">ここに文章をいれてください</div>

濃いオレンジ darkorange #FF8C00

<div style="border: 1px dashed #FF8C00; padding: 15px;">ここに文章をいれてください</div>

水色 deepskyblue #00BFFF

<div style="border: 1px dashed #00BFFF; padding: 15px;">ここに文章をいれてください</div>

スマホからの方は見えにくいかもしれませんが細かい点線です。

※点線は見えにくいので濃い色を使ったものがおすすめです。

濃いピンク deeppink #FF1493

<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #ff1493;">ここに文章をいれてください</div>

濃いオレンジ darkorange #FF8C00

<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #FF8C00;">ここに文章をいれてください</div>

水色 deepskyblue #00BFFF

<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #00BFFF;">ここに文章をいれてください</div>

濃いピンク 

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #FF1493;">ここに文章をいれてください</div>

濃いオレンジ 

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #FF8C00;">ここに文章をいれてください</div>

水色 deepskyblue

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #00BFFF;">ここに文章をいれてください</div>

角が丸い枠

ピンク

<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #FF69B4; border-radius: 5px;">ここに文章を入れてください</div>

濃いピンク
<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #FF1493; border-radius: 5px;">ここに文章を入れてください</div>

濃いオレンジ
<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed#FF8C00; border-radius: 5px;">ここに文章を入れてください</div>

水色

<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed#00BFFF; border-radius: 5px;">ここに文章を入れてください</div>
 

背景の色を付けたい場合

※長い文章を書くときには濃い色は見えづらいのでおすすめしません。

ピンク

<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; background-color: #ffd6d6;">ここに文章を入れてください</div>

イエロー
<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; background-color: #ffffd1;">ここに文章を入れてください</div>

グリーン
<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; background-color: #d1ffd1;">ここに文章を入れてください</div>

長くなってしまったのでこの辺で終わろうと思います。

リクエストがあれば追加していきます。

All Posts
×

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!

OKSubscriptions powered by Strikingly