Wedding Road

結婚式の準備について 式場選びから結婚式アイテム作成、大変だったことややってよかったことなどリアルタイムで紹介していきます♪

【初心者向け】はてなブログの目次の作り方

 

みなさんこんばんは(*^^)v

 

昨日は久しぶりに結婚式グッズについて書きました(^^♪

 

今日は目次について説明します!

 

意外と知らないんですよね…。笑

 

 

はてなブログの目次の作り方

 

備え付けの目次

 

実ははてなブログにデフォルトでついてる機能に、目次があるんですよね。笑

 

こちらです。

 

f:id:konayuu:20200608202000p:plain

 

左上の矢印のところを押すと、「contents」と書いた文言が追加されます。

 

これを入れた後に、はてなブログ機能の「見出し」を使うと目次に自動的に入ります!

 

 

f:id:konayuu:20200608202740p:plain

 

この見出しをいじると…

 

f:id:konayuu:20200608202802p:plain

このように自動的に目次に追加されます。便利ですね。。。

 

大見出し、中見出し、小見出しがありますが、

 

大見出しの子カテゴリに中見出し、中見出しの子カテゴリに小見出し

 

というようにプログラムされているようです。

 

今後はしっかり使っていきます。

 

目次のカスタマイズ

 

正直オススメしません。

 

はてなブログのデフォルトの目次をいじるのは、

 

けっこうHTMLなどがややこしいため、別の目次を一から作る方がいいような気がします。

 

それでも、、、という方のため、おいておきます。

 

設定→デザイン→タイトル下のHTMLに以下のコードを追加します。

 

目次の文字を入れる

 

<style>

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

 

これで目次という文字が入ります(*'▽')

 

大きさはfront-sizeのところをいじってくださいね☆

 

背景色の変更

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

</style>

 

これを入れると黄緑になります(*'▽')#00FF00これですね!

 

これくらいにしておきましょうか。笑

 

一から作る目次は、また勉強して私がHTMLを理解できるようになってからで…。笑

 

まとめ

 

今日は目次の入れ方を紹介しました!

 

はてなブログにはデフォルトでついていますので、すごい簡単ですね!

 

カスタマイズもできますが、オススメはしません。笑

 

なので、デフォルトの機能をぜひぜひ使ってみてください(*^▽^*)

 

それではまた☆