はてなブログは記事の見出しタグを目次として表示する機能があります。
はてなブログテーマ「Pallete」を使っている際に、目次のデザインを自分でカスタマイズするためのメモです。
目次カスタマイズの基本
.entry-content ul.table-of-contents
目次は、このCSSセレクタに要素を追加していくことでカスタマイズが可能です。当然ですが、セレクタ名が同じ場合はまとめて記述してしまって構いません。
カスタマイズしたCSSは、はてなブログのデザインからデザインCSSに貼り付けることで適用できます。
［もくじ］の文言を変える
.entry-content ul.table-of-contents:before {
content: "表示したい文言";
}
表示したい文言を編集し、デザインCSSに加えてください。
［もくじ］のデザインをもっとカスタマイズする
.entry-content ul.table-of-contents:before {
content: "[ もくじ ]";
display: inline-block;
margin: 0.2em 0em 1em;
padding: 0.2em 1em;
font-weight: bold;
border-bottom: 1px dashed black;
}
［もくじ］の文言を変更するために用意したセレクタですが、ここには他にも［もくじ］部分のデザインがテーマに記述されています。これはPalleteのデフォルト設定です。
ここの要素をいじくってデザインCSSに貼り付けると、［もくじ］部分のデザインが変わります。色を変更したり下線を消したり色々できますが、紹介するとキリがないので割愛します。
目次全体の横幅を調整する
Palleteの目次は横幅いっぱいに表示されていないように見えますが、実はテキストの長さによって大きさが変わり、デフォルトでも横幅いっぱいまで広がる仕様になっています。
それはinline-blockという要素に設定されているためであり、端的にいうと中身の大きさ分しか広がらない設定になっているためです。
中身のテキストの量や長さに関わらず、同じ大きさまで目次を広げて表示したい場合はブロック要素にした方がカスタマイズが便利です。
.entry-content ul.table-of-contents {
display:block;
}
当ブログではデフォルトのインラインブロック要素のまま使わせていただいています。
テキストをカスタマイズする
テキストのサイズを変更する
.entry-content ul.table-of-contents {
font-size:13px;
}
13という数字を大きくすれば文字が大きくなります。
フォントサイズが小さいとオシャレに見えますが、デフォルトの13pxは小さすぎる気がしたので15pxに変更しました。
リストの文字色を変更する
ul.table-of-contents li a, ul.table-of-contents li a:visited {
color: #任意のカラーコード;
}
.entry-content ul.table-of-contents li a:hover {
color: #任意のカラーコード;
}
上は通常時のカラー、下はマウスが乗っている時のリストの文字色を設定できます。
リストの前についているアイコンを変更する
目次リストのアイコン変更は地味に面倒です。
簡単ですがブログ全体のカテゴリなどのアイコンにまで作用してしまう方法と、面倒ですが目次のアイコンだけを変更できる方法の２種類があります。おすすめは面倒な方です。
共通するのはアイコンフォントを使うということです。はてなブログではコードを記述するとアイコンが表示できるのですが、詳しくは下記リンクを参照してください。
orefolder-sample.hatenablog.com
【簡単】ブログ全体のアイコンを変更する方法
/*== icon ==*/
ul.navi-top li a::before,
ul.table-of-contents li:before,
.hatena-module-title::before
{font-family:"blogicon";
content:"\f012";/*=== chevron-right ===*/
color: #ff5638;}
Palleteのカスタマイズ通りにブログ全体に適用されるデザインスキンをコピペで適用した方は、デザインCSSのどこかに上のような記述があるはずです。
この\f012というところを先ほどのサイトに従ってアイコンフォントを表すコードに書き換えると、アイコンが変わります。またcolor部分のコードを任意のカラーコードに書き換えることで色も変更可能です。
この方法の問題点は、サイドバーのタイトル横に表示されるアイコンなどもまとめて変更してしまうという点です。
【面倒】目次のリスト横のアイコンだけを変更する方法
/*== icon ==*/
ul.navi-top li a::before,
ul.table-of-contents li:before,
.hatena-module-title::before
{font-family:"blogicon";
content:"\f012";/*=== chevron-right ===*/
color: #ff5638;}
まず、デザインCSSにあるiconに関する記述がなされているところを探し、ul.table-of-contents li:before,という行を削除します。もしPalleteのスキンをコピペして適用していない場合は何もしなくて良いです。
そして次に、デザインCSSに次の記述を書き加えます。
ul.table-of-contents li:before {
font-family: "blogicon";
content: "\f006";
position: relative;
letter-spacing: .5em;
font-size: .8em;
color: black;
}
これがデフォルトの設定なので、ここのパラメータをいじるとデザインに反映されます。
contentをいじるとアイコンが変わり、letter-spacingをいじるとアイコンとテキストの間隔が変わり、font-sizeをいじるとアイコンのサイズが変わり、colorをいじるとアイコンの色が変わります。
行間を調節する
.entry-content ul.table-of-contents li {
line-height:1.7;
}
数字を増やすと目次の行間が大きくなります。当ブログでは2.0に設定しています。
最後に
Palleteのカスタマイズ記事は以下のページにまとめてあります。是非ご覧ください。