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

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

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

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

目次

  1. パソコンで囲み枠を作る
  2. スマホで囲み枠を作る
  3. 囲み枠をカスタマイズする
  4. 囲み枠サンプルデザイン

 
 

パソコンで囲み枠を作る

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

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

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

<div style="color: #000000; font-size: 100%; padding: 10px; background: #F8F8F8; border: 1px solid #000000; ">★本文を入力してください。</div>

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

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

 
 

スマホで囲み枠を作る

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

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

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

<div style="color: #000000; font-size: 100%; padding: 10px; background: #F8F8F8; border: 1px solid #000000; ">★本文を入力してください。</div>

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

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

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

 

 

 
 

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

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

を変更すれば、どう変わるのか?」

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

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

基礎知識

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

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

【線の種類】
・solid(直線)
・double(二重線)
・dotted(点線)

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

 
 

文字の色を変更する

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

【サンプルタグ】
<div style="color: #000000; font-size: 100%; padding: 10px; background: #F8F8F8; border: 1px solid #000000; ">★本文を入力してください。</div>

 
【変更後】
<div style="color: #ff0000; font-size: 100%; padding: 10px; background: #F8F8F8; border: 1px solid #000000; ">★本文を入力してください。</div>

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

 
 

文字の大きさを変更する

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

【サンプルタグ】
<div style="color: #000000; font-size: 100%; padding: 10px; background: #F8F8F8; border: 1px solid #000000; ">★本文を入力してください。</div>

 
【変更後】
<div style="color: #000000; font-size: 150%; padding: 10px; background: #F8F8F8; border: 1px solid #000000; ">★本文を入力してください。</div>

 
 

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

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

【サンプルタグ】
<div style="color: #000000; font-size: 100%; padding: 10px; background: #F8F8F8; border: 1px solid #000000; ">★本文を入力してください。</div>

 
【変更後】
<div style="color: #000000; font-size: 100%; padding: 30px; background: #F8F8F8; border: 1px solid #000000; ">★本文を入力してください。</div>

 
 

背景色を変更する

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

【サンプルタグ】
<div style="color: #000000; font-size: 100%; padding: 10px; background: #F8F8F8; border: 1px solid #000000; ">★本文を入力してください。</div>

 
【変更後】
<div style="color: #000000; font-size: 100%; padding: 10px; background: #ffc0cb; border: 1px solid #000000; ">★本文を入力してください。</div>

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

 
 

枠線の色を変更する

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

【サンプルタグ】
<div style="color: #000000; font-size: 100%; padding: 10px; background: #F8F8F8; border: 1px solid #000000; ">★本文を入力してください。</div>

 
【変更後】
<div style="color: #000000; font-size: 100%; padding: 10px; background: #F8F8F8; border: 1px solid #ff0000; ">★本文を入力してください。</div>

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

 
 

枠線の太さを変更する

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

【サンプルタグ】
<div style="color: #000000; font-size: 100%; padding: 10px; background: #F8F8F8; border: 1px solid #000000; ">★本文を入力してください。</div>

 
【変更後】
<div style="color: #000000; font-size: 100%; padding: 10px; background: #F8F8F8; border: 3px solid #000000; ">★本文を入力してください。</div>

 
 

枠を二重線にする

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

【サンプルタグ】
<div style="color: #000000; font-size: 100%; padding: 10px; background: #F8F8F8; border: 1px solid #000000; ">★本文を入力してください。</div>

 
【変更後】
<div style="color: #000000; font-size: 100%; padding: 10px; background: #F8F8F8; border: 3px double #000000; ">★本文を入力してください。</div>

 
 

枠を点線する

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

【サンプルタグ】
<div style="color: #000000; font-size: 100%; padding: 10px; background: #F8F8F8; border: 1px solid #000000; ">★本文を入力してください。</div>

 
【変更後】
<div style="color: #000000; font-size: 100%; padding: 10px; background: #F8F8F8; border: 1px dotted #000000; ">★本文を入力してください。</div>

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

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

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

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

 

 

 
 

囲み枠サンプルデザイン

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

◆サンプル1

サンプル1 のタグ(↓)
<div style="color: #ffffff; font-size: 100%; padding: 8px; background: #161b1a;">◆サンプル1</div>

 


◆サンプル2

サンプル2 のタグ(↓)
<div style="color: #000000; font-size: 100%; padding: 8px; background: #F2F2F2; border: 2px solid #161b1a;">◆サンプル2</div>

 


◆サンプル3

サンプル3 のタグ(↓)
<div style="color: #000000; font-size: 100%; padding: 8px; background:#FFFFFF; border: dashed 2px #161b1a;">◆サンプル3</div>

 


◆サンプル4

サンプル4 のタグ(↓)
<div style="color: #000000; font-size: 100%; padding: 8px; background:#FFFFFF; border-color: #161b1a; border-width: 2px 2px 2px 15px; border-style: solid;">◆タイトル4</div>

 


◆サンプル5

サンプル5 のタグ(↓)
<div style="color: #000000; font-size: 100%; padding: 8px; background:#FFFFFF; border: 5px double #161b1a;">◆タイトル5</div>

 


◆サンプル6

サンプル6 のタグ(↓)
<div style="color: #ffffff; font-size: 100%; padding: 8px; background:#161b1a; border:3px solid #161b1a; border-radius:15px;">◆サンプル6</div>

 


◆サンプル7

サンプル7 のタグ(↓)
<div style="color: #000000; font-size: 100%; padding: 8px; background:#FFFFFF; border:3px solid #161b1a; border-radius:15px;">◆サンプル7</div>

 


◆サンプル8

サンプル8 のタグ(↓)
<div style="color: #000000; font-size: 100%; padding: 8px; background:#FFFFFF; border-radius: 15px;border: 3px dotted #161b1a;">◆サンプル8</div>

 


◆サンプル9

サンプル9 のタグ(↓)
<div style="color: #000000; font-size: 100%; padding: 8px; background:#FFFFFF; border-radius: 15px;border: 5px double #161b1a;">◆サンプル9</div>

 


◆サンプル10
※本文を入力してください
※本文を入力してください
※本文を入力してください

サンプル10 のタグ(↓)
<div style="box-shadow: 5px 5px 5px #AAAAAA;margin: 5px; color: #333333; padding: 6px; border: #b0e0e6 3px double; border-radius: 10px; background-color: #ffffff"><strong>◆サンプル10</strong><br>※本文を入力してください<br>※本文を入力してください<br>※本文を入力してください

 


◆サンプル11
※本文を入力してください
※本文を入力してください
※本文を入力してください

サンプル11 のタグ(↓)
<div style="height:12px;"><span style="margin-left:8px;font-weight:bold;-webkit-border-radius:5px;-moz-border-radius:5px; padding: 6px 10px; color: #ffffff; border-radius: 5px; background: #ff9933;">◆サンプル11</span></div><div style="-webkit-border-radius:5px;-moz-border-radius:5px;font-size:0.85em; padding: 25px 12px 10px; border: 2px solid #ff9933; border-radius: 5px; background: #FFFFFF;">※本文を入力してください<br>※本文を入力してください<br>※本文を入力してください</div>

 


◆サンプル12
※本文を入力してください
※本文を入力してください
※本文を入力してください

サンプル12 のタグ(↓)
<div style="padding-left: 10px; border: 1px solid #ff1493; background: #ff1493; "><span style="font-size: 120%;"><span style="color: #ffffff ; font-weight: bold;">◆サンプル12</span></span></div><div style="border: 1px solid #ff1493; padding: 10px; background: #FFFFFF; ">※本文を入力してください<br>※本文を入力してください<br>※本文を入力してください</div>