【アメブロ用かわいい見出し】ピンク系・水玉模様・チェック柄の一覧

この記事ではアメブロの記事で使える「かわいい見出し」を紹介します。

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

見出しのデザイン例①

見出しのデザイン例②

見出しのデザイン例③

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

見出しで段落を作ると記事が分かりやすくなり、読者が読みやすくなりますね。

あめっくま

見出しを使って、読者にとって読みやすく・分かりやすい記事にしましょう！

自己紹介はこちら⇒

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

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

ameblo.jp

注意

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

この記事を書いた人

あめっくま

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

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

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

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

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

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

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

ピンク色のかわいい見出し素材

かわいいピンク色の素材をまとめました。女性向けのブログに使えますね。

ピンク＋線の見出し

実線の見出し

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

ドット線の見出し

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

2重線の見出し

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

横線の見出し

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

横＋下線の見出し

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

2色線の見出し

【補足】背景が白色なので、色つきの背景で使うのは不向きです。

<h2 class="entry-text-pink" style="background: linear-gradient(to right, #eb6ea5 0% 25%, #f8c9dd 25% 100%); padding: 0 0 5px 0;"><span style="display: block; background: #ffffff;">見出しのテキスト</span></h2>
<p> </p>

上下線の見出し

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

上下ドット線の見出し

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

アメブロ向けのシンプルな見出しは、👇の記事でも豊富に用意しています。

【アメブロ用シンプルな見出し】線・罫線・ラインタイプの素材この記事ではアメブロ向けのシンプルな見出し記事の素材を紹介します。

ameblo.jp

ピンク＋枠線の見出し

枠線の見出し

<h2 class="entry-text-pink" style="border: 3px solid #eb6ea5; 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-pink" style="border: 3px dotted #eb6ea5; 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>

ピンク＋ボックスの見出し

ボックスタイプ見出し

<h2 class="entry-text-pink" style="background: #fbe4ee; 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-pink" style="border-left: 5px solid #eb6ea5; background: #fbe4ee; 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-pink" style="border-top: 3px solid #eb6ea5; background: #fbe4ee; 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-pink" style="background: #eb6ea5; box-shadow: 5px 5px 0 #e54389; color: #ffffff; padding: 0.2em 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>

枠・ボックスタイプの見出しは、👇の記事でも豊富に用意しています。

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

ameblo.jp

ピンク＋ストライプの見出し

ストライプの見出し

<h2 class="entry-text-pink" style="background: repeating-linear-gradient(-45deg, #fbe4ee, #fbe4ee 3px, #fcedf4 3px, #fcedf4 7px); padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

ストライプ＋各丸

<h2 class="entry-text-pink" style="background: repeating-linear-gradient(-45deg, #fbe4ee, #fbe4ee 3px, #fcedf4 3px, #fcedf4 7px); border-radius: 10px; 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: repeating-linear-gradient(-45deg, #fbe4ee, #fbe4ee 3px, #fcedf4 3px, #fcedf4 7px); padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

ストライプ下線の見出し

【補足】背景が白色なので、色つきの背景で使うのは不向きです。

<h2 class="entry-text-pink" style="background-size: 5px 5px; background-repeat: repeat; background-image: linear-gradient(-45deg, #ffffff 25%, #eb6ea5 25%, #eb6ea5 50%, #ffffff 50%, #ffffff 75%, #eb6ea5 75%, #eb6ea5); padding: 0 0 7px 0;"><span style="display: block; background: #ffffff;">見出しのテキスト</span></h2>
<p> </p>

ストライプ上下線

【補足】背景が白色なので、色つきの背景で使うのは不向きです。

<h2 class="entry-text-pink" style="background-size: 5px 5px; background-repeat: repeat; background-image: linear-gradient(-45deg, #ffffff 25%, #eb6ea5 25%, #eb6ea5 50%, #ffffff 50%, #ffffff 75%, #eb6ea5 75%, #eb6ea5); padding: 7px 0;"><span style="display: block; background: #ffffff; padding: 0.2em 0.5em;">見出しのテキスト</span></h2>
<p> </p>

ピンク＋グラデーションの見出し

グラデーション見出し

<h2 class="entry-text-pink" style="background-image: linear-gradient(to right, #eb6ea5 0%, #fca60d 100%); background-image: -webkit-linear-gradient(left, #eb6ea5 0%, #fca60d 100%); color: #ffffff; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

グラデーション＋各丸

<h2 class="entry-text-pink" style="background-image: linear-gradient(to right, #eb6ea5 0%, #fca60d 100%); background-image: -webkit-linear-gradient(left, #eb6ea5 0%, #fca60d 100%); color: #ffffff; border-radius: 10px; padding: 0.2em 0.3em;">見出しのテキスト</h2>
<p> </p>

グラデーション下線

【補足】背景が白色なので、色つきの背景で使うのは不向きです。

<h2 class="entry-text-pink" style="background-image: linear-gradient(to right, #eb6ea5 0%, #fca60d 100%); background-image: -webkit-linear-gradient(left, #eb6ea5 0%, #fca60d 100%); padding: 0 0 5px 0;"><span style="display: block; background: #ffffff;">見出しのテキスト</span></h2>
<p> </p>

グラデーション上下線

【補足】背景が白色なので、色つきの背景で使うのは不向きです。

<h2 class="entry-text-pink" style="background-image: linear-gradient(to right, #eb6ea5 0%, #fca60d 100%); background-image: -webkit-linear-gradient(left, #eb6ea5 0%, #fca60d 100%); padding: 5px 0;"><span style="display: block; background: #ffffff; padding: 0.1em 0.3em;">見出しのテキスト</span></h2>
<p> </p>

アメブロ向けのおしゃれな見出しは、👇の記事でも豊富に用意しています。

【アメブロ用おしゃれな見出し】かっこいいストライプ・グラデーションこの記事ではアメブロの記事で使える「おしゃれ・かっこいい見出し」を紹介します。

ameblo.jp