読者です 読者をやめる 読者になる 読者になる

たわしの帖

やれることをやってみるブログ

たわしの帖

はてなブログで使うべき“記法”はどれ?h2タグを使いたいなら◯◯記法モード!

ブログ ブログ-カスタマイズ(はてなブログ)

 寝て起きたら読者が2桁になっていた現実に驚愕し、挙動不審になった束子です。
 うぉあああああありがとうございます!! 寝る前は4人だったのに、19人って……。本当にありがとうございます。これからよろしくお願い致します。

f:id:kimamalist:20161104210638j:plain

 さて。はてなブロガーさんに質問です。皆さんは記事を書くときに、どの編集モードを使っているでしょうか。恐らく「見たままモード」で書いている人が多いと思います。私もつい先日までは見たままで書いていました。

 でも、「見たままモード」って何気に面倒臭い。HTMLを編集する時はHTMLモードにしなきゃならないし、妙な改行が入り込んでいたりするし、余計な見出しが誕生してたりする。そして何より、h2タグが使えない!

 h2タグが使えないのはSEO的に宜しくありません。今回は、はてなブログで使うべき“記法”はどれなのか。そしてh2タグが簡単に使える編集モードはどれなのかを紹介したいと思います。
 ※この記事は「はてなブログ」ユーザー向けの記事です。

そもそも“記法”とか編集モードって?

 編集モードとは簡単に言えば「はてなブログで記事を書く時のエディターの種類」のこと。記法は、そのエディターで使われる「書き方」のようなものです。ユーザー画面の「設定→基本設定」で変更することが出来ます。

f:id:kimamalist:20161104132403j:plain
 画面左のメニュー画面から「設定」を選び、

f:id:kimamalist:20161104132424j:plain
 「基本設定」画面を下にスクロールして、

f:id:kimamalist:20161104132434p:plain
 ここです。はてなブログでは見たままモードの他にはてな記法モードMarkdownモードを選択することが出来ます。ちなみに、この記事はMarkdownモードで書かれました。

h2タグとは

 h2タグとは、見出しの種類の1つです。
 見出しはタイトルのh1を筆頭に、h2、h3、h4……と順番になっています。見出しタグを使ってコンテンツを正しく、階層ごとに構築してあげるとSEOでプラスの効果を与えることが出来ます。

 裏を返せばタグの順番が正しくないと「このコンテンツはタグが正しく構築されていない、ダメなサイトだなぁ」と見なされてしまうのです。

 詳しくは「バズ部」で勉強してください。めちゃんこ分かりやすいので初心者さんは読むべきです。
bazubu.com

h2タグを使いたいならMarkdownモードがオススメ!

 見出しのタグを正しく、簡単に使いたいならMarkdownモードがオススメです。
 Markdownとは簡単にweb上で文章を作り上げることが出来るマークアップ言語のことです。ソフトウェア開発などでも利用されているので、プログラマーやオリジナルのブログカスタマイズをしている人にはお馴染みだと思います。

 決められた記法を守ればパソコン以外のガジェットでも簡単に記事が書ける他、WordPressなどに移転しても利用できる言語です。

Markdownモードで見出しを作るには

 Markdownモードでは、見出しとなる文の先頭に『#』を付けるだけで各見出し作ることが出来ます。

  • # 見出し1(タイトル)
  • ## 見出し2
  • ### 見出し3
  • #### 見出し4

 というように、『#』の数を変えるだけで見出しの種類が変えられるのです。エディター上部の編集ゾーンを操作しなくて良いので、とても楽です。

はてな記法モードでは使えないのか

 Markdownモード同様、独自の記法で文章を書いていく「はてな記法モード」。
 h2タグを簡単に作れそうですが「はてな記法一覧 - はてなダイアリーのヘルプ」を確認すると、見出し記法はh3からになっています。h2タグを使うにはHTMLを入力しなければいけません

※h2タグを利用するときはデザインCSSの編集が必要

 何故か、はてなブログでは大見出し=h3となっているようです。h2を大見出しとして使いたい場合は、デザインCSSで見出しのカスタマイズを行いましょう。

 コピペでOK!な有難い見出しカスタマイズのほとんどが、はてなブログの設定(大中小)に倣ってh3〜h5のデザインとなっています。CSSにデザインタグをコピペする時は、見出しの数字を自分で修正してください。

見たままモードではh2タグが使えない?

 見たままモードではh2タグが使えない! と前述しましたが、正確には使えます。しかし、使うには一度HTMLページで編集しなければなりません。

 はてなブログの「見出し」は大見出し=h3、中見出し=h4、小見出し=h5となっています。つまりタグを気にせず、ただ文章を書いているだけだと…… f:id:kimamalist:20161104141551p:plain
 見出しを効果的に使っているつもりでも、

f:id:kimamalist:20161104141627p:plain
 HTMLを確認すると、h2タグが飛ばされて誤った階層が組まれていますね。HTML編集ページでタグを修正しないと、

f:id:kimamalist:20161104141640p:plain
 こうなります。本来の大見出し(h2)がありません(当ブログの大見出しデザインは「見たままモードではh2タグが使えない?」部分を参照)。

 画像のように短い文章なら直すのも簡単でしょう。けれども文字数が5000文字を超える力の入った記事や、見出しを多く使った場合。ひとつひとつタグを編集するとなると……考えたくありません。ひっじょーに面倒です。

www.pojihiguma.com
 ポジ熊(id:pojihiguma)氏も、上の記事内で「面倒」と申しております。

タグの順番なんか気にしなくて良いじゃん!?

 「別にタグの順番なんか気にしなくて良いじゃん、デザインが見やすければ!」「見出しよりも記事の中身の方が大事でしょ!?」と言われてしまうとそれまでです。……がしかし、ブログの収益や検索導入を狙うためにSEOを考慮すると「見出しタグの階層が出来てないなぁ」と判断されるのは良いことではありません。

 それに、h2を吹っ飛ばしてh1、h3、h4ってなんか気持ちが悪くないですか? 全6巻のシリーズ本を目の前にして2巻だけない、みたいな。そんな感じで。

Markdownのデメリット

 Markdownモードにすることで、少なからずデメリットもあります。

慣れるまで生産率が落ちる

 Markdownには見出しの『#』以外にも独自の記法があります。例えば改行はエンターキーではなく、半角スペースを2つ入力しなければなりません。見たままモードやはてな記法では改行=エンターだったので、半角スペース×2は慣れなくて生産率が落ちる可能性があります。

 ですが、慣れると案外スムーズに出来るものです。それに引用は『>』、箇条書きは『*』で作成出来るので、見出しと同じく編集ゾーンで選択する手間がありません。キーボードで全て完了します。
 詳しいMarkdownの記法はこちらを参照してください。

nohack-nolife.hatenablog.com

過去記事はMarkdownで編集出来ない

 過去に見たままモード、もしくははてな記法で執筆した記事は、その時に設定していた編集モードでしか加筆修正出来ないようになっています。

 つまり、ある程度記事を作成したところでMarkdownモードに変更し「h2タグを入れよう!」と思っても、#では入れられません。HTMLでの編集を余儀なくされます。

h2タグを使いたい&長くブログをやるならMarkdownモードで書こう!

 ブログの収益化や検索導入を増やしたい! だからSEO対策をしたい! という人や、長くブログをやり続けようという人はMarkdownモードでの執筆をオススメします。

 最初は慣れないと思いますが、覚えることに難しいことは一切ありません。むしろ、一度覚えれば面倒な作業が減るので楽なぐらいです。ブログを始めたばかりの人は是非、早めのMarkdownを検討願いたい。
 もちろん、記事をある程度公開している中級者さんも遅くはないので、h2タグを使っていきたい人はMarkdownを一度試されては如何でしょうか。

 ブログで最も大事なのは「いかに楽で簡単に、良い記事を増やせるか否か」だと思います。“良い記事”の基準は表で見えるものばかりではありません。まずは簡単な「見出しの階層構造」から理解して、裏側からも“良いブログ”になるように働きかけてみましょう。