紅蓮ブログ

アフィリエイトのことが全く分からないあなたに超簡単に詳しく、実戦形式でお話していくブログです

はてなブログで目次をカスタマイズする方法【説明付き】

f:id:slash1196:20210523212404j:plain

f:id:slash1196:20200520205950j:plain

はてなブログの目次をカスタマイズしたい人

「はてなブログで書いているけれど、目次がちょっとカッコ悪い。

カスタマイズしたいけど、やり方わからないし、どうしたらいいの?

誰か教えて。」

 

こんなお悩みにお答えします。

 

【今回の記事でわかること】

  • はてなブログの目次の作り方
  • はてなブログで目次をカスタマイズしかた
  • コピペでもできる目次カスタマイズおすすめ例3選

 

こんにちわ、紅蓮です。

今回は、はてなブログのカスタマイズを仕方に関してお話していきます。

 

この記事を読み終わるころには、カスタマイズの仕方を理論的に理解できるようになっています。

 

この記事を書く僕ははてなブログ歴は3年目。

月々3000円と少ないんがらも収益をいただいています。

 

ですからぜひ読んでみてくださいね。

 

 

では早速行ってみましょう。

Here We Go!!

 

【スポンサーリンク】
 

 

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

f:id:slash1196:20210523212345j:plain

ここではまずはてなブログでの目次の作り方をお話していきます。

 

作り方は、以下の通り。

 

  • ①見出しを作る
  • ②目次ボタンを押す

 

では見ていきましょう。

 

①見出しを作る

まずは文章を書いて、見出しを作ることですね。

 

見出しというタグを使って、作っていきましょう。

 

作り方に関しては、はてなブログの見出しカスタマイズ法【シンプルイズベスト】を⑤お読みくださいね。

 

②目次ボタンを押す

次に、目次ボタンを押しましょう。

目次ボタンは、f:id:slash1196:20210523151526j:plainをクリックして目次を作ります。

 

はてなブログで作った目次が、以下の感じですね。

f:id:slash1196:20210523152525j:plain

ちょっと見た感じが、見にくいですよね。

文字も緑なので、ちかちかしますよね。

  

はてなブログで目次をカスタマイズして見やすくしてみよう

f:id:slash1196:20210523213113j:plain

ここでは、はてなブログで目次をカスタマイズする方法をお話していきましょう。

 

カスタマイズの前の注意点

カスタマイズする前には、絶対に守ってほしいことがあります。

それは、以下の通り。

 

  • 必ずバックアップを取ること
  • もとからあるCSSコードは、消さないこと
  • 自己責任で、行うこと

 

というのも、カスタマイズ自体が、はてなブログが推奨していることではないからです。

必ず自己責任で行うように、しましょうね。

 

はてなブログの目次のカスタマイズの手順

では、はてなブログの目次のカスタマイズの手順を説明していきましょう。

手順は、以下の通り。

 

  • 手順①外枠のデザインを変更
  • 手順②目次内の背景色を変更
  • 手順③タイトル文字の挿入
  • 手順④リストマークの変更
  • 手順⑤目次のリンクの下線の消去
  • 手順⑥目次の文字色の変更
  • 番外編:アイコンの挿入

 

では、1つずつ見ていきましょう。

 

手順①外枠のデザインを変更する

はてなブログの目次のカスタマイズの手順の1つ目は、外枠のデザインを変更することです。

 

なぜなら本文と、目次との違いが分かりにくいからです。

もし囲いがあったら、目次だなってわかりやすくなりますよね。

 

ですからやっていきましょう。

 

以下が、CSSのコードです。

 

.entry-content .table-of-contents {
border:4px solid #e4c1c0; /* 目次枠線太さと色*/
}

 

外枠を作るときには、borderというプロパティを使います。
borderは、線引いたり、線の色や太さの変更の時にも使えます。

よく使うのは、solid(1本線)、double(2本線)、dashed(破線)、dotted(点線)ですね。

 

手順②目次内の背景色を変更する

はてなブログの目次のカスタマイズの手順の2つ目は、目次内の背景色を変更するですね。

 

というのも、いくら目次をかこっていても、目次の背景色と本文の背景色が一緒だったらわかりにくいからです。

 

ですから変えていきましょう。

 

目次の中の背景色を変えていきます。

先ほど作った、CSSに加えていきましょう。

 

.entry-content .table-of-contents {
border:4px solid #e4c1c0; /* 目次枠線太さと色*/
background:#fff3b8;}

 

背景色は、backgroundというプロパティを使います。

背景に関する指定をまとめて行う際に使用するプロパティですね。

 

この場合は色で使いましたが、必要のない指定を省略することもできるので、今回はそのまま使っています。

 

手順③タイトル文字を入れてカスタマイズする

はてなブログの目次のカスタマイズの手順の3つ目は、タイトル文字を入れてカスタマイズするですね。

 

タイトルを入れることによって、目次と読者がわかりやすくなります。

そのために、目次と入れておいたほうがいいですね。

 

ここでは先ほど作ったCSSコードとは別に、新しくコードを作ります。

 

.entry-content .table-of-contents::before{
display:block;
content:"目次";/*目次以外にもcontentsや好きな言葉を入れられます*/
font-size:18px;/*目次の文字の大きさ*/
color:#e4c1c0;/*文字色。基本は外枠の色と合わせるとかっこいいかも…*/
font-weight:bold;/*目次の文字の太さ*/
text-align:left;/*左寄せ*/
border-bottom:2px dotted #e4c1c0;/*目次内の境界線の太さと色・点線*/
}

 

目次の前に入れたいというのことなので、先のCSSに入れてしまいがちですが、実は違うのがポイントですね。

 

目次の直前にいれることから、::beforeとなっています。

 

なお、色に関してですが、基本は外枠の色と合わせると統一感が出てかっこいいですね。

 

手順④リストマークの変更をする

はてなブログの目次のカスタマイズの手順の4つ目は、リストマークの変更ですね。

というのもリストマークの変更をするかどうかで、見やすさがめちゃめちゃ変わるんです。

 

どうせ見るなら、目次も見やすいほうがいいですよね。

ってことで、リストマークを変更していきます。

 

.entry-content .table-of-contents li{
list-style-type:decimal;/*数字*/
}
.entry-content .table-of-contents li ul li{
list-style-type:decimal; /* 中見出し:数字*/
font-weight: normal; /* 文字標準 */
}
.entry-content .table-of-contents li ul li ul li{
list-style-type:square; /* 小見出し:数字 */
font-weight: normal; /* 文字標準 */
}

 

ここでは、list-style-typeというプロパティを使っています。リストの先頭に表示するマーカー文字の種類を指定するときに使います。

 

よく使うのは、disc(黒丸)、circle(白丸)、square(黒四角)、decimal(算用数字)ですね。

 

手順⑤目次のリンクの下線を消す

はてなブログの目次のカスタマイズの手順の5つ目は、目次のリンクの下線を消すことですね。

 

というのもどうしても初心者っぽく見えてしまいますからね。

消しておいたほうが、格好がいいです。

 

以下が、コードです。

 

.entry-content .table-of-contents li a{
text-decoration:none;/*リンク下線はなし*/
}
.entry-content .table-of-contents li ul li a{
text-decoration:none;/*リンク下線はなし*/
}
.entry-content .table-of-contents li ul li ul li a{
text-decoration:none;/*リンク下線はなし*/
}

 

ここで気を付けたいのが、目次の中の文字ということで.table-of-contents aとしないことですね。

 

実はこうしてしまうと、うまく下線が消えないです。

注意が必要ですね。

 

手順⑥目次の文字の色を変更する

はてなブログの目次のカスタマイズの手順の6つ目は、目次の文字の色を変えるです。

文字がそのままの状態では、緑色なんですよね。

 

でも、実際は格好が悪いじゃないですか。

変更しましょう。

 

以下、コードですね。

 

.entry-content .table-of-contents{
color:#e4c1c0;
}

 このコードは、一番最初に作ったCSSに入れてもらえばいいです。

というのも、文字自体が全部すべて同じなの、そのほうが使いやすいですね。

 

番外編:アイコンを入れる

番外編で、アイコンを入れる方法をご紹介します。

よく、目次の横にアイコンが入っているのを見かけますよね。

 

上記のような画像のやつですね。

これがあると目立つので、非常にいいですね。

 

ぜひよかったらご覧ください。

以下、コードです。

 

 
.entry-content .table-of-contents::after {
content: "\f039";
font-family: blogicon;
display: block;
font-size: 120%;
position: absolute;
line-height: 40px;
top: 12px;
left: 12px;
width: 40px;
height: 40px;
text-align: center;
vertical-align: bottom;
border-radius: 50%;
color: #fff;
background: #72b0ed;
}

 

この時に気を付けないといけないことは、つかえるアイコンかどうかを確認しておくことですね。

というのもはてなブログのアイコンは、使えないこともあったりしますから注意が必要です。

 

また、読み込みをするのでページが重くなる可能性もありますから注意が必要ですが、目立つという点で、のせてみました。

 

コピペでもできる目次カスタマイズおすすめ例3選

ここでは、コピペでも作れるはてなブログのカスタマイズ例をお話していきましょう。

 

カスタマイズ例①:超シンプルなタイプ

.entry-content .table-of-contents {
margin: 0;
padding: .7em 1.2em 1.2em;
background: #f6f6f7;
font-size: 100%;
border: solid 1px #5a598c;
}
.entry-content .table-of-contents::before {
content: "目次";
position: static;
display: block;
text-align: center;
margin: 0 0 .8rem;
padding: 0 0 .4rem;
border-bottom: 1px dashed #9aa0c1;
font-size: 120%;
}
.table-of-contents ul {
padding-left: 10px;
}
.entry-content .table-of-contents li {
margin: .2em 0 1em 1em;
list-style-type: decimal;
line-height: 1.6em;
}
.entry-content .table-of-contents li ul li {
margin: .2em 0 0 1em;
}
.table-of-contents li a {
text-decoration: underline;
line-height: 1.6em;
color: #3f3f3f;
}

このタイプは、先ほど説明したタイプとよく似ていますね。

何よりも使いやすいし、初心者向けですよね。

 

また、あまり重くないのもいいですね。

おすすめのパターンですね。

 

 

カスタマイズ例②:シンプルながらも知的な目次

    
.entry-content .table-of-contents {
display: inline-block;
padding: 0 1em 1em;
background: #ffffff14;
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 8px dotted #e1e1e2;
box-shadow:0px 0px 0 7px #ffffff,1px 0px 0 7px #959595d4,2px 0px 0 7px #fff,3px 0px 0 7px #898989de,4px 0px 0 7px #fff,5px 0px 0 7px #858585de, 4px 0px 10px 9px #b8b8b896;
}
.entry-content .table-of-contents::before {
content: "目次";
display: block;
position: static;
margin: .3em 0 .4em;
padding: 0;
border-bottom: 2px solid #ddd;
font-size: 1rem;
font-weight: normal;
text-align: start;
}
.entry-content .table-of-contents li {
list-style-type: decimal;
margin: 0 0 0 1em;
font-size: 1.1em;
}
.entry-content .table-of-contents li ul {
margin: 0 0 1em .5em;
padding: 0;
}
.entry-content .table-of-contents li ul li {
list-style-type: decimal;
color: #8d8d8d;
font-size: .9em;
}
.entry-content .table-of-contents a {
color: #5a5a5a;
text-decoration: none;
position: relative;
display: block;
line-height: 2em;
background-image: linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff 0%, #fff 100%), linear-gradie  (180deg, rgba(100, 100, 100, 0) 0%, rgba(100, 100, 100, 0) 95%, #666 100%);background-size: 8px 100%,100% 2em;
    }

このタイプは、ノートの出し入れができるルーズリーフ的な見た目ですね。

知的なイメージが出るので、アフィリエイトの勉強もはかどりそうですね。

 

カスタマイズ例③:目次の横にフォントを入れたタイプ

.entry-content .table-of-contents {
position: relative;
margin: 0;
padding: 4em 1.2em 1em;
background: #fff;
font-size: 100%;
border-top: solid 5px #72b0ed;
border-right: 0;
border-bottom: 0;
border-left: 0;
color: #72b0ed;
box-shadow: 0 1px 5px 2px #e9e9e9;
}
.entry-content .table-of-contents::before {
content: "目次";
display: block;
position: absolute;
top: 18px;
left: 60px;
margin: 0;
text-align: start;
color: #72b0ed;
border: none;
font-size: 120%;
font-weight: bold;
}
.entry-content .table-of-contents::after {
content: "\f039";
font-family: blogicon;
display: block;
font-size: 120%;
position: absolute;
line-height: 40px;
top: 12px;
left: 12px;
width: 40px;
height: 40px;
text-align: center;
vertical-align: bottom;
border-radius: 50%;
color: #fff;
background: #72b0ed;
}
.entry-content .table-of-contents li {
margin: .2em 0 1em 1.5em;
list-style-type: decimal;
line-height: 1.6em;
font-weight: bold;
}
.entry-content .table-of-contents li ul {
margin: 0 0 1em .5em;
padding: 0;
}
.entry-content .table-of-contents li ul li {
margin: .2em 0 0 1em;
list-style-type: none;
font-weight: normal;
font-size: 100%;
}
.entry-content .table-of-contents li ul li::before {
content: "\f006";
font-family: blogicon;
margin-right: .5em;
color: #72b0ed;
}
.entry-content .table-of-contents li ul li ul li {
font-size: 90%;
}
.entry-content .table-of-contents a {
color: #72b0ed;
line-height: 1.6em;
text-decoration: underline;
}

このタイプは、現在僕も改造して使っています。

技術がつくので非常に、おすすめのデザインですね。

 

まとめ|はてなブログで目次をカスタマイズして読者に読まれるようになろう

お疲れ様です。

ここまで、はてなブログの目次のカスタマイズの仕方を、お話してきました。

 

まとめていくと、以下のようになります。

 

まとめ
  • はてなの目次は作るのは簡単
  • カスタマイズは自己責任で行うこと
  • カスタマイズは外から上からコードを書いていく
  • 技術がつくからカスタマイズの勉強はするべき

 

とはいえ、やはりいくら頑張っても記事の内容が大事になるので、記事を書くのに集中しましょう。

 

記事の書き方は、アフィリエイトで稼げるブログの書き方【テンプレあります】をお読みください。

 

ということで、今回はこの辺で。

また次回に。

【スポンサーリンク】