こんにちは。
『魅せるブログのつくり方』
アメブロカスタマイズ屋さん・WEB＆PCアドバイザーの海夢（みどり）です。
アメブロで記事を書くときによく使われるのが囲み枠（囲い枠）です。
告知記事を書いたり、目立たせたい内容を強調したり、記事にメリハリをつけるのにとても便利ですね。
いろいろな色の囲み枠がほしかったので、サンプルにまとめてみました。
よかったらコピペして使ってくださいね！
『新エディタ』ですとタグではなく、表示された枠を範囲指定してコピペして、『新エディタ』の「通常表示」にペースト（貼り付け）するだけで使用することもできます
（書式も同時にコピペしてしまうのでタグでコピペをおすすめします）
一番よく使われている角の丸い点線の囲み枠からサンプルとして出していきますね。
薄い四角の中のタグをコピーして、『HTML表示』のほうにペーストしてお使いください。
内容を記入するときには、『通常表示』にもどして記入してくださいね。
■濃いピンクの囲み枠・点線
■うすいピンクの囲み枠・点線
■黄色の囲み枠・点線
■オレンジの囲み枠・点線
■濃いグリーンの囲み枠・点線
■薄いグリーンの囲み枠・点線
■ブルーの囲み枠・点線
■薄いブルーの囲み枠・点線
■紫の囲み枠・点線
■ピンク×グレーの囲み枠・点線
■オレンジ×グレーの囲み枠・点線
■ブルー×グレーの囲み枠・点線
■水色×グレーの囲み枠・点線
■グリーン×グレーの囲み枠・点線
『魅せるブログのつくり方』
アメブロカスタマイズ屋さん・WEB＆PCアドバイザーの海夢（みどり）です。
アメブロで記事を書くときによく使われるのが囲み枠（囲い枠）です。
告知記事を書いたり、目立たせたい内容を強調したり、記事にメリハリをつけるのにとても便利ですね。
いろいろな色の囲み枠がほしかったので、サンプルにまとめてみました。
よかったらコピペして使ってくださいね！
『新エディタ』ですとタグではなく、表示された枠を範囲指定してコピペして、『新エディタ』の「通常表示」にペースト（貼り付け）するだけで使用することもできます
（書式も同時にコピペしてしまうのでタグでコピペをおすすめします）
一番よく使われている角の丸い点線の囲み枠からサンプルとして出していきますね。
薄い四角の中のタグをコピーして、『HTML表示』のほうにペーストしてお使いください。
内容を記入するときには、『通常表示』にもどして記入してくださいね。
■濃いピンクの囲み枠・点線
ここに内容を入れます。
<div style="background:#ffe0e9; padding:10px; border:2px dotted #ac0032; border-radius:10px;">ここに内容を入れます。<br></div>
■うすいピンクの囲み枠・点線
ここに内容を入れます。
<div style="background:#fce5e2; padding:10px; border:2px dotted #f29c97; border-radius:10px;">ここに内容を入れます。<br></div>
■黄色の囲み枠・点線
ここに内容を入れます。
<div style="background:#F9FEC5; padding:10px; border:2px dotted #FC0; border-radius:10px;">ここに内容を入れます。<br></div>
■オレンジの囲み枠・点線
ここに内容を入れます。
<div style="background:#F9FEC0; padding:10px; border:2px dotted #F90; border-radius:10px;">ここに内容を入れます。<br></div>
■濃いグリーンの囲み枠・点線
ここに内容を入れます。
<div style="background:#e0fff4; padding:10px; border:2px dotted #007a06; border-radius:10px;">ここに内容を入れます。<br></div>
■薄いグリーンの囲み枠・点線
ここに内容を入れます。
<div style="background:#edf2c5; padding:10px; border:2px dotted #c3d83f; border-radius:10px;"> ここに枠で囲みたい内容を入れます。<br> </div>
■ブルーの囲み枠・点線
ここに内容を入れます。
<div style="background:#DAE4FE; padding:10px; border:2px dotted #06C; border-radius:10px;">ここに内容を入れます。<br></div>
■薄いブルーの囲み枠・点線
ここに内容を入れます。
<div style="background:#eaf4fc; padding:10px; border:2px dotted #5eb7e8; border-radius:10px;"> ここに内容を入れます。<br> </div>
■紫の囲み枠・点線
ここに内容を入れます。
<div style="background:#EDF; padding:10px; border:2px dotted #96F; border-radius:10px;">ここに内容を入れます。<br></div>
■ピンク×グレーの囲み枠・点線
ここに内容を入れます。
<div style="background:#F6F6F6; padding:10px; border:2px dotted #F90; border-radius:10px;">ここに内容を入れます。<br></div>
■オレンジ×グレーの囲み枠・点線
ここに内容を入れます。
<div style="background:#F6F6F6; padding:10px; border:2px dotted #F69; border-radius:10px;">ここに内容を入れます。<br></div>
■ブルー×グレーの囲み枠・点線
ここに内容を入れます。
<div style="background:#F6F6F6; padding:10px; border:2px dotted #36F; border-radius:10px;">ここに内容を入れます。<br></div>
■水色×グレーの囲み枠・点線
ここに内容を入れます。
<div style="background:#F6F6F6; padding:10px; border:2px dotted #8AC0FD; border-radius:10px;">ここに内容を入れます。<br></div>
■グリーン×グレーの囲み枠・点線
ここに内容を入れます。
<div style="background:#F6F6F6; padding:10px; border:2px dotted #0C9; border-radius:10px;">ここに内容を入れます。<br></div>
今日も読んでくれてありがとうございました♪