こんにちは。ブランディングプロデューサーの櫻井圭子です。
アメブロには見出し機能があるのをご存知ですか?
長年ブログを書かれている方でも実は知らない人が多かったり、知っていたとしても正しい使い方を知らない人がほとんどです。
HTML
タグをコピペしてかわいい線や枠で装飾して目立たせて読みやすくするのもいいですが、見出しの本当の意味をしっかりと理解しながら使っていきましょうね。
コピペするだけで、かわいい枠や線で見出しを装飾するタグを沢山ご用意させていただきました。今日からあなたのブログ更新が楽になります!!
本日はアメブロの見出しをかわいい枠や線で装飾するタグというテーマでお届けします。

かわいい枠や線のタグでアメブロの見出しを装飾しよう

見出しとは?

そもそも見出しとは何でしょう?

見出し (みだし、英語: headline)とは、新聞を始めとする様々な記事、文章において内容の要点を非常に短い言葉にまとめ、本文より大きな字で(チャプター)や(セクション)の最初に置かれる言葉。
ウィキペディアより引用

keiko
【見出しがあると親切です!】
本を読む時の事を思い出していただきたいのですが、本のタイトルがあって、各章の見出しがあって、更に細かく分類された見出しがありますよね?
「この章にはこんな事を書いていますよ~。」と教えてくれているので、とても便利で親切です。

そう!!見出しとは文章をより読みやすくする為に重要なものなのです。

例えば・・・、アメブロで頑張って長文の記事を書いた時に読者さんに最後まで飽きずに読んでもらうにはどうすればいいでしょうか?
女性は長文を読むのが苦手な方が多いです。興味のあるテーマなら一度最後まで読んだ文章でも、きちんと落とし込む為に最初まで戻って更にもう一度読むなんてこともありますけどね。
では、果たしてどうすれば最後まで読んでもらうことができるのでしょうか・・・?

それは、単純ですが読者さんを飽きさせない工夫をすること。
ですので、見出しを入れて読みやすく工夫してあげましょうね。

 

アメブロの見出し機能の使い方

では実際にアメブロでの見出しの使い方をお伝えしますね。

いつも通り、記事を書く画面を開きましょう。

マイページブログ管理ブログを書く

 

【①見出しにしたい文字の入力】

いつも記事を書く通りに、見出しにしたい文字を入力する。

 

【②段落→見出しへ】

こちらに注目してください!!

デフォルトでは段落が選択された状態です。
通常通り文章を入力する時はこのまま書いてくださいね。

クリックしてみると・・・。

おぉぉぉぉ!!!!

初めて見たという方もいるのではないでしょうか!?

・大見出し
・中見出し
・小見出し

を、選ぶことができます。

※見出しにしたい文章を先に入力し、ドラッグして大見出しを選んでくださいね。

 

【③見出しを入れた後に通常通りの文章へ戻す】

改行すると見出しモードが解除されて、通常通りの文章を入力することができます。

※普通の文章に戻らないときはHTML表示にしてタグを確認してみましょう。

 

大文字と見出しの違い

そっかぁー!!見出しって文字を大きくして見やすくすることなんだね!!

いやいや、違う違う!!

見出し機能を使うと文字は大きくなるのですが、ただ文字を大きくしてるだけではないのです。

こちらはアメブロでの記事の入力画面です。
上は大見出しで文字を大きくしています。
下は文字のサイズをXLにして大きくしています。

一見同じに見えると思いますが、全然違うんですよ。

HTML表示にしてみるとわかります。

大見出しを入れたところのタグは<h2>になっているのがわかりますね。
文字サイズを大きくしたところのタグは<span style=”font-size:1.96em;“>となっています。

見た目は同じに見えるかもしれないのですが、全然違うんです。

hタグとは、Googleなどの検索エンジンに「このブログにはこんなことが書いていますよ」と教えてあげる重要な役割があるのです。

Hの後ろにつく数字は小さいほど重要度が高いです。

・大見出し→h2
・中見出し→h3
・小見出し→h4

見出しを入れることでSEO対策になるということを覚えていてくださいね。

keiko
プレビューで見てみたり、実際にブログをアップしてみると、見出しにした部分の文字が大きくなっているのがわかります。
ただ、これだと装飾が何もなくて寂しい・・・。
かわいいブログにしたい!おしゃれにしたい!
そんな方は下記でご紹介させていただくタグを使ってみてくださいね。コピペで簡単にかわいい枠や線で装飾する事ができます!!

アメブロの記事の中での見出しの使い方

①「ブログを書く」をクリックする。

②HTML表示にする。

③下記のサンプルの中から使いたい見出しのタグをコピペする。

④通常表示に戻して見出しを入力する。

コピペで簡単!枠や線で作るかわいい見出しのタグ一覧

下線の見出し

シンプルイズベスト!
超シンプルなアンダーラインの見出しです。

 

 

 


基本の見出し

見出しと言えばこれ!
読んでいる読者さんにも伝わりやすい定番のデザインです。

 

 

 


上下ラインの見出し

ちょっと目立たせたい時には、上下に線のあるデザインがおすすめ。

 

 

 


上下破線の見出し

上下ラインの破線バージョン!
ミシンの縫い目のようにも見えるので、かわいいナチュラルなテイストになります。

 

 

 


上下点線(ドット)の見出し

上下をドット線にする事で女の子っぽいかわいいデザインとなります。

 

 

 


上下二重線の見出し

破線や点線よりも綺麗目な感じのデザインとなります。

 

 

 


ピンクのポイントの見出し

付箋風のデザインにピンクのポイントをつけました。

 

 

 


グレーのポイント付きの見出し

落ち着いた大人ピンクとグレーの組み合わせ。

 

 

 


中が塗りつぶしの吹き出しの見出し

吹き出しの見出しは人気のデザインです!
塗りつぶしの色が濃い時は文字色は白がおすすめです。

 

 

 


白背景の吹き出しの見出し

吹き出しの線の色と文字の色を同じにすると統一感がでます。

 

 

 


重ねた付箋のデザインの見出し(ラベンダー&紫)

付箋を2枚重ねたようなデザインの見出しです。

 

 

 


重ねた付箋のデザインの見出し(ピンク&黄色)

上記の色違いバージョンです。パステルカラーでかわいい!!

 

 

 

タグの解説&色を変える方法

タグを理解すると自分の好きな色に変更する事ができます。

background:背景色
padding:枠と文字の間の隙間の幅
border:線の太さ、種類、色を指定
・線の種類
→solid…直線/double…二重線/dashed…破線/dotted…点線

#fff、#fee1fcなどは色の番号です。
ご自分の好きな色に変更したい時は、#より後ろの英数字を変更してくださいね。

■色を変更する時はこちらのサイトがオススメです!
原色大辞典

【色や線の太さを変更する時の注意点】
タグは1文字でも消してしまうと、きちんと表示されなくなってしまいます。
うっかり消さないように注意してくださいね。

まとめ

■見出しを入れる事によって、長い文章でも読みやすくなります。

■かわいい枠や線で装飾する事で、味気ないアメブロの見出しもかわいい&おしゃれに変身!!

■タグは1文字でも消してしまうときちんと表示されません。変更する時はウッカリ消さないように気をつけてコピペしてくださいね。

というわけで、本日はアメブロの見出しをかわいい枠や線で装飾するタグというテーマでお届けさせていただきました。本日も最後までお読みいただき、ありがとうございました。