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

アメブロ用の見出し線

 

 

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

 

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

 

見出しの見本①
見出しの見本②
見出しの見本③

アメブロ用シンプルな見出しの見本

 

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

 

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

 

あめっくま
 

SEOにも強くなり、アメブロのアクセス数UPにも役立ちます。

 

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

 

 

 

注意

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

 

 

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

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

 

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

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

 

 

目次

 

 

 

実線の下線見出し 

見出しのデザイン

実線の下線見出し青

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

 

見出しのデザイン

実線の下線見出し緑

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

 

見出しのデザイン

実線の下線見出しピンク

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

 

見出しのデザイン

実線の下線見出しオレンジ

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

 

 

 

ドット線の下線見出し 

見出しのデザイン

ドット線の見出し青

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

 

見出しのデザイン

ドット線の見出し緑

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

 

見出しのデザイン

ドット線の見出しピンク

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

 

見出しのデザイン

ドット線の見出しオレンジ

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

 

 

 

2色の下線見出し 

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

 

見出しのデザイン

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>&nbsp;</p>

 

見出しのデザイン

2色下線の見出し緑

<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>&nbsp;</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>&nbsp;</p>

 

見出しのデザイン

2色下線の見出しオレンジ

<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>&nbsp;</p>

 

 

 

左線の見出し 

見出しのデザイン

左線見出し青

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

 

見出しのデザイン

左線見出し緑

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

 

見出しのデザイン

左線見出しピンク

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

 

見出しのデザイン

左線見出しオレンジ

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

 

 

 

左線＋下線の見出し 

見出しのデザイン

左線＋下線見出し青

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

 

見出しのデザイン

左線＋下線見出し緑

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

 

見出しのデザイン

左線＋下線見出しピンク

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

 

見出しのデザイン

左線＋下線見出しオレンジ

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

 

 

 

上下線の見出し 

見出しのデザイン

上下線の見出し青

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

 

見出しのデザイン

上下線の見出し緑

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

 

見出しのデザイン

上下線の見出しピンク

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

 

見出しのデザイン

上下線の見出しオレンジ

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

 

 

 

上下ドット線の見出し 

見出しのデザイン

上下ドット線の見出し青

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

 

見出しのデザイン

上下ドット線の見出し緑

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

 

見出しのデザイン

上下ドット線の見出しピンク

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

 

見出しのデザイン

上下ドット線の見出しオレンジ

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

 

 

 

人気の線タイプ見出し 

メインサイトの「アメブロメーカー」では、下記のような「素敵な見出し」も用意しています。

 

ストライプ下線の見出し

見出しの見本
見出しの見本
見出しの見本
見出しの見本

アメブロ用シンプルな見出し見本

 

 

 

グラデーション下線の見出し

見出しの見本
見出しの見本
見出しの見本
見出しの見本

アメブロ用シンプルな見出し見本

 

詳しくは👇の関連記事で、コードを確認して下さいね。

 

 

あめっくま
 

うまくできない場合は、遠慮なく質問して下さい。

 

 

関連記事

メインサイトの「アメブロメーカー」では、350種類以上の見出し素材を用意しています。

 

 

このアメブロ版ブログでも一部紹介しています。

 

カスタマイズ記事一覧

 

＼ 本格的アメブロ攻略サイト ／

＼ Twitterだけの有料級情報あり ／