【アメブロ用シンプルな見出し】線・罫線・ラインタイプの素材を紹介！コピペで簡単利用

この記事ではアメブロの記事で使える「シンプルな見出し」を紹介します。

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

見出しの見本①

見出しの見本②

見出しの見本③

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

見出しで記事が分かりやすく、読みやすくできますね。シンプルな見出しなので、どんなアメブロでも使いやすいです。

あめっくま

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

自己紹介はこちら⇒

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

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

ameblo.jp

注意

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

この記事を書いた人

あめっくま

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

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

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

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

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

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

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

実線の下線見出し

見出しのデザイン

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

見出しのデザイン

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

見出しのデザイン

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

見出しのデザイン

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

ドット線の下線見出し

見出しのデザイン

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

見出しのデザイン

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

見出しのデザイン

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

見出しのデザイン

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

2色の下線見出し

背景色が白色のブログ専用です。（背景色があると白く塗りつぶされます）

見出しのデザイン

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

見出しのデザイン

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

見出しのデザイン

<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-orange" style="background: linear-gradient(to right, #fca60d 0% 25%, #fed690 25% 100%); padding: 0 0 5px 0;"><span style="display: block; background: #ffffff;">見出しのテキスト</span></h2>
<p> </p>

左線の見出し

見出しのデザイン

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

見出しのデザイン

<h2 class="entry-text-green" style="border-left: 5px solid #59a136; padding: 0 0.3em;">見出しのテキスト</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-orange" style="border-left: 5px solid #fca60d; padding: 0 0.3em;">見出しのテキスト</h2>
<p> </p>

左線＋下線の見出し

見出しのデザイン

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

見出しのデザイン

<h2 class="entry-text-green" style="border-left: 10px solid #59a136; border-bottom: 2px solid #59a136; 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>

見出しのデザイン

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

上下線の見出し

見出しのデザイン

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

見出しのデザイン

<h2 class="entry-text-green" style="border-top: 3px solid #59a136; border-bottom: 3px solid #59a136; padding: 0.1em 0.5em;">見出しのテキスト</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-orange" style="border-top: 3px solid #fca60d; border-bottom: 3px solid #fca60d; padding: 0.1em 0.5em;">見出しのテキスト</h2>
<p> </p>

上下ドット線の見出し

見出しのデザイン

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

見出しのデザイン

<h2 class="entry-text-green" style="border-top: 3px dotted #59a136; border-bottom: 3px dotted #59a136; 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>

見出しのデザイン

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