グッと読みやすくなる！スッキリかわいいアメブロ囲み枠の作り方

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

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

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

囲み枠サンプル一覧

■シンプル囲み枠

♥ おすすめ使用ケース：リンク先一覧、人気記事一覧を載せる。メニュー一覧を載せる etc…

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

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

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

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

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

■ 二重線囲み枠

♥ おすすめ使用ケース：注意してほしいこと、注目して欲しいことを載せるとき、パッと目を向けさせたいとき etc…

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

■ドット囲み枠

♥ おすすめ使用ケース：お客さまの感想 etc…

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

・ドット囲み枠 角丸編

こちらをコピペ↓

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

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

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

■ 背景色のみ（枠なし）

♥ おすすめ使用ケース：記事本題前や記事の後に毎回置くような、ちょっとした自己紹介・あいさつ欄 etc...

<div style="background: #ffe4e1; padding: 10px; border: none;">ここに本文を入力。 <br />改行はShift+Enter</div>

・背景色のみ 角丸編

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

■ タイトル欄付囲み枠

♥ おすすめ使用ケース：募集中イベント・レッスンのご案内 etc…

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

■ タイトル見出し

♥ 見出し、トピックが変わる時に 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桁が、色のコード。

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

■ 使い過ぎに注意！

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

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

■ ブログ内で統一する

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

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

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

---

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

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

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

お問い合わせはこちら