【コピペで OK】テキストを枠で囲む(引用部分を作る)サンプル【新エディタ対応】 | アメブロデザイン制作サービス@シンクマックス

アメブロデザイン制作サービス@シンクマックス

オリジナルデザインで印象に残るビジネスブログを作りましょう!

前回の記事でアメブロの本文中に引用(テキストを枠で囲んだ部分)を作る方法について書きましたが、枠はいろいろなパターンを作ることができます。

これもコピペで使えますので、お気に入りのタイプを使っててみてください。

- * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - - * - * - * - * - * -* - * - * -

まずは定番のひとつ、ドットの枠です。下のテキストをコピペしてくださいね。

<div style="border: 1px dashed #CCCCCC; padding: 15px;">枠で囲みたいテキストを入れます</div>

次は実線の枠です。しっかり枠が付いた印象になりますね。

<div style="border: 1px solid #000000; padding: 15px;">枠で囲みたいテキストを入れます</div>

背景色を設定することもできます。

<div style=" background:#e9f3fe; border:none; padding: 15px;">ここに文章を入れられます</div>

- * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - - * - * - * - * - * -* - * - * -

今回は、枠線を3種類と背景色を1種類紹介しましたが、枠線の色を変える、
また、背景色を好きなものに変更することもあまり難しくなくできます。
これは次の記事で解説していきます。