アメブロで文章を枠で囲む方法

内藤です。

アメブロで記事中の文章を枠で囲むやり方を説明します。

こんな感じに枠で囲みたい時はありませんか?

囲みの中の文章

 

投稿エディタを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>

記事の中やフリースペースで応用して使ってみてくださいね

LINE公式アカウントはこちら
友だち追加

 

初心者にもできるアメブロカスタマイズのマニュアル
アメブロカスタマイズ〜読まれるブログの作り方〜

アメブロカスタマイズ記事まとめに戻る