アメブロの記事本文に囲み枠をつける

アメブロのカスタマイズ相談をいただくことが月に何度かはありますので、よく聞かれることのひとつである「囲み枠」について書いていきます。

たとえば

  • 角が丸い囲み
  • 点線になってる囲み
  • 背景に色がついてる囲み

こんなのをつくりたいとしたら

スクリーンショット 2016-05-30 9.42.11

コードはここからコピーしてください
※下記コードの上にマウスを持って行くといくつかボタンが表示されます。一番右のボタンをクリックすると新しい画面が出てきてそこに表示されるのでコピーしやすいです。

<div style="background:#ffeeee; padding:10px; border:2px dotted #ff0000;border-radius:10px;">
枠内の記事本文 枠内の記事本文枠内の記事本文枠内の記事本文枠内の記事本文枠内の記事本文枠内の記事本文枠内の記事本文枠内の記事本文
</div><br>

背景の色を変えたい場合は
background:#ffeeee; ←ここで #ffeeee と書いてあるから いまピンクっぽい色になってます。 ここの値を変えてください

枠線の色を変えたい場合は
border:2px dotted #ff0000;  ←ここで #ff0000 と書いてあるから 赤色になってます。 ここの値を変えてください

枠線を実線にしたい場合は
border:2px dotted #ff0000;  ←ここで dotted と書いてあるから 点線になってます。実線にするなら solid にしてください。

ついでに、太さはいま 2px に指定しています。太くしたい場合は 4px とか 5px など、値を大きくしてください。

やりかたがわからない、やってほしい、もっと大規模にカスタマイズしたいなど、お問い合わせはこちら。


LINE公式アカウント

LINE 公式アカウントでは「今月のあなた」「要注意日」を自動配信。nakano10へのお問い合わせやセッション依頼、講座の依頼も出来ます。