【コピペでOK】はてなブログ シンプルな目次のデザイン・カスタマイズ
こんにちは、パル子です。
今日は目次のカスタマイズを紹介します。
（当サイトで使用しているテーマは、『Brooklyn』になります。ご了承ください。）
調子に乗ってデザインを考えて、ソースをたくさん貼っつけたので、スマホだと少々見づらいかもしれません。よろしくお願いします。
【これまでのカスタマイズ記録】
目次のカスタマイズ
実は、目次のカスタマイズに苦戦していました。というのも、周りの枠線を消そう消そうとしても消えず……。元のテンプレートのcssが干渉したりしているのかもしれません。（イマイチ分かっていない）
とりあえず、!importantを使って頑張りつつ、目次っぽいデザインに変えてみました。
【before】
【after】
このブログに合うように、クリーム色に緑のアクセントのデザインにしました。
【ソースコード】
他にも色々デザインを考えてみた
誰得デザインができたのでこっそり載せておきます。テンプレのcssに引っ張られていたところが多々あったので、「!important」を多用しています。要らなかったら消してください。（変なところあったら、よろしければ教えてください。）
画像はスマホ表示のサンプルなのですが、pcで見るとまた少し違うかと思いますので、是非一度ご確認下さい。
赤と青
ハートで可愛めに作ってみました。
【ソースコード】
モノトーンに青のアクセント
シンプルイズベストな感じで作ってみました。
【ソースコード】
紫と青
白抜き文字が意外と可愛いかもしれない。これが一番目次ちっくな感じがするのは気の所為かな……。
【ソースコード】
これからやることリスト
タイトルデザインの変更パンくずリストを格好良くする- トップページのカテゴリー
カテゴリーのカスタマイズ目次のカスタマイズ- SNSボタンの設置
- 次のページへ の装飾
- 全体のリンク色変える
- フッターのカスタマイズ
以上になります。
ここまで読んで下さってありがとうございました。
参考：Wordpressでコードを表示する方法にGitHubの「Gist」を使用することにしました | ブログ・デ・イコラ
