はてなブログ。記事の目次のデザインを変更する方法 ＆「目次の見た目がパソコンとスマホで違う？」の解決方法！
こんにちは。
マキシマムおじさんです。
前回の記事では、目次のつけかたをお知らせしました。
マキシマムおじさんは、はてなブログの標準の目次ではなく、ちょっとかっこいい目次のデザインに変更しました。
今回はその方法をお知らせします。
その後、小さなトラブルも起こりましたので、そのことも紹介します。
記事の目次のデザインを変更する方法
①「ダッシュボード」の「デザイン」をクリックします。
②「設定（スパナマーク）」をクリックします。
③「デザインCSS」をクリックします。
④英語がいろいろ書かれた箱が出てきます。そして、英語のところをクリックします。
⑤すると↓これが出てきます。
なんだかやばそうな画面ですが、ここの９行目とか１０行目にあるものをコピペします。（たぶん何行目に貼り付けてもOKです。）
そうすると、こんな目次のデザインになります。
単なる四角い目次のデザインから、アレンジできるわけです。
ちなみに・・・あるものとは？
はてなぶろぐの「フジブロ」さんからコピペさせてもらいました。
はてなブログ【目次カスタマイズ】コピペで使えるデザイン集 - フジブロっ！ (fuji-blo.com)
↑ ここの記事にいろいろな枠のサンプルデザインがあります。
自由に使っても良いとのことなので、使わせてもらいました。
ありがとうございます。（さらに紹介もさせていただきました。）
・・・というわけで、こうすると目次のデザインを変更することができました。
CSSってなんだか怖そうですが、貼り付けるだけなので大丈夫です。
「目次の見た目がパソコンとスマホで違う？」の解決方法
目次のデザインを変更することができましたが、ここで問題が・・・。
パソコンの画面では、目次デザインが変わりました！
でも、スマホで見てみると・・・変わっていない。
「なぜだ？」ということで調べてみると、こんな解決方法にたどり着きました。
①先ほどと同じになりますが、「ダッシュボード」の「デザイン」をクリックします。
②「スマホのボタン」をクリックすると下のようになるので、「詳細設定」をクリックします。
③そうすると↓これが出るので、チェックをします。
レスポンシブデザインのテーマだと有効のようです。
マキシマムブログは知らぬ間にレスポンシブルデザインだったようです。
これでスマホの画面も同じデザインになりました。
最後までお読みいただきありがとうございました。
マキシマムおじさんでした。
_________________________________________
マキシマムブログ ～ カテゴリー
______________________________
多くの情報があります。（ブログ村）
_________________________________________
