超初心者のはてなブログカスタマイズ「目次」①(4/24追記)
こんにちは、ありんこです。
今回は、はてなブログ「目次」の作り方です。
目次ってなに？
こんなのです↓
（目次を作ったけれど生かしきれていない点はご了承ください。）
いろんなブログを見ていてよく目にしていた目次。
目次があると、どんなことが書かれている記事なのか、伝えたいことは何なのかということが一目で分かります。
作り方を調べるとたくさん出てきます。
公式サイトにも載っているんです。
しかし超初心者＆頭の固い私は苦労しました。
同じように苦労されている方の為に、超簡単に作成できる方法をお伝えします！！
まずは練習のつもりで説明通りに実践してみてください。
超簡単な目次の作り方
作成時間１分(たぶん)
「編集みたまま」で記事を作成
記事を作成→編集みたまま
魔法のことば [:contents] ！
目次を作りたい場所に [:contents] を入力（コピー＆ペーストだと間違いなし)
とりあえず練習で、何も記事を書かずに空白の状態で入力してみてください。
（前後には文字や空白を入れず、1行で指定しなければいけません）
この時点では何も起こりません。
私はこの[:contents]を入力すれば何かが起こると思い混乱していました。
（四角い目次の欄が出来上がると思っていた(^_^.)）
このまま次の作業へ進みます。
目次タイトルを入れてみよう！
目次にしたい「タイトル」を普通に入力します。
入力後、その「タイトル」を「大見出し」に変更します。
こんなふうになります↓↓↓
大見出しに変更できない時
たまに「大見出し」にしようとしても出来ないことがあります。私がやっている対処方法をお教えします。
記事の編集方法を「編集見たまま」から「ＨＴＭＬ」に切り替えます。
するとこんな表示になっていませんか？
ちょっと目がちかちかするかもしれませんが、半角で下記のように変更してください。
<h3></h3> ←これを消去する
<p>「あせりながらヒマジン」と歌っているのは誰？</p>
Ｐをｈ3に訂正する
⇩
⇩ 「 編集見たまま」モードに戻すと・・・
大見出しに変更できました！
プレビューしてみましょう
「目次」出来てるかな・・・
出来てました！
同じように大見出しのタイトルの記事を作っていくと目次らしくなっていきます。
目次タイトル毎の番号や「目次」の文字は入っていないですが、一番簡単な作り方なのでこれを覚えておくと良いと思います。
目次の下の見出しの吹き出し部分はブログデザインによって違ってきます。
見出しを吹き出し型にしたい方は前回の記事を参照してくださいね。
中見出し、小見出し
大見出しの記事の中で、さらに小さな見出しを付けた記事を書くことは多々あります。
いまこの記事も大見出しと中見出しを使っています。
中見出しも大見出しと同じ手順で編集すると、目次が出来上がります。
ちなみに小見出しまであります。
HTML編集で手直しするときは・・・
大見出し<h3></h3>
中見出し<h4></h4>
小見出し<h5></h5>
となります。
まとめ
・目次は 魔法のことば[:contents]をいれた場所に出来る。
・ただし前後には文字や空白を入れず、1行で指定しなければいけない。
・目次は記事の見出しから自動的に作成される。
次回予告
目次の欄に「目次」のことばを入れる！！
目次タイトルごとに番号をふる。
このブログには入っていますが、とても簡単に入れられたはず。
思い出しながら次回お伝えしていきます。
超超初心者のカスタマイズでした。
