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

あせりながらヒマジン 無職なワタシの記録

働かずに食べていけるか、実験中。はたらかないアリになりたい。ちょっと働きたい気持ち上昇中。(2016.5/14更新)

超初心者のはてなブログカスタマイズ「目次」①(4/24追記)

f:id:antcheb:20160423043142j:plain

こんにちは、ありんこです。

 

 今回は、はてなブログ「目次」の作り方です。

この記事で作る「目次」は公式はてなブログに載っている作り方です。

目次タイトル毎に数字を付けたり、「目次」の文字を欄内に入れたりということは次回の記事でお伝えします。4/24追記

 

 

目次ってなに?

こんなのです↓

f:id:antcheb:20160422234104p:plain

(目次を作ったけれど生かしきれていない点はご了承ください。)

いろんなブログを見ていてよく目にしていた目次。

目次があると、どんなことが書かれている記事なのか、伝えたいことは何なのかということが一目で分かります。

 

作り方を調べるとたくさん出てきます。

公式サイトにも載っているんです。

しかし超初心者&頭の固い私は苦労しました。

 

 同じように苦労されている方の為に、超簡単に作成できる方法をお伝えします!!

まずは練習のつもりで説明通りに実践してみてください。

 

超簡単な目次の作り方

作成時間1分(たぶん)

「編集みたまま」で記事を作成

 記事を作成→編集みたまま 

f:id:antcheb:20160423005932p:plain

 

魔法のことば [:contents] !

  目次を作りたい場所に [:contents] を入力(コピー&ペーストだと間違いなし)

とりあえず練習で、何も記事を書かずに空白の状態で入力してみてください。

(前後には文字や空白を入れず、1行で指定しなければいけません)

f:id:antcheb:20160423010306p:plain

この時点では何も起こりません。

私はこの[:contents]を入力すれば何かが起こると思い混乱していました。

(四角い目次の欄が出来上がると思っていた(^_^.))

このまま次の作業へ進みます。

 

目次タイトルを入れてみよう!

 目次にしたい「タイトル」を普通に入力します。

入力後、その「タイトル」を「大見出し」に変更します。

 

f:id:antcheb:20160423011406p:plain

こんなふうになります↓↓↓

f:id:antcheb:20160423025211p:plain

 

大見出しに変更できない時

 

たまに「大見出し」にしようとしても出来ないことがあります。私がやっている対処方法をお教えします。

記事の編集方法を「編集見たまま」から「HTML」に切り替えます。

するとこんな表示になっていませんか?

f:id:antcheb:20160423031906p:plain

ちょっと目がちかちかするかもしれませんが、半角で下記のように変更してください。

 

<h3></h3> ←これを消去する

<p>「あせりながらヒマジン」と歌っているのは誰?</p> 

Pをh3に訂正する

f:id:antcheb:20160423032022p:plain

 

f:id:antcheb:20160423032322p:plain

  「 編集見たまま」モードに戻すと・・・

 

f:id:antcheb:20160424222000p:plain

 

 大見出しに変更できました!

 

プレビューしてみましょう

「目次」出来てるかな・・・

f:id:antcheb:20160424223421p:plain

出来てました!

同じように大見出しのタイトルの記事を作っていくと目次らしくなっていきます。

目次タイトル毎の番号や「目次」の文字は入っていないですが、一番簡単な作り方なのでこれを覚えておくと良いと思います。

 

目次の下の見出しの吹き出し部分はブログデザインによって違ってきます。

見出しを吹き出し型にしたい方は前回の記事を参照してくださいね。

  

antcheb.hatenablog.com

 中見出し、小見出し

大見出しの記事の中で、さらに小さな見出しを付けた記事を書くことは多々あります。

いまこの記事も大見出しと中見出しを使っています。

中見出しも大見出しと同じ手順で編集すると、目次が出来上がります。

ちなみに小見出しまであります。

HTML編集で手直しするときは・・・

大見出し<h3></h3>

中見出し<h4></h4>

小見出し<h5></h5>

となります。

 

まとめ 

・目次は 魔法のことば[:contents]をいれた場所に出来る。

・ただし前後には文字や空白を入れず、1行で指定しなければいけない。

・目次は記事の見出しから自動的に作成される。

 

次回予告 

目次の欄に「目次」のことばを入れる!!

目次タイトルごとに番号をふる。

このブログには入っていますが、とても簡単に入れられたはず。

思い出しながら次回お伝えしていきます。

 

超超初心者のカスタマイズでした。