koblog

高校生のWEBデザインブログ

【はてなブログ】コピペだけで目次をカスタマイズ

サムネイル
はてなブログの機能の中で便利なものとして「目次」があります。

当たり前のように使っている「目次」ですが、手動で書くと各見出しにidを付与するなど、とても大変な作業になります。

 

さて、とても便利な「目次」ですが初期設定のデザインではあまりオリジナリティを出すことができません。またWordPressのようにプラグインを入れることも出来ません。

そこで今回はコピペだけでできる「目次」のカスタマイズを紹介します。

 

 

目次のカスタマイズ

目次のクラス名は?

Class

目次全体→「.table-of-contents」

上部の文字→「.table-of-contents::before」

リスト(内容)→「.table-of-contents li a」

はてなブログの目次のクラスは上のようになります。

 

目次全体のカスタマイズ

CSS
.table-of-contents {
position: relative;
background-color: #◯◯◯;  /* 背景色 */
border-top: solid 5px #◯◯◯; /* 上の線の色 */
padding: 60px 70px 25px;
font-size: ◯◯px; /* 文字のサイズ */
line-height: 28px /* 行間 */
}

説明に上のコードを使っていきます。

backgroundで背景色、borderで周りの枠の種類・太さ・色を変えることができます。僕の場合は上にだけ枠(線)を付けています。

 

文字の大きさはfont-sizeで変えることが出来ます。

色も変えることが出来ますが、ここで変えると上部の文字とリストの文字の色が同じになってしまいます。それでも大丈夫な場合はcolorで色を変えることが出来ます。

 

上部のカスタマイズ

CSS
.table-of-contents::before {
position: absolute;
display: block;
top: 15px;
left: 5%;
margin-left: -1em;
font-size: 20px; /* 文字のサイズ */
content: 'この記事の目次';
font-weight: 700; /* 文字の太さ */
color: #5db8ff; /* 文字の色 */
z-index: 2
}

 

上部の文字はbefore属性でカスタマイズします。本当は孤立したクラスが合ったほうがカスタマイズしやすかったのですが、仕方がありません。

 

colorで上部の文字の色を変えることが出来ます。

また文字の前にアイコンを付けたい場合は、contentを下のように変えるだけで実装できます。

font-family: "Font Awesome 5 Free";
content: '\◯◯◯' ' この記事の目次';

 

ここではFont Awesomeを使っていますが、はてなブログなのでblog iconも使えます。

 

リストのカスタマイズ

CSS
.table-of-contents li a {
text-decoration: none; /* 下線なし */
line-height: 35px; /* 行間 */
color: #3f3f3f /* 文字色 */
}

 

text-decorationnoneを設定することで下線がでないようになっています。

またcolorで文字の色を変えることが出来ます。先程と同じようにアイコンを付けることも出来ますが、ここではつけなくていいと思います。

 

コピペ用コード

下のコードは実際に僕が使っているコードです。

カスタマイズは面倒・難しいという方は、コピペして使ってみてください。

このコードでは、パソコン・タブレットで見た時に下の画像のようになります。

目次デザイン・パソコン

 スマホでは下のようになります。

パソコン版と違い、上部の文字が中央に配置されます。

目次デザイン・パソコン

 

CSS
.table-of-contents {
position: relative;
background-color: #f9f9f9;
border-top: solid 5px #5db8ff;
padding: 60px 70px 25px;
font-size: 14px;
line-height: 28px
}

.table-of-contents::before {
position: absolute;
display: block;
top: 15px;
left: 5%;
margin-left: -1em;
font-size: 20px;
font-weight: 700;
font-family: "Font Awesome 5 Free";
content: '\f02d' ' この記事の目次';
color: #5db8ff;
z-index: 2
}

.table-of-contents li a {
text-decoration: none;
line-height: 35px;
color: #3f3f3f
}
サムネイルPC
POPULAR
サムネイル

【コピペのみ】ブログのシェアボタンをシンプルでオシャレにカスタマイズしよう!

サムネイル

Twitterの「埋め込みタイムライン」を使う方法

サムネイル

【CSS】コードをオシャレに飾るボックスデザイン


スポンサーリンク


NEW POST
サムネイル

2019.8.30 Fri

Xcodeを使ってスマートフォン用サイトの動作確認をしてみる【Mac】

サムネイル

2019.4.09 Tue

【2019年版】Disqusのおすすめ設定

サムネイル

2019.8.07 Wed

JavaScriptでURLを遷移させる【ジャンプページを作る方法】

サムネイル

2019.6.12 Wed

JavaScriptでページのURLをコピーする機能を作ってみる

サムネイル

2019.6.04 Tue

はてなブログのCSSがスマホで反映されないときの対処法

サムネイル

2019.6.03 Mon

Javascriptで「前のページに戻る」リンクを作ってみる