さくさくの日常

美容、健康、美味しいもの、ヨガ、etc…東京在住アラフィフ主婦さくさくの日々の出来事を記録しています

はてなブログ目次を見やすくカスタマイズするのも簡単だった

スポンサーリンク

スポンサーリンク

こんにちは、さくさくです。

先日投稿した記事はてなブログ見出しデザインのカスタマイズが意外と簡単だった には、たくさんのスターとブックマークをいただきありがとうございます。

今日は目次のカスタマイズをご紹介します。

これも、ほぼコピペだけなので簡単です。

はじめに

このブログではMinimalismというテンプレートを使っています。

このテンプレートでは目次にすでに

・「目次」の文字

・目次の背景色

が設定されています。

 

そのため今回の記事では、以下のカスタマイズを行いました。

PC版

・目次リストに数字をつける

 

ダッシュボードのデザインースマートフォンー詳細設定でレスポンシブデザインにチェックが入っていれば、スマホ版もPC版と同じ表示になるはずです。

その場合は、PC版のカスタマイズだけでOKです。

チェックがあればスマホ用の設定は不要

チェックがあればスマホ用の設定は不要

PC版とスマホ版でアドセンスの広告配置を変えている等で、レスポンシブデザインにチェックを入れたくない場合はスマホ版の目次設定をする必要があります。

 

スマホ版

・「もくじ」の文字を追加

・目次リストに番号をつける

・目次に背景色をつける

 

ではPC版から、やり方を順に説明します。

使いたいCSSコードはメモ帳に貼り付けておくと、作業がやりやすいです。

 

PC版の目次

Minimalismテンプレートで何も変更していない場合、このような目次です。

目次カスタマイズ前

PC版の目次(カスタマイズ前)

PC版の目次(カスタマイズ前)

私の希望としては、もう少しわかりやすくしたいです。

 

目次カスタマイズ後

PC版の目次(カスタマイズ後)

PC版の目次(カスタマイズ後)

目次リストに数字を入れてみました。

これで記事の内容が少しはわかりやすくなるかな?

 

カスタマイズ方法

1.はてなブログのダッシュボードでデザインをクリックします。

f:id:sakusaku-happy:20190516144139p:plain

 

2.スパナのマーク(カスタマイズ)をクリックします。

f:id:sakusaku-happy:20190516144620p:plain

 

3.デザインCSSをクリックします。

f:id:sakusaku-happy:20190516231338p:plain

 

4.デザインCSSの下のボックスをクリックします。

f:id:sakusaku-happy:20190516231818p:plain

 

5.メモ帳のようなボックスが開くので、以下のCSSコードをペーストします。

.table-of-contents li,
.table-of-contents ul{
list-style-type: decimal;
}

 
6.変更を保存するをクリックします。

f:id:sakusaku-happy:20190516232347p:plain

 

7.管理画面に戻るをクリックします。

f:id:sakusaku-happy:20190516232559p:plain

 

以上で目次のカスタマイズは完了です。

上記説明では目次リストに数字をつけるCSSコードを使いました。

 

今、お使いのテンプレートによっては、このようなカスタマイズもできます。

「目次」の文字を追加する場合のCSSコード

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

赤字を変更することもできます。

目次→もくじ Index Contentsなど好みの名称

120%→100%など好みの大きさ

 

目次に背景色をつける場合のCSSコード

.entry-content .table-of-contents {
background: #FAFAFA ; /* 目次の背景色 */
border-radius: 3px;
padding: 10px 10px 10px 25px;
margin: 0;
}

赤字を変更して好みの背景色を指定します。

 

ダッシュボードのデザインースマートフォンー詳細設定でレスポンシブデザインにチェックが入っていれば、スマホ版も同じように変わっているはずです。

以下のスマホ版カスタマイズは不要です。

 

スマホ版の目次

レスポンシブデザインにチェックを入れてない場合は、スマホ版もカスタマイズが必要です。

もう少しがんばりましょう。

目次カスタマイズ前

スマホ版 カスタマイズ前の目次

スマホ版 カスタマイズ前の目次

目次の文字も背景色もないから、のっぺりしています。

上下に文字があると、どこが目次かわかりにくいです。

 

「もくじ」の文字を追加

もくじの文字を追加

スマホ版 もくじの文字を追加

CSSコードは以下の通りです

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

 赤字を変更することもできます。

もくじ→目次 Index Contentsなど好みの名称

120%→100%など好みの大きさ

 

目次リストに数字をつける

数字をつけました

スマホ版 数字をつけました

CSSコードは以下の通りです

.table-of-contents li,
.table-of-contents ul{
list-style-type: decimal;
}

 

目次に背景色をつける

目次の部分がはっきりわかるように背景色をつけました。

スマホ版 「もくじ」の文字・数字・背景色を追加

スマホ版 「もくじ」の文字・数字・背景色を追加

CSSコードは以下の通りです

.entry-content .table-of-contents {
background: #FAFAFA ; /* 目次の背景色 */
border-radius: 3px;
padding: 10px 10px 10px 25px;
margin: 0;
}

赤字のカラーコードを変更して好みの背景色を指定します。

私はPC版と同じ背景色にしました。

気に入る色の選び方やスポイトツールの使い方はこちらで説明しています。

www.3939life.com

 

カスタマイズ方法

目次のカスタマイズに使うCSSコードが揃ったところで、はてなブログのデザインを変更します。

 

1.使いたいCSSコードを<style type="text/css"></style>で挟みます。

<style type="text/css">
/* 目次に「目次」を追加 */
.table-of-contents:before{
content: "もくじ";
font-size: 120%;
font-weight: bold; /* 文字の太さ */
}

 

.table-of-contents li,
.table-of-contents ul{
list-style-type: decimal;
}

 

.entry-content .table-of-contents {
background: #FAFAFA ; /* 目次の背景色 */
border-radius: 3px;
padding: 10px 10px 10px 25px;
margin: 0;
}
</style>

 ※「もくじ」の文字追加、数字追加、背景色追加3種類のCSSコードを紹介しましたが、全部でなく好みのものだけでもOKです。

 

2.これでスマホ用に貼り付けるコードが完成しました。

デザインースマートフォンからヘッダをクリックします。

f:id:sakusaku-happy:20190517002249p:plain

3.タイトル下のボックスをクリックします。

f:id:sakusaku-happy:20190517002456p:plain

 

4.1のコード<style type="text/css">から</style>までペーストします。

 

5.変更を保存するをクリックします。

f:id:sakusaku-happy:20190517003218p:plain

 

この手順で、PC版とスマホ版それぞれ目次をカスタマイズすることができます。

  

まとめ

はてなブログ目次のカスタマイズ方法をご説明しました。

実は、先日見出しデザインのカスタマイズと一緒にやった時は、スマホ版に設定が反映せず断念しました。

今日改めて挑戦すると、スマホ版の目次もすんなりとカスタマイズが反映しました。

上手くいかない時は、少し時間を空けてから再挑戦するのがいいかもしれません。

 

私が目次をカスタマイズするのにお世話になったブログです。

samadaさん、いつもありがとうございます💕

randamlife.hatenablog.com

 

こちらには目次のリンクテキストの色の変更など、更に凝ったカスタマイズも紹介されています。

llewevil.hatenablog.com

「もっと見やすい目次にしたい」と思ってたら、試してみてくださいね。

目次がわかりやすくなったね

ちょっとしたことだけど、来てくれた人が見やすくないとね

見出しデザインのカスタマイズは、こちらでご紹介しています。

www.3939life.com