アメブロを仕事で使うなら「囲い枠」は覚えておきたい設定のひとつ。
囲い枠を設定するだけで記事が華やかに見えますし、読者さんに対して告知をアピールできるなど、使うといい場面がたくさんあります！
この記事ではとくに使い勝手のいいシンプルなものから、ドットやふんわりグラデーションの可愛い囲み枠まで10個に絞ってご紹介します。
記事の後半には実際の使い方や、枠線の色の変え方などをご紹介していますので参考にしてください。
目次
コピペOK！アメブロ用ビジネスで使えるシンプルで可愛い囲み枠10選
コピペしてお使いください。
1.シンプル
<div style=”border : 2px solid #81d8d0; padding:15px; “>本文</div>
シンプル背景塗りつぶし
<div style=”border : 2px solid #81d8d0; padding:15px; background:#fff0f5;”>本文</div>
2.角丸
<div style=”border : 2px solid #81d8d0; padding:15px; border-radius:10px;”>本文</div>
角丸背景塗りつぶし
<div style=”border : 2px solid #81d8d0; padding:15px; border-radius:10px; background :#fff0f5;”>本文</div>
3.二重線
<div style=”border : 5px double #81d8d0; padding:15px; “>本文</div>
二重線背景塗りつぶし
<div style=”border : 5px double #81d8d0; padding:15px; background :#fff0f5;”>本文</div>
4.ドット線
<div style=”border : 4px dotted #81d8d0; padding:15px; “>本文</div>
ドット線背景塗りつぶし
<div style=”border : 4px dotted #81d8d0; padding:15px;background :#fff0f5; “>本文</div>
5.点線
<div style=”border : 2px dashed #81d8d0; padding:15px;”>本文</div>
点線背景塗りつぶし
<div style=”border : 2px dashed #81d8d0; padding:15px; background :#fff0f5;”>本文</div>
6.枠線なし背景塗りつぶし
<div style=”border : none ; padding:15px; background :#fff0f5;”>本文</div>
７.見出し付き
<div style=”background: #81d8d0; border: 2px solid #81d8d0; padding-left: 10px; color: #ffffff; font-weight: bold;”>タイトル</div><div style=”border: 2px solid #81d8d0; padding: 10px;”>本文 </div>
8.付箋風
<div style=”border: #81d8d0 solid 2px; border-left: #81d8d0 solid 15px; padding: 15px; “>本文</div>
9.ふんわりぼかし背景
<div style=”padding:10px; margin: 15px; background: #fff0f5; box-shadow: #fff0f5 0 0 10px 10px;”>本文</div>
10.グラデーション背景
<div style=”background-image: linear-gradient(#fff0f5,#f0f8ff); background-color: #ffffff; padding: 15px; border: none; box-shadow: 2px 2px 4px #dcdcdc;”>本文</div>
アメブロで囲い枠を入れる方法
予め、使いたい飾り枠のHTMLをコピーしておきましょう。
アメブロの管理画面から「ブログを書く」を選択。
ブログ投稿画面の左下にある「HTML表示をクリック」。
HTML表示に切り替わるので、コピーしておいたHTMLをペースト。
その後、通常表示に戻します。
すると囲い枠が表示されます。
本文にカーソル合わせると文字の入力ができます。
改行をするときは「shift＋Enter」または「command＋Enter」をおしてください。
HTMLは１文字でも抜けたり余計な文字が入ると表示されなくなります。
表示されないときは元のHTMLと照らし合わせて間違いがないか確認しましょう。わからないときは、一度消して最初からやり直してみましょう。
枠線のデザインや色を自分でカスタマイズする方法
HTMLを正しく変更するとオリジナルの囲い枠にカスタマイズできます！
まずはHTMLの読み方から覚えましょう。
例)シンプル背景塗りつぶしのHTML
<div style=”border : 2px solid #81d8d0; padding:15px; background:#fff0f5;”>本文</div>
border・・・枠線の太さや種類を指定できます。
ここでは太さ2px、solid(１本線)、#81d8d0(グリーン)を指定しています。
padding・・・枠線と文字の間のスペース
background・・・背景の色(#のあとの数字6文字で色を指定)
このHTMLを書き換えて線の太さと色を変えてみます。
<div style=”border : 3px solid #db7093; padding:15px; background:#fafad2;”>本文</div>
borderの数値を2から3に変更したことで線が太くなっています。
borderのあとの「#数字」を変更し枠線の色をグリーンからピンクにしました。
backgroundのあとの数字を変更し背景の色をピンクからイエローにしました。
更にHTMLを書き換えて線の種類と余白を変えてみます。
<div style=”border : 3px dotted #db7093; padding:5px; background:#fafad2;”>本文</div>
borderのあとの「solid」を「dotted」に変更して１本線からドット線に変更しました。
paddingの数値を15から5に変更して余白を狭くしました。
このようにHTMLを書き換えると好きなように枠線をカスタマイズできます。
よく使われる枠線の種類
１本線・・・solid
２重線・・・double(使う時は枠線の太さを5px以上に指定してください。)
ドット線・・・dotted
点線・・・dashed
色の種類
カラーコードを変更することで色が変わります。
ホットピンク・・・#ff69b4
ライトピンク・・・#ffb6c1
コーンフラワーブルー・・・#6495ed
ミディアムパープル・・・#9370db
カラーコードは〈こちら〉から確認できます。
まとめ
記事内に囲い枠をつけることでイベントのお知らせなどを目立たせて、読者さんにアピールできるので、ぜひ自分好みの枠線を活用してみてくださいね。
