ブログを書く際に、見やすい文章を助ける様々な装飾。
記事内の文章の回りを枠線で囲む方法をご紹介します。


サンプル作ったのでコピペして使ってください!

使い方は、下記のタグをブログの記事を書くときに使うだけ!
ライブドアブログの場合は、エディタをHTMLタグ編集にして使います。

<div align="center"><div style="text-align:left;padding:10px;border-color:#f1f1f1;border-width:4px;border-style:dotted;width:90%;background:#Fcfcfc;">ここに文章を入れる</div></div>

実際にはこうなります。

 ↓   ↓


ここに文章を入れる


他にもいろいろ作って見たので下記を参考に使ってみてください!


背景が白で点線


<div align="center"><div style="text-align:left;padding:10px;border-color:#f1f1f1;border-width:4px;border-style:dotted;width:90%;background:#ffffff;">ここに文章を入れる</div></div>



背景が白で点線が濃い


<div align="center"><div style="text-align:left;padding:10px;border-color:#cccccc;border-width:4px;border-style:dotted;width:90%;background:#ffffff;">ここに文章を入れる</div></div>



背景が白で点線がちょっと細い


<div align="center"><div style="text-align:left;padding:10px;border-color:#f1f1f1;border-width:2px;border-style:dotted;width:90%;background:#ffffff;">ここに文章を入れる</div></div>



背景が白で点線が濃くてちょっと細い


<div align="center"><div style="text-align:left;padding:10px;border-color:#cccccc;border-width:2px;border-style:dotted;width:90%;background:#ffffff;">ここに文章を入れる</div></div>



背景が白で直線が濃くてちょっと細い


<div align="center"><div style="text-align:left;padding:10px;border-color:#cccccc;border-width:2px;border-style:solid;width:90%;background:#ffffff;">ここに文章を入れる</div></div>


背景が白で直線が濃くて細い


<div align="center"><div style="text-align:left;padding:10px;border-color:#cccccc;border-width:1px;border-style:solid;width:90%;background:#ffffff;">ここに文章を入れる</div></div>



背景が白で直線が赤色で太い


<div align="center"><div style="text-align:left;padding:10px;border-color:#ff0000;border-width:5px;border-style:solid;width:90%;background:#ffffff;">ここに文章を入れる</div></div>



背景が白で上下が点線、左右が直線で赤色


<div align="center"><div style="text-align:left;padding:10px;border-color:#ff0000;border-width:2px;border-style:dashed solid;width:90%;background:#ffffff;">ここに文章を入れる</div></div>



背景が黒でテキストが白


<div align="center"><div style="text-align:left;padding:10px;width:90%;background:#000000;"><font color="#FFFFFF">ここに文章を入れる</font></div></div>



背景がグレーで直線が黒でテキストが黒


<div align="center"><div style="text-align:left;padding:10px;border-color:#000000;border-width:5px;border-style:solid;width:90%;background:#cccccc;"><font color="#000000">ここに文章を入れる</font></div></div>


適当にご利用ください!