【ブログ】はてなブログで目次をカスタマイズする方法とは？
どうもこんにちは、S.Y N（シン）です。
日曜はその他投資について投稿しているのですが、
■スポンサーリンク
はじめに
前回の投稿で目次と見出しの作成方法について紹介しましたので、
前回紹介した目次と見出しの作成方法でも、
ただ、
1．目次にタイトルを入れる方法とは？
最初にご紹介するカスタマイズは、
このように目次にはタイトルを入れることができます。
タイトルを入れることで、
タイトルを入れるには、まずデザインをクリックして、
すると詳細なメニューを選択できるので、デザインCSSをクリッ
プログラムを記述するスペースが表示されますので、
/* 目次に「目次」を追加 */
.table-of-contents:before{
content: "目次";
font-size: 120%;
font-weight: bold; /* 文字の太さ */
}
.table-of-contents:before{
content: "目次";
font-size: 120%;
font-weight: bold; /* 文字の太さ */
}
最後に変更を保存するをクリックすると、
content:の中身を変更することで、
2．目次に番号をつける方法とは？
続いて目次に番号をつける方法について、解説していきます。
番号をつけるのも先ほどと要領は同じで、
/* 目次に「番号」を追加 */
.table-of-contents li,
.table-of-contents ul{
list-style-type: decimal;
}
.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名を無料紹介
おわりに
ということで今週はブログの目次をカスタマイズする方法について
ブログ投稿に興味のある方は参考にしてみてください(´∀｀)
最後までお付き合いありがとうございましたー！
