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

[no_toc]
アメブロ記事内に囲み枠を作る方法から、囲み枠の「色」や「太さ」などデザインをカスタマイズする方法を解説します。
パソコンやスマホから、誰でも簡単に囲み枠を作れるようにコピペで使えるサンプルタグも用意しています。是非ご活用ください。
※目次をクリックすると
タイトルの先頭まで移動します(↓)
目次
パソコンで囲み枠を作る
パソコンから、アメブロ記事の本文を枠で囲む方法を解説します。
①【HTML表示】をクリックしてください。
② 下記の HTMLタグ をコピーしてください。
③ コピーしたタグを本文内にペースト(貼り付け)してください。
④【通常表示】をクリックしてください。
本文囲み枠の完成です。
スマホで囲み枠を作る
スマホから、アメブロ記事の本文を枠で囲む方法を解説します。
①【html編集】をタッチしてください。
② 下記の HTMLタグ をコピーしてください。
③ コピーしたタグを本文内にペースト(貼り付け)してください。
④【完了】をタッチしてください。
⑤ 本文囲み枠の完成です。
囲み枠をカスタマイズする
サンプルデザインを元に、囲み枠のデザインをカスタマイズする方法についてを解説します。
「何を変更すれば、どう変わるのか?」
を理解することができれば、お好みの囲み枠デザインを簡単に作れるようになります。
まずは基礎をおさえましょう。
基礎知識
下記のタグが、何を変更できるかを理解してください。
- font-color(文字の色を指定するタグ)
- font-size(文字の大きさを指定するタグ)
- padding(枠と文字との幅を指定するタグ)
- background(背景色を指定するタグ)
- border(線の太さ、種類、色を指定するタグ)
【線の種類】
・solid(直線)
・double(二重線)
・dotted(点線)
ポイント
タグは ” ; ” で閉じるのを忘れないようにしましょう。
文字の色を変更する
サンプルタグ内の
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>
本文を入力してください。
囲み枠サンプルデザイン
コピペで使えるサンプルタグです。
<div style="color: #ffffff; font-size: 100%; padding: 8px; background: #161b1a;">◆サンプル1</div>
<div style="color: #000000; font-size: 100%; padding: 8px; background: #F2F2F2; border: 2px solid #161b1a;">◆サンプル2</div>
<div style="color: #000000; font-size: 100%; padding: 8px; background:#FFFFFF; border: dashed 2px #161b1a;">◆サンプル3</div>
<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>
<div style="color: #000000; font-size: 100%; padding: 8px; background:#FFFFFF; border: 5px double #161b1a;">◆タイトル5</div>
<div style="color: #ffffff; font-size: 100%; padding: 8px; background:#161b1a; border:3px solid #161b1a; border-radius:15px;">◆サンプル6</div>
<div style="color: #000000; font-size: 100%; padding: 8px; background:#FFFFFF; border:3px solid #161b1a; border-radius:15px;">◆サンプル7</div>
<div style="color: #000000; font-size: 100%; padding: 8px; background:#FFFFFF; border-radius: 15px;border: 3px dotted #161b1a;">◆サンプル8</div>
<div style="color: #000000; font-size: 100%; padding: 8px; background:#FFFFFF; border-radius: 15px;border: 5px double #161b1a;">◆サンプル9</div>
※本文を入力してください
※本文を入力してください
※本文を入力してください
<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>※本文を入力してください
※本文を入力してください
※本文を入力してください
<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>
※本文を入力してください
※本文を入力してください
<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>