【HTML/CSS】はてなブログの目次をカスタマイズしてみた

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

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

 

 

最近HTML/CSSの勉強しているので、アウトプットとして記事にしたいと思います。
完成した目次はコチラ。
はてなブログの目次

今回はてなブログの目次をカスタマイズにするにあたって参考にしたブログは下記になります。 参考 【CSS】おしゃれなボックスデザインのサンプル30サルワカ 参考 はてなブログの目次&見出しの作り方とカスタマイズ(番号や背景色)okane7.com

カスタマイズに使用したソースコード!

 

完成したコードはコチラになります。

完成したコード
/* 目次のカスタマイズ */
.table-of-contents {
position: relative;
padding: 40px 10px 10px 35px !important;
border-radius: 6px;
font-size: 16px;
line-height: 28px;
border: solid 4px #5b8bd0;
margin-bottom: 30px;
}
.table-of-contents a{
color: black;
}
.table-of-contents a:hover {
color: blue;
}
.table-of-contents a:active {
color: white;
}
.table-of-contents:before {
content: '目次';
position: absolute;
display: block;
text-align: center;
top: 8px;
left: 50%;
margin-left: -1em;
font-size: 18px;
font-weight: 700;
z-index: 2;
}
.table-of-contents:after {
position: absolute;
font-family: FontAwesome;
content: '\f03a 記事の目次';
background: #5b8bd0;
color: #fdf2ef;
right: 0%;
left: 0%;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 2px 0 2px 0;
margin: 0 -4px 0 -4px;/* -で指定しているところはborderと同じ数値にする */
text-align:center;
font-size: 20px;
letter-spacing: 1em;
}
ul.table-of-contents li {
list-style-type: none !important;
}
ul.table-of-contents li:before {
font-family: Font Awesome 5 Free;
content: "\f058" ;
position: relative;
color: #5b8bd0;
letter-spacing:0.3em;
}

 

リンクの状態に合わせて表示を変える設定をする

リンクの状態に合わせて適用するCSSを切り替えます。

「疑似クラス」と呼ばれるセレクタを使用すれば、リンクテキストにマウスが重なった時やクリックした時にテキストの色を変えたりすることができます。

.table-of-contents a{
color: black;
}
.table-of-contents a:hover {
color: blue;
}
.table-of-contents a:active {
color: white;
}

の部分に使われている「:hover」や「:active」が「擬似クラス」になります。

擬似クラスを書く時の順番として
①:link {…}
②:visited {…}
③:hover {…}
④:active {…}

と学習すると思いますが、実践では「:link」と「:visited」は省略されることが多いみたいなので今回省略して書いています。

デフォルトだとリンクの色が青に設定されていたので、黒に変更しました。

マウスを載せるとデフォルトではDeeppinkだったので、コチラもBlueに変更しました。

目次の上にオシャレな見出しを付ける

.table-of-contents:after {
position: absolute;
font-family: FontAwesome;
content: '\f03a 記事の目次';
background: #5b8bd0;
color: #fdf2ef;
right: 0%;
left: 0%;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 2px 0 2px 0;
margin: 0 -4px 0 -4px;/* -で指定しているところはborderと同じ数値にする */
text-align:center;
font-size: 20px;
letter-spacing: 1em;
}

「記事の目次」の部分になります。

目次の囲い線を4pxに設定しているので、marginの所で「0 4px 0 4px」として合わせています。

「letter-spacing」が3em設定になっており、文字間隔が空きすぎている印象を受けたので「1em」に変更しました。

「px」指定ではなく「em」で指定している意味は「1文字分の間隔」ということです。

「:after」と表記してあるのは、「疑似要素」と呼ばれるセレクタで、選択している要素のコンテンツの後ろに、画像やテキストなどHTMLには書かれていないコンテンツを挿入することができます。

目次リストに表示されるドット「・」を消してオシャレなアイコンに変更する

ul.table-of-contents li {
list-style-type: none !important;
}
ul.table-of-contents li:before {
font-family: Font Awesome 5 Free;
content: "\f058" ;
position: relative;
color: #5b8bd0;
letter-spacing:0.3em;
}

リストのドット「・」を消すには「list-style-type:none;」と指定します。

まずリストのドットを非表示にしてからドットの代わりになるアイコンを指定するようにします。

アイコンはFontAwesomeのアイコンを使用しています。

FontAwesomeのアイコンと文字の間隔がそのままだと狭くて印象が悪かったので、「letter-spacing:0.3em;」としています。

この辺りは好みの問題なのでご自身の美的センスが問われます()

FontAwesomeが上手く表示されない問題の対処方法

最初にコードを書いた後にプレビューで確認したら上手くアイコンが表示されていませんでした。

「もしかして・・・・・”font-weight”を指定したらフォント表示されるヤツじゃね?」と思って指定してみたら無事いけました。

CSSでFontAwesomeを指定する時はぜひ参考にしてみてください。

終わり。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください