【初心者ブロガー必見!】超簡単に目次を作る方法!簡単すぎて記事作成が楽しくなります【はてなブログ】


スポンサードリンク

 

はてなブログにお越しの皆さん、こんにちは!

 

f:id:m_m_motti:20190701211533j:plain



 

「目次」使っていますか?

目次があった方が記事が読みやすいし、最初にどんな内容が書かれているのか知ることが出来るのでとっても便利ですよね!

しかし、ブログを始めたばかりの方はそんな「目次」の機能を使えていない。

もしくは、使い方や設置の方法が分からないという人もいるでしょう。

 

目次を作るのって難しそう・・・。

何か特別な操作や知識が必要なんじゃないの?

 

そんな方へここでは、はなてブログでの目次の作り方をざっくりと説明していこうと思います。

 

 

目次を作るのは簡単です

 目次を作るのは何か特別な操作が必要と思っている方もいると思いますが、目次は編集画面にて簡単に作ることが出来ます。

 

(私も目次を作るのは難しいと思って目次を作れずにいました・・・。)

 

見たまま編集での目次の作り方

 

 見たまま編集は文字を綴るだけで文章が編集出来るという初心者には易しい編集方法だと思います。

見たまま編集の際にタイトルの下に「目次」というアイコンがあります。

 

f:id:m_m_motti:20190701212015j:plain





 これを押すと[:contents]という文字が出てきます。

これを目次を入れたい場所に設置します。

 

目次にしたい文章を見出しにする

見出しにすることで、自動的にそれが目次に追加されます。

見出しは標準以外ならどれでも大丈夫です!

 小見出しにすると普通の目次より小さな控えめの目次になるようです。

 

f:id:m_m_motti:20190701211546j:plain



この記事では黄色で印をつけたところが小見出しです。

(カスタマイズ次第では、小見出しを表示させないなどの方法があります。)

 

これで目次の完成です!

 

 

目次をカスタマイズしたい!

 完成した目次で十分に目次の役割を果たせますが、せっかくならおしゃれな目次を使いたいと思いませんか?

 

カッコイイ記事を書いてる人は目次もこだわってて素敵だよね!

シンプルな目次もいいけれど可愛くてキュートな感じの方がサイトの雰囲気に合う

 

そんな時には、目次をカスタマイズしちゃえばいいのです!

 

目次のカスタマイズはコピペでOK?

目次のカスタマイズは、管理画面から「デザイン」➡️「スパナみたいなやつ」➡️「デザインCSS」で行えます。

 

このブログの目次は、こちらの記事を参考に作りました。⬇️ ⬇️

www.parucock.com

 ちなみに私はレスポンシブデザインにしているのでPCで見た時もスマホで見た時もいい感じに見える仕組みになっています。

テーマや設定、余白の関係でうまく表示されない場合もあるようなので、そちらの問題に関してはこちらの記事が参考になると思います。

 (私もこれから色々な場面に遭遇するので、その度に調整を入れていこうかなと思っております)

 

参考記事⬇️⬇️
www.papico405.com

 作りたい目次のCSSをコピーして、ここに貼りつけます。

 注意※何が起こってもいいようにCSSはメモなどにコピーしておきましょう。

 

目次のタイトルを付ける

 目次にタイトルを付ける方法は、先程と同じです。

 

デザインCSSからカスタマイズ可能です。

 コピペして貼るだけなので簡単🎵

 

 /*目次のデザイン変更*/
.table-of-contents {
padding: 15px 10px 15px 35px; /* 枠内の余白(上右下左) */
font-size: 100%; /* 文字サイズ */
border:dotted 1px #777; /* 線の種類と色 */
background:#f7f7f7; /* 背景 */
}
.table-of-contents:before {
content: "目次";
font-size: 110%;
font-weight:bold; /* 文字の太さ 通常はnormal */
color:#000; /* 文字の色 */
}

 

 

 

他にも目次に番号つけたり、目次の背景に色を入れるなど、自分好みに目次を作ることが出来ます。

デザインCSSに書き込みが完了すると、上記のやり方で記事を書いていくだけで自動的に素敵な目次が表示されるようになります。

 

最後に

 

難しいと思っていた「目次」ですが、やり方さえ分かってしまえば誰でも簡単に作ることが出来ると思います。

ブログのテーマカラーや、個性に合わせて是非目次作りにチャレンジしてみて下さい。

 

きっともっと素敵な記事に仕上がると思います!