「永久保存版!」はてなブログの目次デザインを自分好みにカスタマイズする方法

今日は待ちに待った目次のカスタマイズです。

ワタクシ興奮しております。

タイトルでも「永久保存版~♬」とかワケわからんこというてますが、今回は私の大好きな目次のカスタマイズということで、、、

いつも以上に張り切って徹底解説していきたいと思いますのでよろしくどうぞ。

(この熱意が間違った方向に向かないといいが、、、)

で、今日カスタマイズする目次ですが、取りあえず当サイトの目次を元にカスタマイズしていきます。

これですね。

言い忘れてました。

このまじめバージョンです。(ココ重要)

カスタマイズがめんどくさい人はそのままコピペで使えるようにしておきたいと思います。その場合は当ブログとほぼ同じデザインになります。

「オマエとおそろなんて死んでもやだ」と言う人はカスタマイズ頑張りましょう。

数字の部分を変えたり、文字を変えたり、スタイルを変えたりするので、自分好みの目次が出来上がると思います。

そもそも目次の表示方法から分からない人は以下を参照されたし。

はてなブログでは有難いことにデフォルトの機能で目次が追加できるようになっています。カスタマイズもこれを使って行います。

分からない人も多いかと思いますから表示方法をこれからじーーーーっくりと

f:id:oyomiyo:20181005193417p:plain

以上だ。

以下注意点です。

念のためにバックアップはとっておいてください。

またこの記事では、当サイトが公開しているカスタマイズ用のカード型テーマ「PLAIN(プレーン)」を元にカスタマイズを行います。

みなさんが現時点で使用しているテーマやカスタマイズ環境によってはうまくいかない場合もありますのでご理解ください。

PLAIN - テーマ ストア

目次のデザインコードをコピペする

目次のカスタマイズは、デザイン設定の記事上部のところで行います。

デザインのページから、スパナのマーク→記事と進んで記事上の部分にコードを追加する形になります。

f:id:oyomiyo:20180928122837p:plain

赤枠の部分に以下のコードをコピペしてください。

CSS

<style type="text/css">

.entry-content .table-of-contents {
    margin: 2em 0; /*目次上下の余白*/
    padding: 0 0 16px 0; /*目次下内部余白*/
    border: 1px solid #ddd; /*枠線のスタイル*/
    background-color: #fff; /*目次内背景色*/
    font-size: 0.95em; /*文字サイズ*/
    font-weight: normal; /*文字太さ*/
}

.entry-content .table-of-contents a {
    text-decoration:; /*文字装飾*/
    color:; /*文字色*/
}

.table-of-contents:before {
    content: "じーもく"; /*ここでタイトルを書き換える*/
    display: inline-block;
    width: 100%;
    padding: 7px; /*タイトル内余白*/
    margin-bottom: 10px; /*タイトル下余白*/
    box-sizing: border-box;
    text-align: center; /*タイトル文字の位置*/
    font-size: 1.0em; /*タイトル文字大きさ*/
    font-weight: bold; /*タイトル文字太さ*/
    color: #666; /*タイトル文字色*/
    background-color: #ddd; /*タイトル背景色*/
}

.table-of-contents ul {
    margin: 0;
    padding: 0 !important;
    border: none;
}

.table-of-contents li {
    margin: 0 0 0 2.5em; /*左側余白*/
    padding: 0.6em 0 0 0 !important; /*行間余白*/
    list-style-type: decimal; /*リストタイプ*/
    color:; /*リスト色*/
    border: none;
}

</style>

長いですがこんな感じです。

コメントアウトの残しているのである程度知識のある人はカスタマイズできると思います。分からない人は今からじゅっくりじゅっくり説明しますのでご安心を。

基本的には上のコードを書き換えながらカスタマイズを進めていきますのでよろしくお願いします。

見た目的にはこんな感じ、カスタマイズせずに使う場合は以下のように表示されます。

f:id:oyomiyo:20181001150521p:plain

「じーもく」のまま使いたまえ。

流行れ。流行れ。

「じーもく」を書き換える方法

実はこの部分、、、変更できませ…

 

変更できます。

する必要がないという方が大半を占めるはずですので、説明を省こうかとも思ったのですが、、、。(まじめバージョンにカスタマイズするって言っちゃったし)

 

書き換えるのは冒頭のコードのうち以下の部分です。

content: "じーもく"; /*ここでタイトルを書き換える*/

※長いコードを何回も載せるのが嫌いなので、必要な部分だけピックアップします。冒頭のコードのうちの所定の部分だということを理解してください。

普通に「もくじ」だとつまらないので(私が)、試しに「もう9時⁉」でやってみます。

content: "もう9時!?"; /*ここでタイトルを書き換える*/

こうなります。

f:id:oyomiyo:20181001151055p:plain

くだらん。じつにくだらん。

アイコン入れたりしても面白そうですね。

目次全体のカスタマイズ。

以下のコードの部分で行います。

先程のコードのうち一番上にあるはずです。

CSS

.entry-content .table-of-contents {
    margin: 2em 0; /*目次上下の余白*/
    padding: 0 0 16px 0; /*目次下内部余白*/
    border: 1px solid #ddd; /*枠線のスタイル*/
    background-color: #fff; /*目次内背景色*/
    font-size: 0.95em; /*文字サイズ*/
    font-weight: normal; /*文字太さ*/
}

いくつかに分けて説明します。

余白を変更する

今載せたコードのうち上の2つを使います。

margin: 2em 0; /*目次上下の余白*/
padding: 0 0 16px 0; /*目次下内部余白*/

コメントアウトでは分かりにくいと思うので、

f:id:oyomiyo:20181001153711p:plain

記事下内部になってる!!!

目次下内部の間違いですね。ばか自分。(ごめんなさいね汗)

 

上のコードの場合は目次の上下に2emずつ、目次下に16pxの余白が入ることになります。

em指定とpx指定を使っていますが別に何でも構いません。emでもremでもpxでも好きなの使ってください。

鋭い人は目次上の内部(つまり目次タイトル下)の余白はどうやって設定するの?と思われるかもしれません。

実は目次上内部だけ別のところにあります。

margin-bottom: 10px; /*タイトル下余白*/

これです。

冒頭に乗せたコードの中を5時間ぐらい探せば見つかると思います。

枠線のスタイルを変更する

枠線のスタイルは以下の部分で変更します。

border: 1px solid #ddd; /*枠線のスタイル*/

1pxの部分が線の太さ、solidが一本線の指定、#dddが線の色ということになります。

試しにこんな感じで書き換えたとします。

border: 5px dashed #fac; /*枠線のスタイル*/

dashedというのは破線の指定です。見た目はこんな感じ。

f:id:oyomiyo:20181001160752p:plain

※目次タイトルの背景色も変更しています。

サイドバーとの温度差。

背景色を付ける

目次内の背景色は以下の部分です。

background-color: #fff; /*目次内背景色*/

さっきの微妙な女子感を貫こうと思います。試しにこれで、

background-color: #fff6f9; /*目次内背景色*/

f:id:oyomiyo:20181001161932p:plain

どーや。

私はオスなんでここら辺はよう分からんですね、、、。

文字の大きさ・太さを変更する

目次内の文字の大きさを変更するには、以下のコードをいじります。

font-size: 0.95em; /*文字サイズ*/
font-weight: normal; /*文字太さ*/

文字サイズは0.95emなので通常の95%の大きさということになります。

文字の太さに関してもnormalなので通常の大きさです。

文字サイズを通常に戻して、太字に設定してみましょう。

font-size: 1.0em; /*文字サイズ*/
font-weight: bold; /*文字太さ*/

これを追加する形になります。

f:id:oyomiyo:20181001163715p:plain

無駄に主張が強いですね。太字はやめた方がよさそうです。

目次内文字のカスタマイズ

ここでは文字の下線や文字色等を変更します。

使うのはこの部分です。

CSS

.entry-content .table-of-contents a {
    text-decoration:; /*文字装飾*/
    color:; /*文字色*/
}

デフォルトでは何も設定していないため変更が必要な人だけいじってください。別に今のままでいいよって人は削除してもOKです。

下線を消す

2つのうち上の方を使います。

text-decoration:; /*文字装飾*/

目次内の文字の下線を消したい場合はnoneを指定します。

text-decoration: none; /*文字装飾*/

f:id:oyomiyo:20181004133611p:plain

シンプルで良さげ。

文字色変更

今度はこっちを使います。

color:; /*文字色*/

目次の文字色が黄色じゃないと肌に発疹ができる人のために黄色でいきましょう。

color: #fff500; /*文字色*/

でドン。

f:id:oyomiyo:20181004135302p:plain

※枠線を黒、背景色を濃いグレー、数字色をピンクに設定しています。

異色を放つじーもく。

青色の方がリンクになっているというのが伝わりやすいとは思いますね。

次はタイトル周りのカスタマイズに入ります。

タイトル周りのカスタマイズ

この部分がタイトルのコードになります。

今からいくつかに分けて紹介していきます。

CSS

.table-of-contents:before {
    content: "じーもく"; /*ここでタイトルを書き換える*/
    display: inline-block;
    width: 100%;
    padding: 7px; /*タイトル内余白*/
    margin-bottom: 10px; /*タイトル下余白*/
    box-sizing: border-box;
    text-align: center; /*タイトル文字の位置*/
    font-size: 1.0em; /*タイトル文字大きさ*/
    font-weight: bold; /*タイトル文字太さ*/
    color: #666; /*タイトル文字色*/
    background-color: #ddd; /*タイトル背景色*/
}

あ、「じーもく」の所は既に説明したので飛ばしますね。

タイトルの余白を指定する

以下のコードを使います。

padding: 7px; /*タイトル内余白*/
margin-bottom: 10px; /*タイトル下余白*/

タイトル下余白とは、タイトルからひとつめの目次の項目までの余白のことです。

タイトル内の余白を50pxタイトル下の余白を20pxにしてみたいと思います。

そして特に理由はないが、グラデーションを付けて過激にしてみたいと思います、、、、、。

 

(なにやら良い予感♪)

 

f:id:oyomiyo:20181004161333p:plain

※グラデーションとタイトル文字色の変更をしています。

サイト主の神経を疑うレベル。

とにかくタイトル内の余白が増えたことと、タイトル下の余白もきちんと挿入されていることが分かります。(ここが重要なのです)

タイトル文字のカスタマイズ

変更するのは以下のコードですね。

text-align: center; /*タイトル文字の位置*/
font-size: 1.0em; /*タイトル文字大きさ*/
font-weight: bold; /*タイトル文字太さ*/
color: #666; /*タイトル文字色*/

デフォルトでタイトル文字は中央寄せですが左寄せにすることもできます。その場合はcenterの部分をleftに変更して下さい。

text-align: left; /*タイトル文字の位置*/

まあ私は右寄せ(right)にしてやりますけどね。(ここで殺意を我慢する)

あと文字の大きさ太さはそのままで、文字色を赤(#ff0404)に変更してみましょう。

text-align: right; /*タイトル文字の位置*/
font-size: 1.0em; /*タイトル文字大きさ*/
font-weight: bold; /*タイトル文字太さ*/
color: #ff0404; /*タイトル文字色*/

取りあえずこれで。なるようになるさ。

f:id:oyomiyo:20181004164221p:plain

程よいキモさ。

どこかしらかゆくなりそう。

タイトル背景色

タイトル関連ではこれがラストです。

いじるのはココ。

background-color: #ddd; /*タイトル背景色*/

デフォルトでは過激なグラデーションにしたい気持ちをぐっとこらえて薄いグレーにしました。

薄い水色(#abd5dc)なんてどうでしょ?

background-color: #abd5dc; /*タイトル背景色*/

f:id:oyomiyo:20181005115853p:plain

ふいに来る真面目なヤツがまた気持ちいい。(個人的な感想)

いいじゃん。いいじゃん。

目次内の文字・数字の設定

これで最後です。

タイトルではなく目次自体の文字の行間や余白、また番号を振ってあるやつを変更したりします。

使うのはこの部分です。

CSS

.table-of-contents ul {
    margin: 0;
    padding: 0 !important;
    border: none;
}

.table-of-contents li {
    margin: 0 0 0 2.5em; /*左側余白*/
    padding: 0.6em 0 0 0 !important; /*行間余白*/
    list-style-type: decimal; /*リストタイプ*/
    color:; /*リスト色*/
    border: none;
}

余白関係

余白の指定は大きく分けて2か所にできます。

ひとつは行の高さと、もうひとつは要素の左側に入る余白です。

f:id:oyomiyo:20181005164353p:plain

めんどくさがらずに画像を貼ってくださる管理人さんは親切な方のようです。

ぼぼぼぼちっっっ!!!!

使うのはココですね。

margin: 0 0 0 2.5em; /*左側余白*/
padding: 0.6em 0 0 0 !important; /*行間余白*/

赤で表示している数字の部分を変更してカスタマイズできます。

余白を大胆にとってみましょう。

margin: 0 0 0 4.0em; /*左側余白*/
padding: 2.0em 0 0 0 !important; /*行間余白*/

f:id:oyomiyo:20181005164823p:plain

スリーエルサイズ。

ここら辺はお好み焼きで。

リストスタイル関係

ここからが面白いんですわ。

今数字で表示してある部分を色々と変更できます。数字ではなくて点とかアルファベットとか。

使うのはこれ。

list-style-type: decimal; /*リストタイプ*/

使う頻度が多そうなものをピックアップして紹介しますね。

まずはこれ。

list-style-type: thai; /*リストタイプ*/
f:id:oyomiyo:20181005191910p:plain

タイ語ですぅ♪

 

アカン!!、、この流れはアカン!!!

 

タイ語と言っても侮ることなかれ。結構多くのサイトで使われているようですよ。

まあ、「タイでは」の話ですけどね。(笑) 

(殺意を頑張って抑える)

 

、、、次こそ真面目に使用頻度のおそらく一番多いヤツを紹介いたします。

こんなのどうでしょう?

list-style-type: trad-chinese-formal; /*リストタイプ*/

、、、、、、。

おい、、まさかやってくれるんじゃないだろうな、、、?

 

違うよな、、?

 

絶対に違うよな、、、?

 

f:id:oyomiyo:20181005192010p:plain

やっちまった。

 

でも中国は人口が世界一多...

 

申し訳ない。

本当に申し訳ない。

 

出来るなら反省文を書きなぐりたい。

 

気を取り直していくつかご紹介。まずはこれ。

list-style-type: none; /*リストタイプ*/
f:id:oyomiyo:20181005173543p:plain

オマエのせいでリストなんて一生見たくないという人は表示しないという手もアリ。

次はこれ。

list-style-type: disc; /*リストタイプ*/
f:id:oyomiyo:20181005173522p:plain

せいろ丸、、、じゃなくてくろまる。

苦そう。

次!

list-style-type: circle; /*リストタイプ*/
f:id:oyomiyo:20181005173557p:plain

トローチ、、、じゃなくてしろまる

甘そう。

次!

list-style-type: square; /*リストタイプ*/
f:id:oyomiyo:20181005173609p:plain

ネタ切れ。

使えるとすれば、これくらいでしょう。

これらの文字色を変更することも可能です。これを使います。

color:; /*リスト色*/

デフォルトでは何も設定していません。試しに青(#2c6ebd)でやりましょう。

color: #2c6ebd; /*リスト色*/
f:id:oyomiyo:20181005180114p:plain

黒ぽちが青ぽちになりました。

これで全てのカスタマイズの説明が終わりました。

カスタマイズしてみよう

以上のことを踏まえてフルカスタマイズしてみましょう。

センス抜群の「先生のお手本」をドン(完全に調子に乗っている)

CSS

<style type="text/css">

.entry-content .table-of-contents {
    margin: 2em 0; /*目次上下の余白*/
    padding: 0 0 16px 0; /*目次下内部余白*/
    border: 3px solid #9ca4b0; /*枠線のスタイル*/
    background-color: #fff; /*目次内背景色*/
    font-size: 0.95em; /*文字サイズ*/
    font-weight: normal; /*文字太さ*/
}

.entry-content .table-of-contents a {
    text-decoration: none; /*文字装飾*/
    color: #577fbc; /*文字色*/
}

.table-of-contents:before {
    content: "MOKUJI"; /*ここでタイトルを書き換える*/
    display: inline-block;
    width: 100%;
    padding: 7px; /*タイトル内余白*/
    margin-bottom: 10px; /*タイトル下余白*/
    box-sizing: border-box;
    text-align: center; /*タイトル文字の位置*/
    font-size: 1.2em; /*タイトル文字大きさ*/
    font-weight: bold; /*タイトル文字太さ*/
    color: #666; /*タイトル文字色*/
    background-color: #ddd; /*タイトル背景色*/
    border-bottom: 3px solid #9ca4b0;
}

.table-of-contents ul {
    margin: 0;
    padding: 0 !important;
    border: none;
}

.table-of-contents li {
    margin: 0 0 0 2.5em; /*左側余白*/
    padding: 0.6em 0 0 0 !important; /*行間余白*/
    list-style-type: decimal; /*リストタイプ*/
    color:; /*リスト色*/
    border: none;
}

</style>

変更したところのみ赤で表示しています。で完成。

f:id:oyomiyo:20181005195737p:plain

まじめなヤツやん...。

逆に期待を裏切り全員が戦慄。

最後に

いつもウザくてごめんね。