S.Y N(シン)の人柱投資

不動産、株、金、仮想通貨、YouTube、IT、英語、簿記、読書、グルメなど投資をテーマに週13回7時、21時にブログを更新しています!

■スポンサーリンク

【ブログ】はてなブログで目次をカスタマイズする方法とは?

どうもこんにちは、S.Y N(シン)です。

 

日曜はその他投資について投稿しているのですが、今回はブログの状況について紹介したいと思います。

 

■スポンサーリンク

ColorfulBox(カラフルボックス)

 

ブログ1年目の閲覧数はこちら!

www.hitobashiratoushi.com

 

 

はじめに

前回の投稿で目次と見出しの作成方法について紹介しましたので、今回は目次をカスタマイズする方法についてです。

 

目次と見出しの作成方法はこちら!

www.hitobashiratoushi.com

 

前回紹介した目次と見出しの作成方法でも、最低限の役割を果たす目次は作成することが可能です。

 

ただ、それだけだと他のはてなブロガーさんと同じ目次になってしまうので、是非目次のカスタマイズ方法を覚えて、オリジナルの目次を作ってみてください!

 

f:id:kadhinaru:20181006123037j:plain

 

1.目次にタイトルを入れる方法とは?

最初にご紹介するカスタマイズは、目次にタイトルを入れる方法です。

 

f:id:kadhinaru:20181006120619p:plain

 

このように目次にはタイトルを入れることができます。

タイトルを入れることで、誰が見ても目次と分かるようにすることができるので、分かりやすいタイトルを入れてみましょう!

 

f:id:kadhinaru:20181006121006p:plain

 

タイトルを入れるには、まずデザインをクリックして、サイドメニューのレンチをクリックしてください。

 

f:id:kadhinaru:20181006121110p:plain

 

すると詳細なメニューを選択できるので、デザインCSSをクリッしましょう。

 

f:id:kadhinaru:20181006121311p:plain

 

プログラムを記述するスペースが表示されますので、ここに下記のプログラムを貼り付けてください。

 

/* 目次に「目次」を追加 */
.table-of-contents:before{
content: "目次";
font-size: 120%;
font-weight: bold; /* 文字の太さ */
}

 

f:id:kadhinaru:20181006121408p:plain

 

最後に変更を保存するをクリックすると、目次にタイトルが反映されます。

content:の中身を変更することで、タイトル名を変更することもできるので、お好みのタイトルをつけてみてください。

 

2.目次に番号をつける方法とは?

続いて目次に番号をつける方法について、解説していきます。

番号をつけるのも先ほどと要領は同じで、下記のプログラムをデザインCSSに貼り付けます。

 

/* 目次に「番号」を追加 */
.table-of-contents li,
.table-of-contents ul{
list-style-type: decimal;
}

 

これだけで番号の付与は完了です。

ただ、これを行うと全ての目次に番号が入ってしまうため、番号を除きたい時もある場合は、このプログラムを使用せず、必要に応じて自身で番号を追加しましょう!

 

3.目次の背景色を変える方法とは?

最後にご紹介するのは目次の背景色を変える方法です。

これも先ほどと同様、下記のプログラムをデザインCSSに貼り付けます。

 

/* 目次の「背景色」を変更 */

.table-of-contents{
padding: 20px 10px 20px 40px;
border-radius: 5px;
background: #f5f5f5;
}

 

そして、背景色を変更したい場合は、background:の部分にあるコードを書き換えましょう。

 

グレー:f5f5f

グリーン:ccffcc

水色:f0ffff

ピンク:ffeff9

 

この他にも様々な色のコードが存在しますので、是非調べながら1番自身のブログにあったカラーを見つけてください!

 

■スポンサーリンク

【デイズ男性ハイステイタス恋活マッチングサービス】
待って見つける恋人!毎日1名年間365名を無料紹介

おわりに

ということで今週はブログの目次をカスタマイズする方法について、お伝えさせていただきました。

ブログ投稿に興味のある方は参考にしてみてください(´∀`)

 

最後までお付き合いありがとうございましたー!

■スポンサーリンク