ブログで文章を書く時は、見出しを使うと読みやすくなりますよね。
アメブロをやっている方って基本的に長文の文章でもあえて短く切って、行を何行も使って(ポエムの様な感じ?)書く傾向があり、実際見出しを使っていないという人も多いと思います…。
ですが!読む人の事を考えて見出しは付ける事をおススメします!
昔は無かったですが、今は簡単に見出しの装飾が簡単に出来るようになりました。
なので、カスタマイズなど難しいことをしなくてもすぐに見出しを付けられるわけですが…
可愛すぎるデザインや凝りすぎのデザインもそれはそれで…という人のために簡単にHTLMのコピペで出来るシンプルデザインの見出しを紹介します。

アメブロは絵文字などを含め、タダでさえ装飾が多いですよね。元々ついているデザインを使うのも楽で良いですが、趣味や遊びでブログをやってるわけじゃないよ~!という方にはやはり『シンプルですっきりしたデザイン』がおススメですのでこの記事を書いてみましたよ。
こちらではPCでブログを書く場合の方法のみ紹介しています。
アメブロの見出しをつける手順
1.「ブログ管理」から「ブログを書く」をクリック
まずブログ管理画面を開いて、ブログを書くをクリックします。


3.HTML表示タブをクリック
少し下の方へスクロールすると左下にタブがあるので、HTML表示をクリックします。


4.HTMLをコピペする
シンプルな見出しを6種類、次段落に表示してますので、そちらからコピペして下さい。




通常表示のタブに戻ると、どう表示されるか(実際のデザイン)が見れます。タイトル部分の文字の変更はこの画面ですると簡単で分かりやすいと思います。


シンプル見出し6選


No.1
下記HTMLをコピペして下さい。
HTML
<div style="border-bottom: 2px solid #009DBF; border-left: 10px solid #009DBF; padding: 13px;"><span style="font-size:1.4em;"><b>見出し1</b></span></div>
No.2
下記HTMLをコピペして下さい。
HTML
<div style="border-top: 3.5px solid #009DBF; border-bottom: 3.5px solid #009DBF; padding-left: 8px; padding-top: 5px; padding-bottom: 5px; font-weight: bold; color: #000000;"><span style="font-size: 22.4px;">見出し2</span></div>
No.3
下記HTMLをコピペして下さい。
HTML
<div style="border-left: 6px double #009DBF; padding: 10px; "><b>見出し3</b></div>
No.4
下記HTMLをコピペして下さい。
HTML
<div style="border-left: 5px solid #009DBF; padding: 10px;"><b>見出し4</b></div>
No.5
下記HTMLをコピペして下さい。
HTML
<div style="border-bottom: 6px double #009DBF; padding: 10px;"><b>見出し5</b></div>
No.6
下記HTMLをコピペして下さい。
HTML
<div style="border-bottom: 3px dotted #009DBF; padding: 10px;"><span style="font-size: 14.4px;"><b>見出し6</b></span></div>
最後に
シンプルでスッキリしたデザインの見出しいかがですか?



ブログを書く画面から、お洒落な見出しや囲み枠を選べる様になりましたが、かわい過ぎたり、凝りすぎのデザインはちょっと…、という方はぜひ使ってみてくださいね。
あくまで仕事で使っているブログには、過剰な装飾は、見にくかったりそもそもそれを書いている人はプロや専門家なの?と、見ている側への不安を与えたりするものなので、シンプルデザインの見出しや囲み枠を使うことをおススメします!
こちらで紹介した方法やコードなどの使用は自己責任で行ってください。ご自身で行った設定変更等により万が一エラーや損失が出ても当方では責任を負いかねます。