内藤です。
アメブロで記事中の文章を枠で囲むやり方を説明します。
こんな感じに枠で囲みたい時はありませんか？
投稿エディタをHTML表示にして（もしくはタグ編集エディタ）、囲みたい文章を
<div style="border:2px dotted #CCCCCC; padding:10px;"> と </div>
で囲みます。
これで枠で囲むことができます。
border:2px dotted #CCCCCC; padding:10px;のうち、
border:2px dotted #CCCCCC; は
線の太さが2pxで、破線、線の色が#CCCCCC（グレー）を意味しています。
padding:10px; は枠と文章との余白が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>
↓
枠の例
他にも枠の例を用意しましたのでコピペで使ってみてください。
■枠の線が1pxのグレー（#cccccc）の実線、中が白（#ffffff）
例）枠の線が1pxのグレー（#cccccc）の実線、中が白（#ffffff）
・コード
<div style="border:1px solid #cccccc;padding:10px;background:#ffffff;">囲みの中の文章</div>
■枠の線が1pxの赤（#ff0000）の破線、中が薄いグレー（#f5f5f5）
例）枠の線が1pxの赤（#ff0000）の破線、中が薄いグレー（#f5f5f5）
・コード
<div style="border: 1px dotted #ff0000; padding: 10px; background: #f5f5f5;">囲みの中の文章</div>
■枠の線が2pxの黒（#000000）の点線、中が薄い黄色（#ffffcc）
例）枠の線が2pxの黒（#000000）の点線、中が薄い黄色（#ffffcc）
・コード
<div style="border: 2px dashed #000000; padding: 10px; background: #ffffcc;">囲みの中の文章</div>
■枠の線が3pxの青（#0000ff）の二重線、中が薄い青色（#99ccff）
例）枠の線が3pxの青（#0000ff）の二重線、中が薄い青色（#99ccff）
・コード
<div style="border: 3px double #0000ff; padding: 10px; background: #99ccff;">囲みの中の文章</div>
■枠の線が2pxのグレー（#cccccc）の角丸の実線、中が白（#ffffff）
枠の線が2pxのグレー（#cccccc）の角丸の実線、中が白（#ffffff）
・コード
<div style="border: 2px solid #cccccc; padding: 10px; background: #ffffff; border-radius:10px;">囲みの中の文章</div>
■見出しの付いた枠
・コード
<div style="background:#000000;padding:5px;color:#ffffff;">見出し文字</div><div style="border: 1px solid #000000; padding: 10px; background: #ffffff;">囲みの中の文章</div>
■見出しの付いた枠2 赤枠
・コード
<div style="background:#ff0000;padding:5px;color:#ffffff;">見出し文字</div><div style="border: 1px solid #ff0000; padding: 10px; background: #ffffff;">囲みの中の文章</div>
記事の中やフリースペースで応用して使ってみてくださいね
