記事中の文章を枠で囲む


内藤です。

アメブロで記事中の文章を囲みたい場合ってあると思います。

そんな時は、投稿エディタをHTML表示にして(もしくはタグ編集エディタ)、囲みたい文章を

<div style="border:2px dotted #CCCCCC; padding:10px;"> と </div>

で囲みます。

こんな感じになります。

囲みの中の文章

border:2px dotted #CCCCCC; padding:10px;のうち、
border:2px dotted #CCCCCC; は 
線の太さが2pxで、破線、線の色が#CCCCCC(グレー)を意味しています。

padding:10px; は枠と文章との余白を意味します。

枠内の色

<div style="border:2px dotted #CCCCCC; padding:10px; background-color:#F2F2F2;">

のように background-color:#F2F2F2;を付け加えると、枠の内部に色を付けることも可能です。

こんな感じです。

囲みの中の文章

線の種類

線の種類には

  • solid (実線)
  • dotted (破線)
  • dashed (点線)
  • double (二重線、3px以上)

などがあります。


例)

▼太さ2px、破線、線の色#CCCCCC、余白10pxの枠の場合

<div style="border:2px dotted #CCCCCC; padding:10px;">
囲みの中の文章 
</div> 

囲みの中の文章 

 

▼太さ2px、実線、線の色#FF0000、余白10px、背景色#F9DCDAの枠

<div style="border:2px solid #FF0000;padding:10px;background-color:#F9DCDA;">
囲みの中の文章
</div>

囲みの中の文章

▼太さ3px、点線、線の色#000000、余白10px、背景色#CCCCCCの枠

<div style="border:3px dashed #000000;padding:10px;background-color:#CCCCCC;">
囲みの中の文章
</div>

囲みの中の文章

▼太さ3px、二重線、線の色#0000FF、余白10px、背景色#F2F2F2の枠

<div style="border:3px double #0000FF;padding:10px;background-color:#F2F2F2;">
囲みの中の文章
</div>

囲みの中の文章

カラーコードはこちらを参照してください


その他のカスタマイズの目次はこちら

2017年3月からのアメブロ常時SSL化に際しまして、「フリープラグイン」を使ったカスタマイズが利用できなくなる可能性があります
【追記あり】アメーバブログの常時SSL化に伴う仕様変更について|スタッフブログ
フリープラグインを使ったカスタマイズはせずに、CSSを使ったカスタマイズを行ってください