• 2017年7月18日 ブログ
    オシャレ&カンタンに作れるヘッダー画像の作り方のコツ
  • 2017年6月21日 ホームページ
    グーペは、お店やお教室のホームページにぴったりのサービス
  • 2017年3月9日 ウェブサービス
    ハンドメイド作家さんに朗報!ココナラハンドメイドがこの春オープン
  • 2017年2月16日 WordPress
    ホームページサービスはどれを使えばよい?
  • 2017年1月25日 ウェブサービス
    ママ向け在宅&アルバイト求人サイト「mama works」
  • 2017年1月23日 撮影
    撮影に便利そう!折り畳み撮影ボックスを発見
  • 2016年12月27日 WordPress
    初心者向け!WordPress日本語無料テーマ5選

アメブロを利用している方の多くが使用している囲み枠ですが、自分で作るのはちょっと面倒くさいです。
何パターンか制作しましたので、ブログにご利用ください。

下記に記載されているタグを、アメブロの入力画面「タグ編集エディタ」
新エディタの場合は「HTML表示」にコピペしてください。簡単に作れますよ。

アメブロ の囲み枠直線

ココに本文を入れる


使用するタグ

<div style="border: 1px solid#000000; padding: 10px;">ここに文章<br></div><br><br>

バイオレットカラー

ココに本文を入れる


使用するタグ

<div style="border: 1px solid#7f1184; padding: 10px;">ここに文章<br></div><br><br>

ミルクチョコレート

ココに本文を入れる


使用するタグ

<div style="border: 1px solid#e6bfb2; padding: 10px;">ココに本文を入れる<br></div><br><br>

オレンジの直線

ここに本文を入れる


使用するタグ

<div style="background:#fff; padding:10px; border:2px solid #ff8c00;">ここに本文を入れる</div>

ピンクの直線

ここに本文を入れる


使用するタグ

<div style="background:#fff; padding:10px; border:2px solid #FFC0CB;">ここに本文を入れる</div>

山吹色太直線

ココに本文を入れる

使用するタグ
<div style="border: 5px solid #fdd35c; padding: 10px;">ココに本文を入れる<br></div><br><br>

水色の直線と背景

ここに本文を入れる


使用するタグ

<div style="background:#e0ffff; padding:10px; border:2px solid #afeeee;">ここに本文を入れる</div>

ドット

スカイブルー

ココに本文を入れる

使用するタグ
<div style="border: 1px dotted #a0d8ef; padding: 10px;">ココに本文を入れる<br></div>

スカイブルーのドット大

ここに本文を入れる


使用するタグ

<div style="background:#fff; padding:10px; border:2px dotted #87ceeb;">ここに本文を入れる</div>

ココに本文を入れる


使用するタグ
<div style="background:#fff; padding:10px; border:2px dotted #000;">ココに本文を入れる</div>

ピンク濃淡

ここに本文を入れる

使用するタグ
<div style="background:#fff0f5; padding:10px; border:2px dotted #ffb6c1;">ここに本文を入れる</div>

ラベンダー系&背景ピンク

ここに本文を入れる

使用するタグ
<div style="background:#e6e6fa; padding:10px; border:2px dotted #dda0dd;">ここに本文を入れる</div>

角丸

マリンブルードット

ここに文章

使用するタグ
<div style="padding: 10px; border-radius: 10px; border: 2px dotted #4753a2;">ここに文章<br></div>

ペールブルー二重線角丸

ココに本文を入れる

使用するタグ
<div style="padding: 10px; border-radius: 10px; border: 5px double#a1d8e2;">ココに本文を入れる<br></div>

ここに本文を入れる


使用するタグ

<div style="padding: 10px; border: 1px solid #555555; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">ここに本文を入れる</div>

背景付き

ここに文章を入れられます

使用するタグ
<div style="background:#f8f8ff; padding:10px; border:1px solid #b0e0e6; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;">ここに文章を入れる</div>

二重線

ライトピンクの二重線

ここに本文を入れる

使用するタグ
<div style="background:#fff; padding:10px; border:3px double #ffb6c1;">ここに本文を入れる</div>

プラムの二重線

ここに本文を入れる

使用するタグ
<div style="background:#fff; padding:10px; border:3px double #dda0dd;">ここに本文を入れる</div>

ペールターコイズの二重線

ここに本文を入れる

使用するタグ
<div style="background:#fff; padding:10px; border:3px double #afeeee;">ここに本文を入れる</div>

オレンジ

ここに本文を入れる

使用するタグ
<div style="background:#fffaf0; padding:10px; border:3px double #ffa500;">ここに本文を入れる</div>

柔らかいブルー

ここに本文を入れる

使用するタグ
<div style="background:#f8f8ff; padding:10px; border:3px double #6495ed;">ここに本文を入れる</div>

破線

ここに本文を入れる

使用するタグ
<div style="background:#fff; padding:10px; border:1px dashed #000000;">ここに本文を入れる</div>

ダークブルー

ここに本文を入れる

使用するタグ
<div style="background:#fff; padding:10px; border:1px dashed #00008b;">ここに本文を入れる</div>

ターコイズ

ここに本文を入れる

使用するタグ
<div style="background:#fff; padding:10px; border:2px dashed #AFEEEE;">ここに本文を入れる</div>

黄色

ここに本文を入れる

使用するタグ
<div style="background:#fff; padding:10px; border:2px dashed #ffd700;">ここに本文を入れる</div>

見出し付き囲み枠

タイトル
ここに文章を入れられます

使用するタグ
<div style="background: #000; border: 1px solid #a0d8ef; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">タイトル</span></div>
<div style="border: 1px solid #000; padding: 10px;">ここに文章を入れられます</div>

ホットピンク

タイトル
ここに文章を入れられます

使用するタグ
<div style="background: #ff1493; border: 1px solid #ff1493; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">ここにタイトル</span></div>
<div style="border: 1px solid #ff1493; padding: 10px;">ここに本文</div>

スカイブルー

タイトル
ここに文章を入れられます

使用するタグ
<div style="background: #a0d8ef; border: 1px solid #a0d8ef; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">タイトル</span></div>
<div style="border: 1px solid #a0d8ef; padding: 10px;">ここに文章を入れられます</div>

山吹色

タイトル
ここに文章を入れられます

使用するタグ
<div style="background: #ffd700; border: 1px solid #ffd700; padding-left: 10px;"><span style="color: #ffffff; font-weight: bold;">タイトル</span></div>
<div style="border: 1px solid #ffd700; padding: 10px;">ここに文章を入れられます</div>

 

タグ解説

<div style="background:#fff; padding:10px; border:2px dashed #AFEEEE;">ここに本文を入れる</div>
backgroundは背景です。
padding…枠と文字の隙間の大きさ
border…線の太さ
dotted…ドット/solid…直線/dashed…破線/double…二重線

#fffなどは色名になります。#808080;←最後[;]で閉じることをお忘れなく。
→色のカラーチャートはこちらからどうぞでも見て参考にして下さい。


アメブロカスタマイズ講座をリリースしました。
テンプレートを元にカンタンにアメブロをカスタマイズ可能です♪
詳しくはこちらから

メルマガ

コラムをはじめ、お仕事に・生活に役立つ「お役立ちネタ」をメルマガでお届けしています。あなたのお仕事がもっとスムーズに、ちょっぴり楽になるお手伝いが出来ると嬉しいです♪
関連キーワード
ブログ】の関連記事
  • オシャレ&カンタンに作れるヘッダー画像の作り方のコツ
  • 起業ブログ、アメブロとWordPressはどちらを使う?
  • <重要>アメブロテンプレート&アメブロカスタマイズ講座をご購入の方へ
  • アメブロ Perfect GuideBook 改訂第3版が4月27日に発売
  • アメブロのアクセス数と実際のPVの差は?
  • アメブロからWordPressに移行してもうまくいかない理由

この記事が気に入ったら
フォローしよう

最新情報をお届けします

この記事を読んだ人はこちらの記事も読んでいます。