アメブロ記事の本文を枠で囲む（サンプル付き）

[no_toc]
アメブロ記事内に囲み枠を作る方法から、囲み枠の「色」や「太さ」などデザインをカスタマイズする方法を解説します。

パソコンやスマホから、誰でも簡単に囲み枠を作れるようにコピペで使えるサンプルタグも用意しています。是非ご活用ください。

※目次をクリックすると
タイトルの先頭まで移動します（↓）

目次

1. パソコンで囲み枠を作る
2. スマホで囲み枠を作る
3. 囲み枠をカスタマイズする
• 文字の色を変更する
• 文字の大きさを変更する
• 枠線と文字との幅を変更する
• 背景色を変更する
• 枠線の色を変更をする
• 枠線の太さを変更をする
• 枠を二重線にする
• 枠を点線にする
4. 囲み枠サンプルデザイン

パソコンで囲み枠を作る

パソコンから、アメブロ記事の本文を枠で囲む方法を解説します。

 
①【HTML表示】をクリックしてください。

 
② 下記の HTMLタグ をコピーしてください。

 
③ コピーしたタグを本文内にペースト（貼り付け）してください。

 
④【通常表示】をクリックしてください。
本文囲み枠の完成です。

スマホで囲み枠を作る

スマホから、アメブロ記事の本文を枠で囲む方法を解説します。

①【html編集】をタッチしてください。

 
② 下記の HTMLタグ をコピーしてください。

 
③ コピーしたタグを本文内にペースト（貼り付け）してください。

 
④【完了】をタッチしてください。

 
⑤ 本文囲み枠の完成です。

囲み枠をカスタマイズする

サンプルデザインを元に、囲み枠のデザインをカスタマイズする方法についてを解説します。

「何を変更すれば、どう変わるのか？」

を理解することができれば、お好みの囲み枠デザインを簡単に作れるようになります。

まずは基礎をおさえましょう。
 

基礎知識

下記のタグが、何を変更できるかを理解してください。

• font-color（文字の色を指定するタグ）
• font-size（文字の大きさを指定するタグ）
• padding（枠と文字との幅を指定するタグ）
• background（背景色を指定するタグ）
• border（線の太さ、種類、色を指定するタグ）

【線の種類】
・solid（直線）
・double（二重線）
・dotted（点線）

 icon-exclamation-triangle ポイント
タグは ” ; ” で閉じるのを忘れないようにしましょう。

文字の色を変更する

サンプルタグ内の
color: #000000; のカラーコードを変更すると文字の色が変わります。

 カラーコードの見本はこちら

文字の大きさを変更する

サンプルタグ内の
font-size: 100%; の数値を変更すると文字の大きさが変わります。

枠線と文字との幅を変更する

サンプルタグ内の
padding: 10px; の数値を変更すると枠線と文字との幅が変わります。

背景色を変更する

サンプルタグ内の
background: #F8F8F8; のカラーコードを変更すると背景色が変わります。

 カラーコードの見本はこちら

枠線の色を変更する

サンプルタグ内の
border: 1px solid #000000; のカラーコードを変更すると枠線の色が変わります。

 カラーコードの見本はこちら

枠線の太さを変更する

サンプルタグ内の
border: 1px の数値を変更すると枠線の太さが変わります。

枠を二重線にする

サンプルタグ内の
border: 1px solid のタグを「double」に変更すると枠が二重線になります。

枠を点線する

サンプルタグ内の
border: 1px solid のタグを「dotted」に変更すると枠が点線になります。

 
 
カスタマイズできましたか？

お気づきだとは思いますが
タグ内の【★本文を入力してください。】を変更することで本文の修正ができます。

また、改行をする場合は【br】を入力してください。

例）
 本文を入力してください。<br>
 <br>
 本文を入力してください。<br>
 本文を入力してください。<br>
 本文を入力してください。

囲み枠サンプルデザイン

コピペで使えるサンプルタグです。