超簡単!はてなブログで「目次」を作る方法&カスタマイズの仕方|コピペOK

今回の記事では

  • はてなブログで「目次」を作る方法

を説明したいと思います。

正直、めちゃくちゃ簡単なのでわざわざ教える必要もないかもしれませんが、他のはてなブロガーさんのブログを覗いていると

  • 案外知らない人が多いのかな?

と思うことも多いです。

はてなブログ初心者で「目次」の作り方をしらないという人は、ぜひ参考にしてくださいね。

▽目次というのは、以下のようなものです。

1、見出しをつくる

はてなブログの「目次」はめちゃくちゃ簡単に作れます。

まず、最初のステップはこちら!

はてなブログの目次は

  • 「見出し」が項目になる

ので、記事内に「見出し」を挿入します。

「見出し」に関しては、普段から何となくやってる人も多いと思います。

f:id:eno1081:20190610114828j:image

個人的には

  • 文頭に大見出し
  • 目次挿入
  • 記事内は中見出し
  • 最後は「まとめ」で大見出し

という感じで、記事の型を決めています。

f:id:eno1081:20190610114847j:image

余談ですが、ブログ記事にとって「見出し」はとても重要です。

SEO対策(検索流入)を念頭に入れているブロガーさんは

  • なるべく検索されやすいキーワードを見出しに入れる

と意識するのがおすすめですよ。

2、目次を入れる

次に、見出しを作ったら「目次」を挿入します。

作業は、これだけで終わりです。

「目次」の作り方は

  1. 「目次」作成ボタンを押す
  2. :contentsを[ ]で括ったものを自分で記述する

の2つあります。

簡単なのは1の「目次」作成ボタンを押す、です。

「目次」を作成したい部分にカーソルを置いて、下のボタンをクリックすればOKです。

f:id:eno1081:20190610114930j:image

とても簡単ですよね(笑)

これで目次は完成です。

他には「目次」を入れる場所に、目次表記のはてな記法を自分で記述しても目次が作れます。

f:id:eno1081:20190610114943j:image

これだけでOKです。

記事をアップすると、こんな感じで見出しがすべて目次になって表示されます。

f:id:eno1081:20190610115043j:image

うん、簡単!

どちらのやり方でも、出来上がる目次は同じなので好きなやり方で作成しましょう。

3、目次のカスタマイズの仕方

せっかくなので「目次」をカスタマイズする方法も紹介しておきます。

正直、はてなブログの「目次」カスタマイズはややこしいです。

なので今回は

  • 簡単にできるカスタマイズ

をピックアップして紹介していきますね。

※ちなみにカスタマイズは「はてなブログPRO」を想定して紹介しています。ご了承ください。

「目次」という文字をいれる

まず「目次」の前に

  • 「目次」という文字を入れる方法

を紹介します。

f:id:eno1081:20190610115228j:image

以下のコードを「デザイン」の「タイトル下」の部分にコピペして貼り付けるだけでOKです。

<style>

.table-of-contents:before{
content: “目次”;
font-size: 150%;
color:black;
}
</style>

「目次」の大きさを小さくしたい人は、数字を小さくすればOKです。

「目次」の色を変えたい場合は「black」の部分のカラーコード指定を変更してください。

カラーコードに関しては以下のサイトを参考にしてください。

▶カラーチャート[HTMLカラーコード・カラーネームの一覧

「目次」の背景色を変える

「目次」の背景色の変え方も紹介しておきます。

以下のコードを「デザイン」の「タイトル下」の部分にコピペして貼り付けるだけでOKです。

<style>
.entry-content .table-of-contents {
background:#e2f1f1;
}

</style>

赤文字の部分に自分の好きな色のカラーコードを挿入すれば、色を変えることができます。

 カラーコードに関しては以下のサイトを参考にしてください。

▶カラーチャート[HTMLカラーコード・カラーネームの一覧

「目次」の項目の色を変えたい

項目の色を変えたい場合は

  • 記事内全体のリンクテキストの色が同色になる

という点を知っておきましょう。

つまり「目次」の項目の色と、記事内のリンクテキストを別々に指定することはできません。

それでも良いので変更したい場合は「デザイン」の「タイトル下」の部分に

<style>

.entry-content a {
color:#00ced1;
}
</style>

を貼り付けましょう。

赤文字の部分のコードを変更すると、色が変わります。

同様に下サイトを参考にしてください。

▶カラーチャート[HTMLカラーコード・カラーネームの一覧

これで一通りのカスタマイズは完了するかと思います。

まとめ|はてなブログで「目次」を作る方法

ということで今回は、実は超簡単につくれる

  • はてなブログの目次の作成方法
  • 簡単なカスタマイズ方法

についてまとめておきました。

目次の作り方は

  1. 見出しを入れた記事を作成
  2. 目次入れたい部分に[:contents]

でOKです。

カスタマイズに関しては

<style>
.entry-content .table-of-contents {
background:#e2f1f1;
}

</style>

をぶち込むと背景色が変わります。

「目次」という文字を入れたい場合は

<style>

.table-of-contents:before{
content: “目次”;
font-size: 150%;
color:black;
}
</style>

でOKです。

項目の色(リンクテキスト)の色を変えたい場合は

<style>

.entry-content a {
color:#00ced1;
}
</style>

をぶち込みましょう。

後から自分の好きなカラーに変更するのがおすすめです。

※ただしHTMLとCSSに関しては、私も完璧には理解していないので、カスタマイズに関しては自己責任で行ってください。

それでは、当記事がはてなブログ初心者の参考になれば幸いです。

最後まで記事を読んで下さり、ありがとうございました!

▶カラーチャート[HTMLカラーコード・カラーネームの一覧

はてなブログカスタマイズに関する記事

たった3時間で引越し!はてなブログからワードプレスに移行する超簡単な方法 はてなブログのデザインを手軽にお洒落に設定する方法【初心者ブロガー向け】 ブログを始めるなら「はてなブログ」と「ワードプレス」の2択!その理由は?

ブログに関する記事はこちら 

コメントを残す

メールアドレスが公開されることはありません。