アメブロの記事で文章を枠線で囲みたいとき（罫線で囲み・枠囲みしたい場合）

アメブロの記事内に、枠線（囲み罫線）を付けたい方へ

※以前の内容に、さらにサンプルを追加しました！
かわいい枠、明るめで優しい色合いの枠など。
ぜひ、ご参考にしてみてください。


下にある【HTMLタグ】というものを、コピペするだけで
すぐに出来てしまいますよ。

アメブロの記事内で、文章を枠（罫線）で囲む方法

【１】編集画面の表示変更

「ブログを書く」を開きます。編集の画面の表示を変えます。
標準エディタ、タグ編集エディタ、それぞれ3パターンありますので、
下図のように、変更して準備しましょう♪

編集画面の左下、「HTML表示」にして、タグを見える状態にします。

【２】タグをコピー

まずは、HTMLのタグというものをコピーします。
色々なタイプを、用意しましたので、ぜひ下のサンプルの中から、お好みの枠や色を選択してください。
（このブログは幅が広いので、横が大きく見えますが、幅はブログに合うようになっています）

この解説の【１】～【５】の説明の後に、
アメブロ専用の囲い枠のデザインを置いています。そこのコード部分をコピーしてください。

【３】編集画面内に貼り付けします

編集する画面の中に、さきほどの２でコピーしたHTMLのコードを、
貼り付け（ペースト）します。

【４】表示を元に戻します

最初に【１】で変更した表示を、戻して、見た目を確認します。

「通常表示」にします。

【５】文字を入れます

枠内の文字を（サンプルの文字「ここに文章を入れられます」）から、
ご自由に変更してください。

 

囲み枠のデザイン

 

ふんわり枠

<div style="background: #fffdfb;padding: 30px;line-height: 1.5em;box-shadow: 0px 0px 5px 5px #f2e3e0;;-webkit-border-radius: 8px;font-size: 1rem;color: #664a4a;">ここに文章を入れられます</div>


<div style="background: #fff7f7; padding: 30px; line-height: 1.5em; box-shadow: rgb(242, 227, 224) 0px 0px 5px 5px; border-radius: 8px; font-size: 1rem; color: rgb(102, 74, 74);">ここに文章を入れられます</div>




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





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





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






<div style="background:#ff85a5; border:1px solid #ff85a5; padding-left:10px;"><font style="color:#ffffff; font-weight:bold;">タイトル（書き換えてご使用ください）</font></div><div style="border:1px solid #ff85a5; padding:10px; font-size:1em;">ここに文章を入れられます</div>

　タイトル　

ここに文章を入れられます

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





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






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





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





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




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




<div style="background:#fff5f5; padding:10px; border:1px solid #fee3e3; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;">ここに文章を入れられます</div>





<div style="padding:10px; border:1px solid #949494; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;">ここに文章を入れられます</div>




<div style="padding:10px; border:1px solid #949494; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; box-shadow: 5px 5px 5px #ccc;">ここに文章を入れられます</div>

【６】色を変えたい方

線や背景の色の設定部分ですが、上記のHTMLソースの中で、

　　#○○○○

と書かれている部分、シャープ記号（＃）の後ろの６桁の英数字が、色を決めている部分になります。

お好きな色にしたい場合は、こちらを参照にしてみてください。
原色大辞典

＃の後ろの６桁の番号を入れ替えると、お好きな色にも変更可能です！！

 

制作のご感想

ご感想
ご感想

 

▼アメブロカスタマイズ承ります