はてなブログのスマホアプリから目次（見出し）を作る方法

はてなブログをスマホで投稿、運営して現在半年が経過したししとうです。

今回は、はてなブログの公式スマホアプリから目次を作成、挿入する方法についてご紹介します。

「アプリからは目次が作れないよ」なんて言ってる人もいますが、めちゃくちゃ簡単に作れます。

ぜひ参考にして、より良い記事作成に励んでください！

スマホアプリで見出しと目次は作れる

目次を挿入するにあたって、まず見出しというものとの関係性を踏まえておく必要があります。

目次とはただの一覧表です。そこに表示させるもの（見出し）が無ければそもそも意味を成しません。

そのため、記事に目次を表示させるためには、

①見出しの作成

②目次の作成

という２つの手順を踏まなければなりません。

ここからは、見出しと目次に分けて挿入方法を説明していきます。

基本的に見出しを挿入する機能は、PC・アプリどちらにも搭載されています。

しかし目次の挿入に関しては、アプリ版では機能省略されているため、挿入アイコンはありません。

もし、目次のみの挿入方法を知りたい場合は、見出し部分の説明を飛ばして見て下さい。

見出しについて（hタグ）

まずは、見出しについて簡単に説明します。

見出しとは、話の区切りやカテゴライズする際に使われる部分ですね。

殆どのブログが見出しを用いて、記事を執筆しています。

理由としては、

見やすい

注目させやすい

この２つが最も大きいですね。

見出しには「大見出し」「中見出し」「小見出し」とあります。

中・小見出しは、それぞれ上位のテーマを分類したり、過程を紐解いたりする際に用いられます。

目次ではこのように見やすく表示されます。

記事ではこのような感じですね（デザインは人それぞれです）

センス無いデザインだなとか言わないでください（半ギレ）

小見出しももちろん使えますが、逆に記事が読みにくくなる場合があるので、僕は殆ど使用しません。

ここまで分かれば見出しの作成方法を見ていきましょう。

【＋αの知識】

見出しはhタグというHTML（記号）で分類管理されています。

はてなブログでは、

記事タイトル→h1

記事の説明→h2

大見出し→h3

中見出し→h4

小見出し→h5

となっています。つまり、記事中の見出しはh3〜h5を用いています。

※ワードプレスなどは少し違いますので注意

見出しの作成・挿入方法

さてさて、前置きが長くなりましたが実際に見出しを作ってみましょう。

と言っても、めちゃくちゃ簡単で拍子抜けしますよ（笑）

※はてなブログの編集モードは、「見たままモード」のままで大丈夫です。

①はてなのアプリで記事編集の画面を開きます。

②見出しにしたい文を選択します。

③見出しアイコンを押します。

これで大見出しの完成です。

そのまま見出しアイコンをもう一度押してみて下さい。

少し小さくなりませんか？（中見出し）

もう一度押してみて下さい。

また小さくなったと思います。（小見出し）

もう一度押してみると、元に戻ります。

こうすれば先ほど説明した、大・中・小の見出しの区分けが行えます。

方法はこれだけです（笑）

文字色などの効果重複も出来ますので、デザインに合わせて変更してみてください。

目次について（contents）

ここからは目次の説明に移ります。

まずブログ記事において、目次はただの文字では無いことは皆さん知っていますか？

分かりやすく考えると、

【見出しを自動的に一覧にして、さらに見出しをクリックするとその項目まで移動出来る機能】

目次という機能を挿入して、記事内を整理しているわけです。

このように、何かしらの機能を果たすためにはHTMLと呼ばれるコードを用いる必要があります。

ブログを長く続けていくにあたって、HTMLは知っておいた方が良い事なので、知らない方は一度調べて頂けたらと思います。

先ほどの見出しを表すhタグと同様に、目次にもその役目を果たすHTMLコードが存在します。

それが

[:contents ]というコードです。

※ここでは、誤変換されないように最後にスペースを挟んでいますが、実際は詰めて記載してください。

目次の作成・挿入方法

目次も見出し同様、HTMLコードさえ知っておけば、簡単な手順で記事内に挿入出来ます。

①はてなのアプリで記事編集の画面を開きます。

②目次を挿入したい部分に[:contents ]と記載します。

これだけです。

書いたら、一度プレビュー画面で確認してみましょう。

一覧になっている見出しの部分をクリックして、移動したら成功している筈です。

目次の挿入位置について

目次ってどこに入れとけばいいの？という質問がありました。

もちろん序盤に記載しておく情報ですが、大きく分けて2パターンの挿入位置があります。

１つはこの記事のように、

前置き→目次→本題というパターンです。

もう一つは、

目次→（前置き）→本題のパターンですね。

前置きに目を通しておいて欲しい場合には、一つ目の挿入位置が有用になります。

有名ブロガーさん達の殆どは、前置きで端的に結論を示している場合が多いので、一つ目のパターンがよく利用されていますね。

記事構成に合わせて、目次の挿入位置も検討してみると良いでしょう。

目次や見出しを作ることのメリット

はてなアプリを使用した目次、見出しの導入方法の解説は以上になります。

ここからは初心者ブロガーに役立つワンポイント解説を。

「そもそも、なぜ目次を付けたほうが良いの？」

ブログを始めたばかりの方は、こう思われる方も少なくないはずです。

簡潔にまとめると、目次には以下のようなメリットがあります。

読者が快適に記事を読める

当たり前の話なんですが、これが意外と重要になってきます。

目次を使用する事で、探している情報があれば一目で分かりますし、この記事がどんな内容なのかをある程度把握出来ます。

目次が無いと、本当に必要な情報に辿り着く前にサイトから離脱してしまう事も少なくありません。

そのため、情報量の多い記事であればあるほど効果は大きいですね。

読者が「この記事は読みやすかった」と思ってくれるだけで、また見に来てくれる可能性も上がるわけですから馬鹿に出来ません。

Googleの評価が上がる

ブログで収益化を目指している人は、Google検索からの流入はとても重要になります。

検索上位に入るためには、質の良い記事を書く事が一つのポイントになります。

実は、このポイントの中に「情報が分かりやすく整理されている事」が含まれているのです。

つまり、目次を使用する事によって記事情報が整理され、Googleからの評価が上がるというSEO効果が期待出来ます。

対象になる検索キーワードが増える

これについては、初心者の方には難しい話になるのですが、見出しの使用で検索に引っかかるキーワードも増えます。

基本的に、検索で引っかかるキーワードというのは記事タイトル（h1）がメインになります。

しかし、見出しに使用するhタグ（h3〜5）も、記事タイトル程では無いですが検索に影響させる事が出来ます。

特にh3タグである大見出しはキーワードを意識して執筆する事で、検索上位に入るための対策になるでしょう。