えふじん

よく生きるためのきっかけ探し。自由を求めて。

スマホ対応!はてなブログの目次を見やすくカスタマイズしよう

こんにちは。やゆよです。

このブログ、たいして記事も書いていないのにカスタマイズばかりしていた時期がありました。

 

そこで今回は、はてなブログ公式の目次機能をちょっと見やすくするカスタマイズする方法をお伝えします!

当ブログで使っている目次はこんな感じ。

 

 

 

はじめに(コードを貼るところ)

 

まずはじめに、カスタマイズ用のコードを貼る箇所を説明します。
PC・レスポンス版とSP版では貼る場所が違うので気を付けてくださいね!

 

ちなみに記事を書く時の目次の使い方は公式ブログを参考にどうぞ。

 

 

PC、レスポンシブの場合

 

PC版、レスポンシブ対応にしている場合の貼り付け箇所は下記の通り。

 

ダッシュボード>デザイン>カスタマイズ(スパナマーク)>デザインCSS

 

に貼り付けてください。

 

f:id:miyako2911:20170504171417p:plain

 

 

スマートフォンの場合

 

当ブログのようにレスポンシブにしていないスマホ版のカスタマイズは、

 

ダッシュボード>デザイン>スマートフォン>ヘッダ>タイトル下

 

f:id:miyako2911:20170504180430p:plain

 

ここに以下のコードを貼り付けてください。

<style type="text/css">

 /*ここにコードをコピペ*/

</style>

 

で、/*ここにコードをコピペ*/の部分にカスタマイズ用のコードをコピペしましょう。

 

 

目次カスタマイズ

 

ではさっそく、目次のカスタマイズをしてみます!

 

参考にさせていただいたページはこちら。


yukihyさんありがとうございます。

 

 

目次に「目次」の文字を入れる

 

f:id:miyako2911:20170504171641p:plain

 

はてなブログにデフォルトで設定されている目次はこんな感じでちょっとそっけないので、まずは「目次」の文字を入れて目次だよ!と主張しましょう。

 

コードはこちら。

.table-of-contents:before{
 content: "目次";
 font-size: 100%;
 font-weight: bold;
}

 

「目次」の部分はひらがなでもカタカナでもなんでもOKです。
ちなみにここでは太字にしています。

 

「もくじ」の表記がついて分かりやすくなりました。

f:id:miyako2911:20170504171715p:plain

 

 

目次リストを数字にする

 

次に、目次の数が増えても分かりやすいようにリストを数字表記にしてみます。

 

コードはこちら。

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

 

これもぴょこっと貼り付けてくださいね。

数字になるとこんな感じです。

f:id:miyako2911:20170504171746p:plain

 

 

目次に背景をつける

 

今度は背景をつけてみます。背景をつけるとぱっと見ただけで目次だと分かるようになるのでおすすめです。

 

当ブログでは淡いグレーの背景に、角を少しだけ丸くしています。

f:id:miyako2911:20170504171801p:plain

 

コードはこちら。

ul.table-of-contents {

 background: #f0f0f0; /*背景色はここを変更*/
 border-radius: 3px;
 padding: 10px 10px 10px 25px;
 margin: 0;
}

 

カラーコードはいつもこのサイトを参考にしています。

 

 

目次の文字を小さくする

 

次は目次の文字の大きさです。好みの問題かと思いますが、ちょっと小さめの文字のほうがコンパクトにまとまって目次っぽくなると思っています。

 

文字を少し小さくするコードはこちら。

ul.table-of-contents {

 font-size: 90%;
}

 

背景色の変更と文字の大きさを両方変える場合は以下のコードでまとめることかできます。

 

背景色と文字の大きさを同時に変更

ul.table-of-contents {

 font-size: 90%;
 background: #f0f0f0; /*背景色はここを変更*/
 border-radius: 3px;
 padding: 10px 10px 10px 25px;
 margin: 0;
}

 

 

目次の色を変える

 

デフォルトの目次ではリンク色は青になっていますが、リンクテキストの色も変更することができます。

ページのイメージに合わせて変えてみるのもいいですね!

 

参考にした記事はこちら。

 

だいぱんまんさんありがとうございます。

それからせっかく青がおすすめ!とアドバイスしてくださっているのになんかすみません。

 

ではさっそくリンクの色を変えてみましょう。

ちなみにカラーコードはそのままだと当ブログのピンク色になってしまいますよ。

 

 

リンクテキストの色を変更する

 

まずはリンクテキストの元の色を変更してみます。

 

コードはこちら。

.table-of-contents a:link{
 color:#ad8383; /*色はここを変更*/
 text-decoration: none;
}

 

 

訪問済みの色を変更する

 

次に、一度クリックした後のリンクテキストの色を変更してみます。

上のリンクテキストの色と同じ色でも大丈夫です。

 

.table-of-contents a:visited{
 color: #8c6a6a; /*色はここを変更*/
}

 

こんな感じに変わります。

f:id:miyako2911:20170504172007p:plain

 

 

カーソルを重ねた時の色を変更する

 

最後に、テキストにカーソルを重ねた時に下線がつくようにします。
そんなことしなくてもいいよ!という方は何も記載しなくて問題ありません。

 

.table-of-contents a:hover{
 text-decoration:underline; /*下線をつける*/
}

 

 

全部まとめたコードはこちら

 

ひとつひとつ貼り付けるのがめんどくさいあなたへ。

 

上で紹介したコードを全部まとめてみました。

色を変えるだけで大丈夫です。ぺっと貼り付けてみてくださいね。

 

.table-of-contents:before{
content: "もくじ";
font-size: 100%;
font-weight: bold;
}

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

ul.table-of-contents {
font-size: 90%;
background: #f0f0f0; /*背景色はここを変更*/
border-radius: 3px;
padding: 10px 10px 10px 25px;
margin: 0;
}

.table-of-contents a:link{
color:#ad8383; /*リンク色はここを変更*/
text-decoration: none;
}

.table-of-contents a:visited{
color: #8c6a6a; /*訪問済みリンク色はここを変更*/
}

.table-of-contents a:hover{
text-decoration:underline; /*下線をつける*/
}

 

 

まとめ

 

目次を見やすくすると長い記事でも快適に読むことができます。
デフォルトのデザインで物足りない方はぜひ試してみてくださいね。