前のページでは、アメブロ記事に囲み枠を入れる方法をお伝えしましたが、こちらでは実際のコードをご紹介します。

こちらのコードを1ページの手順にそってコピー&ペーストしてご利用ください。

基本的にお好きなように使用して構わないのですが、いろいろある囲み枠、どういうときにどの囲み枠を使えばいいのか迷ってしまわれる方へ、おすすめ使用方法も併せてお伝えします!

囲み枠サンプル一覧
 
■シンプル囲み枠

♥ おすすめ使用ケース:リンク先一覧、人気記事一覧を載せる。メニュー一覧を載せる etc…
ここに本文を入力。
改行はShift+Enter
 
こちらのコードをコピペ↓
<div style="background: #fff; padding: 10px; border: 2px solid #FFAEC8;">ここに本文を入力。<br />改行はShift+Enter</div>

・角を丸くすることもできます。

ここに本文を入力。
改行はShift+Enter
 
こちらのコードをコピペ↓
<div style="background: #fff; padding: 10px; border-radius: 10px; border: 2px solid #FFAEC8;">ここに本文を入力。<br />改行はShift+Enter</div>

・枠内の背景に色を入れることも

ここに本文を入力。
改行はShift+Enter
 
こちらのコードをコピペ↓
<div style="background: #FFEDF6; padding: 10px; border-radius: 10px; border: 2px solid #FFAEC8;">ここに本文を入力。<br />改行はShift+Enter</div>
■ 二重線囲み枠

♥ おすすめ使用ケース:注意してほしいこと、注目して欲しいことを載せるとき、パッと目を向けさせたいとき etc…
ここに本文を入力。
改行はShift+Enter
 
こちらのコードをコピペ↓
<div style="background: #fff; padding: 10px; border: 3px double#FF0000;">ここに本文を入力。<br />改行はShift+Enter</div>
■ドット囲み枠
♥ おすすめ使用ケース:お客さまの感想 etc…
ここに本文を入力。
改行はShift+Enter
 
こちらのコードをコピペ↓
<div style="background: #fff; padding: 10px; border: 3px dotted #FFAEC8;">ここに本文を入力。<br />改行はShift+Enter</div>

・ドット囲み枠 角丸編

ここに本文を入力。
改行はShift+Enter

こちらをコピペ↓

<div style="background: #fff; padding: 10px; border-radius: 10px; border: 3px dotted #FFAEC8;">ここに本文を入力。<br />改行はShift+Enter</div>

・ドット囲み枠 背景あり編

ここに本文を入力。
改行はShift+Enter
 
こちらのコードをコピペ↓
<div style="background: #FFEDF6; padding: 10px; border-radius: 10px; border: 3px dotted #FFAEC8;">ここに本文を入力。<br />改行はShift+Enter</div>
背景色のみ(枠なし)
♥ おすすめ使用ケース:記事本題前や記事の後に毎回置くような、ちょっとした自己紹介・あいさつ欄 etc...
ここに本文を入力。
改行はShift+Enter
 
こちらのコードをコピペ↓
<div style="background: #ffe4e1; padding: 10px; border: none;">ここに本文を入力。 <br />改行はShift+Enter</div>

・背景色のみ 角丸編

ここに本文を入力。
改行はShift+Enter
 
こちらのコードをコピペ↓
<div style="background: #ffe4e1; padding: 10px; border-radius: 10px; border: none;">ここに本文を入力。 <br />改行はShift+Enter</div>
■ タイトル欄付囲み枠
♥ おすすめ使用ケース:募集中イベント・レッスンのご案内 etc…
■ここにタイトルを入力
ここに本文を入力。
改行はShift+Enter

こちらのコードをコピペ↓

■ タイトル見出し
♥ 見出し、トピックが変わる時に etc…
タイトル

こちらのコードをコピペ↓

<div style="border-left: 10px solid #FFAEC8; border-bottom: 2px solid #FFAEC8; padding-left: 10px; font-weight: bold; font-size: 130%; color: #333333;">タイトル</div>
■ ボタン
♥おすすめ使用ケース:申し込みボタン、詳細はこちらボタン

※『お申し込みはこちら』『詳細はこちら』の文字は好きな文字に変えられます。文字の長さに合わせてボタンの大きさも変わります。

 

お申込みはこちら 
 
こちらのコードをコピペ↓
<div style="background: #FF8080; display: inline-block; padding: 15px; border-radius: 15px; box-shadow: 2px 2px 4px #dcdcdc; border: none;"><span style="font-weight:bold;"><a href="リンク先のアドレス" target="_blank"><span style="color: #ffffff;">お申込みはこちら</span></a></span></div>
 
詳しくはこちら 
 
こちらのコードをコピペ↓
<div style="background: #E6E6FA; display: inline-block; padding: 15px; border-radius: 15px; box-shadow: 2px 2px 4px #dcdcdc; border: none;"><a href="リンク先のアドレス" target="_blank"><span style="color: #514a55;">詳しくはこちら&nbsp;</span></a></div>

囲み枠を使いこなすコツ
いろいろと囲み枠を紹介しましたが、たくさん使えばいいというものではありません。
いくつかコツをお伝えします。
色を変えてみよう!

上記の囲み枠ですが、もちろん色を変えることができます。

コード内の『#』から始まる英数字6桁が、色のコード。

例えば、こちらのピンクの囲み枠をブルーに変えたい時は…

ここに本文を入力。
改行はShift+Enter
 
こちらの囲み枠のコードはこちら↓
 
 
<div style=”background: #fff; padding: 10px; border: 2px solid #FFAEC8;”>ここに本文を入力。<br />改行はShift+Enter</div>
 
 
この赤字の#FFAEC8がこのピンク色のコードとなっているので、
 
こちらをブルーのコード#93C1FDに変えてあげると…
 
 
ここに本文を入力。
改行はShift+Enter
 
 
このようにブルーの枠に変わります。
 
 
ではこの色コード、どこで調べればいいのでしょうか。
 
いろいろ方法はありますが、今回はこちらをご紹介します。
 
『WEB色見本 原色大辞典 – HTMLカラーコード』
 
 
このサイトに行くとコードが載っていますので、コピぺしてお好きな色で枠を作ってみてくださいね。
 
■ 使い過ぎに注意!

ひとつの記事に何種類もの囲み枠を使ってしまうとごちゃごちゃしてしまいます。

2、3個までに抑えて、色も統一感のあるものやブログの雰囲気に合う色を使用するとよりスッキリおしゃれになります。

■ ブログ内で統一する

お客さまの声は『ドットの囲み枠』
募集中の講座一覧は『タイトル欄付囲み枠』

というように、ルールを統一するとブログを書いているときにどの囲み枠を使うか迷うことがなくなるので楽です。

そしてそのような統一感のあるブログは読者の方に安心感を与えることができます。


いかがでしたでしょうか。

囲み枠を上手利用して、スッキリかわいい魅力的なブログにしてみてくださいね。

なにかうまく表示されかったり、ご質問がありましたらお気軽にお問い合わせください。

お問い合わせはこちら
グッと読みやすくなる!スッキリかわいいアメブロ囲み枠の作り方

コメントを残す

メールアドレスが公開されることはありません。