この記事では、コピペだけで簡単にアメブロで使える、かわいい見出し線を作成する方法について解説していきます。
あなたは、アメブロを使って記事を作成するときに、
と、考えたことはありませんか？
確かに、見出しだけで使えるソースが用意されていても、どうやって使えばいいのかわからないと迷ってしまいますよね。
これ結論からお伝えしますと、
- コピペだけで可愛い見出しを作る方法は、こちらの6ステップを行うだけです。
- アメブロの「ブログを書く」をクリックする
- 「HTML表示」をクリックする
- 見出しデザインの「HTMLソース」をコピーする
- アメブロの記事にコピーした「HTMLソース」を貼り付ける
- 「通常表示」をクリックする
- 「見出し」の部分を付けたい見出し名に変更する
それでは詳しく見ていきましょう。
目次
サブスク自動集客ツール
「売り上げが伸びない…。」など、集客ができずに悩んでいませんか？
ツールをポチッとするだけでほったらかしで集客できてしまうツール。
月間7,500万人以上が利用しているアメブロからあなたのブログへ、自動で集客する方法に興味がある方におすすめです。
アメブロで可愛い見出し線を作成する手順はこちら！
コピペだけで簡単に見出し線を作る方法はこちらでしたね。
- アメブロの「ブログを書く」をクリックする
- 「HTML表示」をクリックする
- 見出しデザインの「HTMLソース」をコピーする
- アメブロの記事にコピーした「HTMLソース」を貼り付ける
- 「通常表示」をクリックする
- 「見出し」の部分を付けたい見出し名に変更する
それでは1つ1つ見ていきましょう。
step
1アメブロの「ブログを書く」をクリックする
まずは、アメブロにログインをして「ブログを書く」をクリックします。
step
2「HTML表示」をクリックする
記事作成画面になったら、下にあります「HTML表示」をクリックします。
step
3見出しデザインの「HTMLソース」をコピーする
「HTML表示」をクリックしたら、下記の見出しデザインの「HTMLソース」をコピーします。
こちらをコピーしてください。
コピペHTMLソース
<div style="border-left:10px solid #FF4500; border-bottom:1px solid #FF4500; padding:0 0 4px 8px; font-weight:bold;">見出し</div>
step
4アメブロの記事にコピーした「HTMLソース」を貼り付ける
次はコピーした「HTMLソース」を、アメブロの記事に貼り付けてください。
step
5「通常表示」をクリックする
「HTMLソース」を貼り付けたら、「通常表示」をクリックしましょう。
step
6「見出し」の部分を付けたい見出し名に変更する
すると既に見出しデザインが表示されていますので、「見出し」と書かれた部分を変更したら完了です。
この部分の文章を消して書き換えて記事を公開したら完成です。
コピペOK！アメブロで使えるかわいい見出しデザイン一覧
アメブロで使える見出し線デザイン
コピペHTMLソース
<div style="border-left:10px solid #FF4500; border-bottom:1px solid #FF4500; padding:0 0 4px 8px; font-weight:bold;">見出し</div>
コピペHTMLソース
<div style="border-left:10px solid #FF00FF; border-bottom:1px solid #FF00FF; padding:0 0 4px 10px; font-weight:bold;">見出し</div>
コピペHTMLソース
<div style="border-left:10px solid #FF4500; border-bottom:1px solid #FF4500; padding:0 0 4px 8px; font-weight:bold;">見出し</div>
コピペHTMLソース
<div style="border-left:10px solid #FF4500; border-bottom:1px solid #FF4500; padding:0 0 4px 8px; font-weight:bold;">見出し</div>
点線（見出し線）
コピペHTMLソース
<div style="border-left:10px dashed #FF4500; border-bottom:1px dashed #FF4500; padding:0 0 4px 10px; font-weight:bold;">見出し</div>
コピペHTMLソース
<div style="border-left:10px dashed #FF00FF; border-bottom:1px dashed #FF00FF; padding:0 0 4px 10px; font-weight:bold;">見出し</div>
コピペHTMLソース
<div style="border-left:10px dashed #0000FF; border-bottom:1px dashed #0000FF; padding:0 0 4px 10px; font-weight:bold;">見出し</div>
コピペHTMLソース
<div style="border-left:10px dashed #008000; border-bottom:1px dashed #008000; padding:0 0 4px 10px; font-weight:bold;">見出し</div>
二重線（見出し線）
コピペHTMLソース
<div style="border-left:10px double #FF4500; border-bottom:1px double #FF4500; padding:0 0 4px 10px; font-weight:bold;">見出し</div>
コピペHTMLソース
<div style="border-left:10px double #FF00FF; border-bottom:1px double #FF00FF; padding:0 0 4px 10px; font-weight:bold;">見出し</div>
コピペHTMLソース
<div style="border-left:10px double #0000FF; border-bottom:1px double #0000FF; padding:0 0 4px 10px; font-weight:bold;">見出し</div>
コピペHTMLソース
<div style="border-left:10px double #008000; border-bottom:1px double #008000; padding:0 0 4px 10px; font-weight:bold;">見出し</div>
アメブロで使える見出し付き囲み枠デザイン
コピペHTMLソース
<fieldset background-color:="" style="padding: 5px 5px 5px 20px; border: 1px solid #FF4500;"><legend style="font-size: 10px; line-height: 21px; background-color: #FFFFFF;"><strong><font size="3"><span style="font-size: 18px;">見出し</span></font></strong></legend>本文</fieldset>
コピペHTMLソース
<fieldset background-color:="" style="padding: 5px 5px 5px 20px; border: 1px solid #FF00FF;"><legend style="font-size: 10px; line-height: 21px; background-color: #FFFFFF;"><strong><font size="3"><span style="font-size: 18px;">見出し</span></font></strong></legend>本文</fieldset>
コピペHTMLソース
<fieldset background-color:="" style="padding: 5px 5px 5px 20px; border: 1px solid #0000FF;"><legend style="font-size: 10px; line-height: 21px; background-color: #FFFFFF;"><strong><font size="3"><span style="font-size: 18px;">見出し</span></font></strong></legend>本文</fieldset>
コピペHTMLソース
<fieldset background-color:="" style="padding: 5px 5px 5px 20px; border: 1px solid #008000;"><legend style="font-size: 10px; line-height: 21px; background-color: #FFFFFF;"><strong><font size="3"><span style="font-size: 18px;">見出し</span></font></strong></legend>本文</fieldset>
点線（見出し付き囲み枠）
コピペHTMLソース
<fieldset background-color:="" style="padding: 5px 5px 5px 20px; border: 1px dashed #FF4500;"><legend style="font-size: 10px; line-height: 21px; background-color: #FFFFFF;"><strong><font size="3"><span style="font-size: 18px;">見出し</span></font></strong></legend>本文</fieldset>
コピペHTMLソース
<fieldset background-color:="" style="padding: 5px 5px 5px 20px; border: 1px dashed #FF00FF;"><legend style="font-size: 10px; line-height: 21px; background-color: #FFFFFF;"><strong><font size="3"><span style="font-size: 18px;">見出し</span></font></strong></legend>本文</fieldset>
コピペHTMLソース
<fieldset background-color:="" style="padding: 5px 5px 5px 20px; border: 1px dashed #0000FF;"><legend style="font-size: 10px; line-height: 21px; background-color: #FFFFFF;"><strong><font size="3"><span style="font-size: 18px;">見出し</span></font></strong></legend>本文</fieldset>
コピペHTMLソース
<fieldset background-color:="" style="padding: 5px 5px 5px 20px; border: 1px dashed #008000;"><legend style="font-size: 10px; line-height: 21px; background-color: #FFFFFF;"><strong><font size="3"><span style="font-size: 18px;">見出し</span></font></strong></legend>本文</fieldset>
二重線（見出し付き囲み枠）
コピペHTMLソース
<fieldset background-color:="" style="padding: 5px 5px 5px 20px; border: 4px double #FF4500;"><legend style="font-size: 10px; line-height: 21px; background-color: #FFFFFF;"><strong><font size="3"><span style="font-size: 18px;">見出し</span></font></strong></legend>本文</fieldset>
コピペHTMLソース
<fieldset background-color:="" style="padding: 5px 5px 5px 20px; border: 4px double #FF00FF;"><legend style="font-size: 10px; line-height: 21px; background-color: #FFFFFF;"><strong><font size="3"><span style="font-size: 18px;">見出し</span></font></strong></legend>本文</fieldset>
コピペHTMLソース
<fieldset background-color:="" style="padding: 5px 5px 5px 20px; border: 4px double #0000FF;"><legend style="font-size: 10px; line-height: 21px; background-color: #FFFFFF;"><strong><font size="3"><span style="font-size: 18px;">見出し</span></font></strong></legend>本文</fieldset>
コピペHTMLソース
<fieldset background-color:="" style="padding: 5px 5px 5px 20px; border: 4px double #008000;"><legend style="font-size: 10px; line-height: 21px; background-color: #FFFFFF;"><strong><font size="3"><span style="font-size: 18px;">見出し</span></font></strong></legend>本文</fieldset>
囲み枠デザイン
コピペHTMLソース
<div style="padding:10px; border:2px solid #FF4500;">見出し</div>
コピペHTMLソース
<div style="padding:10px; border:2px solid #FF00FF;">見出し</div>
コピペHTMLソース
<div style="padding:10px; border:2px solid #0000FF;">見出し</div>
コピペHTMLソース
<div style="padding:10px; border:2px solid #008000;">見出し</div>
点線（囲み枠のみ）
コピペHTMLソース
<div style="padding:10px; border:2px dashed #FF4500;">見出し</div>
コピペHTMLソース
<div style="padding:10px; border:2px dashed #FF00FF;">見出し</div>
コピペHTMLソース
<div style="padding:10px; border:2px dashed #0000FF;">見出し</div>
コピペHTMLソース
<div style="padding:10px; border:2px dashed #008000;">見出し</div>
二重線（囲み枠のみ）
コピペHTMLソース
<div style="padding:10px; border:4px double #FF4500;">見出し</div>
コピペHTMLソース
<div style="padding:10px; border:4px double #FF00FF;">見出し</div>
コピペHTMLソース
<div style="padding:10px; border:4px double #0000FF;">見出し</div>
コピペHTMLソース
<div style="padding:10px; border:4px double #008000;">見出し</div>
吹き出し風の見出し
コピペHTMLソース
<h3 style="margin:0;background: #FF4500;color: #FFFFFF;text-align: center;padding: 5px;">見出し</h3>
<div style="margin-left:10%;width: 0;height: 0;border-top: 15px solid #FF4500;border-right: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 10px solid transparent;"> </div>
<p>本文</p>
コピペHTMLソース
<h3 style="margin:0;background: #FF00FF;color: #FFFFFF;text-align: center;padding: 5px;">見出し</h3>
<div style="margin-left:10%;width: 0;height: 0;border-top: 15px solid #FF00FF;border-right: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 10px solid transparent;"> </div>
<p>本文</p>
コピペHTMLソース
<h3 style="margin:0;background: #0000FF;color: #FFFFFF;text-align: center;padding: 5px;">見出し</h3>
<div style="margin-left:10%;width: 0;height: 0;border-top: 15px solid #0000FF;border-right: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 10px solid transparent;"> </div>
<p>本文</p>
コピペHTMLソース
<h3 style="margin:0;background: #008000;color: #FFFFFF;text-align: center;padding: 5px;">見出し</h3>
<div style="margin-left:10%;width: 0;height: 0;border-top: 15px solid #008000;border-right: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 10px solid transparent;"> </div>
<p>本文</p>
見出しの色を変更する方法とは？
アメブロの見出しの色を変更する手順はコチラになります。
- アメブロの「ブログを書く」をクリックする
- 「HTML表示」をクリックする
- 見出しデザインの「HTMLソース」をコピーする
- アメブロの記事にコピーした「HTMLソース」を貼り付ける
- カラーコード表で変更したい色のコードをコピーする
- 「＃」から始まる英数字にコピーしたコードを貼り付ける
- 「通常表示」をクリックして色が変わっているかを確認する
それでは詳しく見ていきましょう。
step
1アメブロの「ブログを書く」をクリックする
まずは、アメブロにログインをして「ブログを書く」をクリックします。
step
2「HTML表示」をクリックする
記事作成画面になったら、下にあります「HTML表示」をクリックします。
step
3見出しデザインの「HTMLソース」をコピーする
「HTML表示」をクリックしたら、下記の見出しデザインの「HTMLソース」をコピーします。
こちらをコピーしてください。
コピペHTMLソース
<div style="border-left:10px solid #FF4500; border-bottom:1px solid #FF4500; padding:0 0 4px 8px; font-weight:bold;">見出し</div>
step
4アメブロの記事にコピーした「HTMLソース」を貼り付ける
次はコピーした「HTMLソース」を、アメブロの記事に貼り付けてください。
step
5カラーコード表で変更したい色のコードをコピーする
「HTMLソース」を貼り付けたら、次は下記のカラーコード表のサイトを開きましょう。
こちらで変更したい色のコードをコピーしていきましょう。
今回は下記の「青（Blue）」の表にあります「#0000FF」をコピーします。
step
6「＃」から始まる英数字にコピーしたコードを貼り付ける
次はコピーした「#0000FF」を、見出しのHTMLソースに貼り付けます。
下記の「①」と「②」の両方にコピーしてカラーコードを貼り付けましょう。
変更したら下記のように「#FF4500」→「#0000FF」となります。
上記でお伝えしました見出しですが、下記の赤文字部分を変更すると色が変わります。
コピペHTMLソース
<div style="border-left:10px solid #FF4500; border-bottom:1px solid #FF4500; padding:0 0 4px 8px; font-weight:bold;">見出し</div>
コピペHTMLソース
<fieldset background-color:="" style="padding: 5px 5px 5px 20px; border: 1px solid #FF4500;"><legend style="font-size: 10px; line-height: 21px; background-color: #FFFFFF;"><strong><font size="3"><span style="font-size: 18px;">見出し</span></font></strong></legend>本文</fieldset>
コピペHTMLソース
<div style="padding:10px; border:2px solid #FF4500;">見出し</div>
コピペHTMLソース
<h3 style="margin:0;background: #FF4500;color: #FFFFFF;text-align: center;padding: 5px;">見出し</h3>
<div style="margin-left:10%;width: 0;height: 0;border-top: 15px solid #FF4500;border-right: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 10px solid transparent;"> </div>
<p>本文</p>
step
7「通常表示」をクリックして色が変わっているかを確認する
「HTMLソース」を貼り付けたら、「通常表示」をクリックして色が変更になっていたら完了です。
【コピペで簡単作成】アメブロでかわいい見出し線を作成する方法のまとめ
まとめますと、
- アメブロの「ブログを書く」をクリックする
- 「HTML表示」をクリックする
- 見出しデザインの「HTMLソース」をコピーする
- アメブロの記事にコピーした「HTMLソース」を貼り付ける
- 「通常表示」をクリックする
- 「見出し」の部分を付けたい見出し名に変更する
以上が、【コピペで簡単作成】アメブロでかわいい見出し線を作成する方法についてでした。
是非、意識してチャレンジしてみてください。
ちなみにですが・・・。
アメブロを使って、効率的に副収入を得る方法はご存知ですか？
それは、アメブロと、ブログ（WordPress）やメールと組み合わせて、収益が上がる仕組みを作ることなんです。
厳しいことを言うと、個人が副業で収入を得ようとするなら、仕組み化が出来なければ安定して稼ぎ続けることは難しいです。
ここを間違えてしまうと、ムカつく上司の顔色を伺ったりする嫌なことを我慢する毎日だったり、お金がなく苦しい日々を過ごさなければいけなくなるんです…。
でも、そんな毎日嫌ですよね？
1日でも早く抜け出したいと思いませんか？
そこで、個人でも仕組みを作り副収入を得て、我慢している嫌なことから抜け出せる方法をメルマガ限定でお伝えしています。
もし、あなたが今抱えている悩みから、少しでも早く抜け出したいと考えているなら、こちらから無料登録を今すぐされて下さい。
（※お好きなときに、いつでも解除できますので安心して下さい。）