雪ん子’s report

スマホの使い方(初級編)と日々のことをお伝えします。

雪ん子’s report

スマホだけでブログに挑戦!

はてなブログ 目次・見出しの挿入方法




こんばんは。雪ん子です。

たまにアクセスしてただいている過去の記事があります。
 
ページ内リンク(ジャンプ)を使ってみる
 
 
これで目次を作成しようとしている方もいるようです。
 
たしかに!
作れますよね。
 
 
しかし、はてなブログを利用している方は、ジャンプを使わなくても目次から見出しへ移動できますので、紹介します。
 
長い文章は「目次」や「見出し」があった方が見やすいこともあるので取り入れてみてはいかがでしょうか?
 
 

 
 

目次の入れ方

 

PC(パソコン)から書いている方

 
「見たまま」「はてな記法」「Markdown」どの方法でも簡単!
 
目次を設置したい場所で、このボタンを押すだけ!

f:id:snow0303:20190127223427j:plain
 
ボタンを押すと自動で[:contents]が挿入されます。
 
この[:contents]部分が目次になります。
 

スマホ(スマートフォン)で書く方 アプリ/Web

 
目次を設置したい場所に

[:contents]

と記入します。
 
 
 
たったこれだけで、文中に「見出し」があれば、「見出し」が自動で目次の項目として反映されます。
 
逆に、見出しのない文の場合、[:contents]を入れても無意味になってしまいます。
 
ちなみに、[:contents]は最初から設置しなくても、ひととおり文章を書き終えて、見出しを使っていた場合に、後から挿入しても大丈夫です。
 
 



見出しを入れる

 

PC

 
文中の見出しにしたい部分を選択して、「見出し」をクリック

f:id:snow0303:20190127230949j:plain
 
出てきた見出しの種類を選ぶだけ。
f:id:snow0303:20190127230957j:plain
 
文字が大きくなりました。
間違えて見出しにしてしまった部分は標準を選べば元に戻せます。
f:id:snow0303:20190127231005j:plain
 
大・中・小の見出しを入れてみました。
f:id:snow0303:20190127231012j:plain
 

スマホ

 

アプリから

 
Android版しか使ったことがないですが、iPhone版もきっと同じはず……
 
パソコンからとほぼ同じで、「A(装飾)」をクリック。
出てきた「H(見出し)」のボタンを
「大見出し」なら1回、
「中見出し」なら2回、
「小見出し」なら3回
タップします。

f:id:snow0303:20190128005129j:plainf:id:snow0303:20190128005131j:plain
 

Webから

 
見出しの補助ボタンが無いんですよね。
使っている書き方にあわせてご利用ください。
日本語部分(大見出し等)を各自変更してご利用ください。

【見たまま/HTMLの書き方】

<h3>大見出し</h3>
<h4>中見出し</h4>
<h5>小見出し</h5>

【はてな記法の書き方】

* 大見出し
** 中見出し
*** 小見出し

【Markdownの書き方】

### 大見出し
#### 中見出し
##### 小見出し

 

実際に書いてみたところ

 
見たままモード

f:id:snow0303:20190128084640j:plain
 
見たままモードのHTML編集を開いてみたところ
f:id:snow0303:20190128084649j:plain
 
はてな記法モード
f:id:snow0303:20190128122301j:plain
 
Markdownモード
f:id:snow0303:20190128122311j:plain
 
 
出来上がりがこちら。
私は少しデザインをいじっていますので、出来上がりが皆さんとは違うかもしれませんが、大体同じようになると思います。
 
PC版
f:id:snow0303:20190128080316j:plain
 
スマホ版
f:id:snow0303:20190128080328j:plain
 
 
デザインはCSSで変更することになります。
興味のある方は「はてなブログ 目次 カスタマイズ」等で検索をすると出てきますよ。