こころ・え・ごころのキタガワです。
アメブロの投稿エディタにある「見出し」をつける機能について、パソコンから書いてる人はわかる(もしくは見たことがある)と思います。
文字サイズの隣に「段落」と書いてあるところがあります。
これね(↓)
これ、正しく使えてますか?
「見出し」は記事を彩るデザインではない
たとえばこんな風(↑)に「大見出し」を入れるとします。
CSSで別途設定をすれば別ですが、スマホでもパソコンでも、やたら大きい太字フォントになります。
ちなみに、私のブログの場合はCSSをいじってるので、パソコン表示ではコチラです。←リンクから画像表示(笑)
初期設定で、「大見出し」はフォントサイズが30px超える(新スキンの場合)ので、違和感がある人も多いかと思いますが、どんなにデザイン的に違和感があっても、「じゃあ、少しフォントが小さめの中見出しから使おう!」というのはNGなのがこの「見出し」というものです。
「見出し」を使うときには守らなければならないルールがあります
文字の大きさを変えるための機能じゃないよ〜、ということは大昔の記事で書いたんですが、さらに「大見出し」「中見出し」「小見出し」を使うにはルールがあるわけですよ。
見出しというのは、つまり<h>タグがつくことなんですが、<h>タグには、<h1>から<h2>、<h3>・・・となっていきます。
で、アメブロの場合、「大見出し」は<h2>で、「中見出し」は<h3>、「小見出し」は<h4>です。
よくアメブロ以外のブログ(WordPressなど)では、「目次」というものが表示されることがありますね。
あれがいい例で、あれは文章内の見出し(hタグ)を拾ってあるんですよね。
簡単に書いちゃうと、こういう感じです。
1. 大見出し <h2>〜</h2>
(1)中見出し <h3>〜</h3>
(2)中見出し <h3>〜</h3>
2. 大見出し <h2>〜</h2>
(1)中見出し <h3>〜</h3>
a. 小見出し <h4>〜</h4>
b. 小見出し <h4>〜</h4>
(2)中見出し <h3>〜</h3>
3. 大見出し <h2>〜</h2>
で、なんで<h2>からなのか、と言えば、記事本体のタイトルが<h1>にあたります。
※<h1>は1回しか使いません。
わかりますかね?
章立てて文章を書く際の、「編(部)→章→節→項」みたいなものですね。
アメブロでここまで章立てて書くほどの内容ってなかなかない気がしますが(笑)
いずれにしても、記事内にちょっとした見出しをつけるのなら、ちゃんと「大見出し」にして、<h2>タグをつけて欲しいなぁと思うし、見た目に引っ張られて、間違った使い方をしてるのを見ると、余計なお世話なのは自覚しつつ「残念だなぁ」と思ってしまいます。
間違うくらいなら、単純に文字を大きくして、太字にして「見出しっぽくする」というのがアメブロでは安パイかもしれません。
文字装飾に引っ張られてはいけない機能
アメブロのエディターは、文字装飾に長けています。
html的な意味合いとかよりも、単なる装飾として、気軽に使えるようになっていると言って過言ではありません。
で、前述の通り、この「見出し」は装飾以外の意味合いのものだから気をつけてね、ということと、実はもう一つ、装飾ではない、使い方を知った上で使って欲しいのが「引用」です。
※ちなみにこれももちろんパソコンオンリーです。
「引用」は、その名の通り、記事の中に、出典元・参考文献がある引用箇所がある場合に、それを明確にするもので、こので区切った箇所は
<blockquote>〜</blockquote>
というタグで囲まれることになります。
先日、アメブロだったかなぁ?「見出し」のような形で「引用」を使っていた方がいらして、
おやおやおやおや・・・
と思い、全く記事の中身が入ってきませんでした。
いや、単に職業柄気になっただけですが、それが今回の記事を書こうと思った動機だったりします^^;
記事内のhtmlを美しくするには、アメブロは若干難ありで、一番最悪なのはパソコンのエディタとスマホアプリのエディタが全然違うことにありますが
だからこそ素人ユーザーにとっての「使いやすさ」が実現されているとも言えます。
(良し悪しは別としてw)
アメブロを使うメリットを知って、自分に合った発信ができるといいですね。
北川 直枝(こころ・え・ごころ)
パソコンが苦手という個人事業主さんにも、パソコンを楽しみながら、使ってもらえるお手伝いをしています。
札幌在住。現在は、夫と小学生男子と老犬2匹・金魚のお世話が本業ですが、パソコンでできること・可能性を日々追求することを忘れず楽しんでいます!
主催・講師 パソコン&企業アドバイザー伊藤史子
最後までお読みいただきありがとうございました!