パルコツ

現役女子大生が色々な分野でレベルアップを目指すブログ

パルコツ

MENU

【コピペでOK】はてなブログ 目次のカスタマイズ

f:id:a0ryzae:20181012181310p:plain

こんにちは、パル子です。
今日は目次のカスタマイズを紹介します。
(当サイトで使用しているテーマは、『Brooklyn』になります。ご了承ください。)


調子に乗ってデザインを考えて、ソースをたくさん貼っつけたので、スマホだと少々見づらいかもしれません。よろしくお願いします。


【これまでのカスタマイズ記録】

  1. Blooklynのカスタマイズ全般
  2. ヘッダー画像作成&グローバルメニュー
  3. カテゴリー&パンくずリスト






目次のカスタマイズ

実は、目次のカスタマイズに苦戦していました。というのも、周りの枠線を消そう消そうとしても消えず……。元のテンプレートのcssが干渉したりしているのかもしれません。(イマイチ分かっていない)
とりあえず、!importantを使って頑張りつつ、目次っぽいデザインに変えてみました。


【before】
f:id:a0ryzae:20180925183507j:plain:w280


【after】
f:id:a0ryzae:20180925235020j:plain:w280
このブログに合うように、クリーム色に緑のアクセントのデザインにしました。


ソースコード




他にも色々デザインを考えてみた

誰得デザインができたのでこっそり載せておきます。テンプレのcssに引っ張られていたところが多々あったので、「!important」を多用しています。要らなかったら消してください。(変なところあったら、よろしければ教えてください。)


画像はスマホ表示のサンプルなのですが、pcで見るとまた少し違うかと思いますので、是非一度ご確認下さい。


赤と青

f:id:a0ryzae:20180926000952j:plain:w280
ハートで可愛めに作ってみました。


ソースコード



パステルカラー

f:id:a0ryzae:20180926001009j:plain:w280
ふんわり淡色系で作ってみました。


ソースコード



モノトーンに青のアクセント

f:id:a0ryzae:20180926001022j:plain:w280
シンプルイズベストな感じで作ってみました。


ソースコード



紫と青

f:id:a0ryzae:20180926001036j:plain:w280
白抜き文字が意外と可愛いかもしれない。これが一番目次ちっくな感じがするのは気の所為かな……。


ソースコード




これからやることリスト

  • タイトルデザインの変更
  • パンくずリストを格好良くする
  • トップページのカテゴリー
  • カテゴリーのカスタマイズ
  • 目次のカスタマイズ
  • SNSボタンの設置
  • 次のページへ の装飾
  • 全体のリンク色変える
  • フッターのカスタマイズ



以上になります。
ここまで読んで下さってありがとうございました。


参考:Wordpressでコードを表示する方法にGitHubの「Gist」を使用することにしました | ブログ・デ・イコラ