【はてな】目次のカスタマイズでデザインが崩れるときの対処方法

さめはだ舞子（@samehada_maiko2）です。ちょうど半月ほど前に当ブログの目次カスタマイズを行いました（今は移行してWPですが、はてなProユーザーでした）

目次に限らずブログのデザインをカスタマイズするときは、HTML/CSSが記載されている他のサイトからコピペをして自分のブログに適応、そこからオリジナルに変更していく形が多いかと思います。

しかしながら、説明手順通りに操作を行っても上手く適応されない場合って結構多いですよね…。しかも何が原因か分からない…。泣きたくなります。

今回わたしに起きたのは「目次のアイコンがスマホ版だけ枠外に出てしまう」という問題。悩んでいたのですが、本日とある記事のおかげで見事解決したので紹介します。

はてなブログの目次カスタマイズ
目次デザインCSSの追記をする
スマホ版で目次のアイコンが枠外に出てしまう問題
目次のアイコンの位置を修正する方法
スマホ版の目次のアイコンの位置を指定する
検証ツールで目次アイコンの要素を判断する
まとめ

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

はてなブログの目次ってシンプルですが、なんとなくサイトのデザインに合わない、見づらいと思って変更したい方は結構多いのではないでしょうか。わたしもその一人で、目次のカスタマイズを始めました。

今回は、以下の記事の目次デザインを参考にさせていただきました。

この記事では、女性向け目次デザインのHTML/CSSが紹介されています。当ブログで現在参考にさせていただいているのは「目次サンプル2」のデザイン。ブルーを基調としたシンプルなデザインで当ブログの雰囲気にも合わせやすいと思いました。

目次デザインCSSの追記をする

目次デザインが決まったらCSSを追記していきます。スマホ版もPC版と同じデザインにしたい場合はそれぞれで設定が必要となります。

PC版の設定

はてなブログのデザイン＞カスタマイズ＞デザインCSSの欄

CSSを追記（コピペする）

スマホ版の設定

はてなブログのデザイン＞スマートフォン＞記事＞記事上の欄

まずは<style type=”text/css”></style>と追記
①で追記した<style type=”text/css”></style>の間に目次デザインCSSを追記

<style type=”text/css”>

/*————————————–
もくじ
————————————–*/
ul.table-of-contents {
font-size: 12px !important;/*文字サイズ*/
border: 1px solid #eee !important;
padding: 1em 1.5em 1em 2.25em !important;
color: #999 !important;
display: inline-block;
}

・

</style>

スマホ版の記入欄はHTML記述用となっていますので、CSSで指定する際は必ず<style type=”text/css”></style>で「HTML欄にCSS形式の情報を書きますよ」と教えてあげなくてはいけません。

スマホ版で目次のアイコンが枠外に出てしまう問題

さて、CSSを追記し無事に目次が適応されました。

上の画像がPC版で表示された目次です。
次にスマートフォン版で確認してみます。

スマートフォンで表示された目次。
あれー！？目次のアイコン（ここではチェックマーク）が枠の外に飛び出しています！

PC版では正しく表示されているのに何でー！？わたしはこの問題にかなり悩みました。いくらCSSを弄ってみてもなかなか修正されない…。

とある欄外のインデックス（突然のオタク感）

どうにも直せない(笑)パソコンだとうまく枠内に入るのに何でかしら🤔？？ pic.twitter.com/JMWoFPIkHd

— さめはだ舞子 (@samehada_maiko2) 2017年12月17日

この日はCSSの修正に時間を割くことができず、そのまま半月ほど放置気味だったのですが、なんと本日、簡単に修正することができました！！！！

目次のアイコンの位置を修正する方法

参考にしたはTwitterでもお世話になっている、すっちーさん（@hkc_27）の記事。タイムリーなことに目次カスタマイズについての内容をあげていらっしゃいました。

そこにわたしと同じ「目次のアイコンが枠外に出てしまう問題」についての記載がありました。状態は全く同じでスマホ版のみアイコンが枠外に出ている状態です。

もうめちゃくちゃずれてて泣けます（笑）箱がずれてるのかアイコン（灰色の⊕）がずれてるのか、どっちずらせばいいんだ！という感じでしたが、今回はアイコンをずらしました。

そうか！アイコンを枠内に入るように右に移動させれば良かったんだ！わたしは一生懸命「枠を広げてアイコンを収める」方法をとっていました。なんて頭が固いんだ自分！！

さて、すっちーさんの方法を参考に修正してみましょう。

スマホ版の目次のアイコンの位置を指定する

今回はPC版の表示は問題なく、スマホ版のみデザインが崩れているため、

はてなブログのデザイン＞スマートフォン＞記事＞記事上の欄

でスマホ版のCSSのみ修正していきます。

「ul.table-of-contents li:before」の「left」の値を変更していきます。この「ul.table-of-contents li:before」が目次の「アイコン」部分の設定となります。アイコンの「left（左側）の距離」を変えていくというイメージだと分かりやすいですね。

今回は「position: absolute;」でpositionプロパティが「absolute」と指定されているため、親要素「ul.table-of-contents」の左上が基準となり、そこからアイコンの左側を基準値から〇em分の位置に動かす指定します。

初期値

ul.table-of-contents li:before {
font-family: blogicon;
content: “\f029”;
position: absolute;　（親要素「ul.table-of-contents」の左上が基準値）
left: 1.5em;　（アイコンの左部分は基準値より1.5em分の位置に配置）
color: #4eacd1;
}

初期値　スマホ版表示

初期値　イメージ図

変更後

ul.table-of-contents li:before {
font-family: blogicon;
content: “\f029”;
position: absolute;　（親要素「ul.table-of-contents」の左上が基準値）
left: 4.5em;　（アイコンの左部分は基準値より4.5em分の位置に配置）
color: #4eacd1;
}

修正値　スマホ版表示

修正値　イメージ図

無事、修正されました！わーい！

検証ツールで目次アイコンの要素を判断する

今回は冒頭に紹介した「はてなブログの目次をシンプル＆おしゃれにカスタマイズ / サンプルCSS付き！ – THE LITTLE ESCAPE」から目次デザインのCSSを使用していたので、アイコン要素は「ul.table-of-contents li:before」の部分となりましたが、別のCSSデザインを使用している場合は該当部分が異なります。

Google Chromeブラウザを使用している場合、目次が表示されているページを表示し、目次の上で右クリック＞検証（I）を選択すると以下のような画面が出てきます。これは、デベロッパーツールと呼ばれるもので、そのページのソースコードを見ることができるものです。