【アメブロ用目立つ見出し】枠・ボックスタイプ

この記事ではアメブロの記事で使える「目立つボックスタイプの見出し」を紹介します。

完成イメージは下記の通り。

見出しの例①

見出しの例②

見出しの例③

デザインを選んでコードをコピペして貼り付けするだけ！

見出しで段落を作ると記事が分かりやすくなり、SEOにも強くアクセス数UPに役立ちます。

あめっくま

見出しを使って、読みやすく・分かりやすい記事を作りましょう。

自己紹介はこちら⇒

なお、見出しの使い方や注意点は👇の記事で解説しています。当ブログ「アメブロメーカー」の見出し素材を、はじめて使う人は確認して下さいね。

アメブロ用の見出しの作り方・使い方・注意点この記事ではアメブロでの見出しの作り方や注意点を解説します。

ameblo.jp

注意

記事中のコードは無料で使えます。リブログやリンクのご紹介も歓迎です。ただし許可なくコード自体をブログ内で掲載したり、二次利用するのは禁止です。無許可掲載はプライバシーポリシーに準じて対応します。

この記事を書いた人

あめっくま

Amebaオンラインレッスン認定講師
アメブロ収益UP講座を運営
コンサル生300名以上が収益UPに成功

>> 提供サービスはこちら

>> あめっくまをフォロー

＼アメブロ20記事で5万PVの手法／

アメブロで資産記事を作る方法はこちら ⇒

＼ついに登場！アメトピ攻略法／

アメトピ攻略法はこちら ⇒

枠線で囲った見出し

枠線を使った見出し素材をまとめました。シンプルなので使いやすいですね。

実線で囲まれた見出し

実線で囲った見出し

<h2 class="entry-text-lightblue" style="border: 3px solid #4169e1; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

実線で囲った見出し

<h2 class="entry-text-green" style="border: 3px solid #59a136; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

実線で囲った見出し

<h2 class="entry-text-pink" style="border: 3px solid #eb6ea5; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

実線で囲った見出し

<h2 class="entry-text-orange" style="border: 3px solid #fca60d; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

実線＋角丸で囲まれた見出し

角丸ボックスの見出し

<h2 class="entry-text-lightblue" style="border: 3px solid #4169e1; border-radius: 10px; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

角丸ボックスの見出し

<h2 class="entry-text-green" style="border: 3px solid #59a136; border-radius: 10px; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

角丸ボックスの見出し

<h2 class="entry-text-pink" style="border: 3px solid #eb6ea5; border-radius: 10px; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

角丸ボックスの見出し

<h2 class="entry-text-orange" style="border: 3px solid #fca60d; border-radius: 10px; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

ドット線で囲まれた見出し

ドット線で囲った見出し

<h2 class="entry-text-lightblue" style="border: 3px dotted #4169e1; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

ドット線で囲った見出し

<h2 class="entry-text-green" style="border: 3px dotted #59a136; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

ドット線で囲った見出し

<h2 class="entry-text-pink" style="border: 3px dotted #eb6ea5; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

ドット線で囲った見出し

<h2 class="entry-text-orange" style="border: 3px dotted #fca60d; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

2重線で囲まれた見出し

2重線で囲った見出し

<h2 class="entry-text-lightblue" style="border: 5px double #4169e1; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

2重線で囲った見出し

<h2 class="entry-text-green" style="border: 5px double #59a136; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

2重線で囲った見出し

<h2 class="entry-text-pink" style="border: 5px double #eb6ea5; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

2重線で囲った見出し

<h2 class="entry-text-orange" style="border: 5px double #fca60d; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

背景つきの目立つ見出し

見出しの背景を塗りつぶした素材を集めました。目立つので、読者に内容が伝わりやすいですね。

塗りつぶしボックスの見出し

塗りつぶしの見出し

<h2 class="entry-text-lightblue" style="background: #e0e7fa; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

塗りつぶしの見出し

<h2 class="entry-text-green" style="background: #d6efbe; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

塗りつぶしの見出し

<h2 class="entry-text-pink" style="background: #fbe4ee; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

塗りつぶしの見出し

<h2 class="entry-text-orange" style="background: #fee8c2; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

濃い色で塗りつぶた見出し

濃い塗りつぶしの見出し

<h2 class="entry-text-lightblue" style="background: #4169e1; color: #ffffff; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

濃い塗りつぶしの見出し

<h2 class="entry-text-green" style="background: #59a136; color: #ffffff; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

濃い塗りつぶしの見出し

<h2 class="entry-text-pink" style="background: #eb6ea5; color: #ffffff; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

濃い塗りつぶしの見出し

<h2 class="entry-text-orange" style="background: #fca60d; color: #ffffff; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

左線＋塗りつぶしボックスの見出し

左線＋塗りつぶし

<h2 class="entry-text-lightblue" style="border-left: 5px solid #4169e1; background: #e0e7fa; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

左線＋塗りつぶし

<h2 class="entry-text-green" style="border-left: 5px solid #59a136; background: #d6efbe; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

左線＋塗りつぶし

<h2 class="entry-text-pink" style="border-left: 5px solid #eb6ea5; background: #fbe4ee; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

左線＋塗りつぶし

<h2 class="entry-text-orange" style="border-left: 5px solid #fca60d; background: #fee8c2; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

左線＋立体的な見出し

<h2 class="entry-text-lightblue" class="entry-text-lightblue" style="border-left: 5px solid #4169e1; border-bottom: solid 3px #d7d7d7; background: #f4f4f4; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

左線＋立体的な見出し

<h2 class="entry-text-green" style="border-left: 5px solid #59a136; border-bottom: solid 3px #d7d7d7; background: #f4f4f4; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

左線＋立体的な見出し

<h2 class="entry-text-pink" style="border-left: 5px solid #eb6ea5; border-bottom: solid 3px #d7d7d7; background: #f4f4f4; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

左線＋立体的な見出し

<h2 class="entry-text-orange" style="border-left: 5px solid #fca60d; border-bottom: solid 3px #d7d7d7; background: #f4f4f4; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

上線＋塗りつぶしの見出し

上線＋塗りつぶし

<h2 class="entry-text-lightblue" style="border-top: 3px solid #4169e1; background: #e0e7fa; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

上線＋塗りつぶし

<h2 class="entry-text-green" style="border-top: 3px solid #59a136; background: #d6efbe; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

上線＋塗りつぶし

<h2 class="entry-text-pink" style="border-top: 3px solid #eb6ea5; background: #fbe4ee; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

上線＋塗りつぶし

<h2 class="entry-text-orange" style="border-top: 3px solid #fca60d; background: #fee8c2; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

上下線＋塗りつぶしの見出し

上下線＋塗りつぶし

<h2 class="entry-text-lightblue" style="border-top: 3px solid #4169e1; border-bottom: 3px solid #4169e1; background: #e0e7fa; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

上下線＋塗りつぶし

<h2 class="entry-text-green" style="border-top: 3px solid #59a136; border-bottom: 3px solid #59a136; background: #d6efbe; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

上下線＋塗りつぶし

<h2 class="entry-text-pink" style="border-top: 3px solid #eb6ea5; border-bottom: 3px solid #eb6ea5; background: #fbe4ee; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

上下線＋塗りつぶし

<h2 class="entry-text-orange" style="border-top: 3px solid #fca60d; border-bottom: 3px solid #fca60d; background: #fee8c2; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

キルト・布風の見出し

布風の見出し

<h2 class="entry-text-lightblue" style="border: 2px dashed #4169e1; background: #e0e7fa; box-shadow:0px 0px 0px 5px #e0e7fa; padding: 0.1em 0.3em;">見出しのテキスト</h2>
<p> </p>

布風の見出し

<h2 class="entry-text-green" style="border: 2px dashed #59a136; background: #d6efbe; box-shadow:0px 0px 0px 5px #d6efbe; padding: 0.1em 0.3em;">見出しのテキスト</h2>
<p> </p>

布風の見出し

<h2 class="entry-text-pink" style="border: 2px dashed #eb6ea5; background: #fbe4ee; box-shadow:0px 0px 0px 5px #fbe4ee; padding: 0.1em 0.3em;">見出しのテキスト</h2>
<p> </p>

布風の見出し

<h2 class="entry-text-orange" style="border: 2px dashed #fca60d; background: #fee8c2; box-shadow:0px 0px 0px 5px #fee8c2; padding: 0.1em 0.3em;">見出しのテキスト</h2>
<p> </p>