【Cocoon】サイドバーの見出しデザインをカスタマイズ

WordPressテーマ「Cocoon」のカスタマイズ記事です。
備忘録を兼ねて書いていますが、誰かの参考になれば幸いです。

今回はサイドバーの見出しデザインを変えてみました。
CSSをちょこっと足すだけの簡単な作業です。

デフォルトのCSSを確認

まずはデフォルトでサイドバーの見出しにどのようなスタイルが指定されているかを、Chromeのデベロッパーツールなどで確認します。

余白をとって背景色を指定しただけのシンプルなデザインですね。
カスタマイズのしやすさを重視していることが分かります。

子テーマでCSSを上書きする

新しいデザインを子テーマのstyle.cssに追加します。
場所は「子テーマ用のスタイルを書く」という部分ですね。
「レスポンシブデザイン用のメディアクエリ」のところは使いません。

上記のCSSを反映するとこのようになります。

少しの手間でデザインが変わる!

デザインのポイントは letter-spacing で文字と文字の間隔を少しだけ広げていること。ちょっとした手間を加えることで雰囲気が変わってきます。

あとグラデーションのボーダーは、通常の border プロパティにはグラデーションを指定できないので、 :after の擬似要素を使って高さ1pxのボックスで表現します。

グラデの配色を変える場合は、Ultimate CSS Gradient GeneratorのようなWeb上のジェネレーターを使うと便利です。

CSSのグラデーションのコードについて

ジェネレーターではたくさんのコードが出力されますが、使うのは linear-gradient-webkit-linear-gradient の2つで大丈夫です。

以前は古いブラウザに対応するために他のコードも必要でしたが、現在は上記のコードだけでほとんどのブラウザに対応できます。

 

ひとこと
ひとこと

お好みのデザインにチャレンジしてみてね。

コメント

  1. テイラー より:

    昔からブログ見させていただいています。最近更新が多くて嬉しいです。カスタマイズ記事楽しみにしています。
    僕も最近Cocoonにしたんですが、自作ボックスでline-heightと heightを同値にしてもボックスの縦中央配置にならないんですよね〜。
    うぇぶあしびさんはそういった事はなかったですか〜?

    • DICE より:

      返信遅くなってすみません!
      コメントありがとうございます!

      縦中央はやり方いろいろありますが、「table-cell」を使ってみても良いかもですね。
      自作ボックスはまだ触ってないので今度やってみます(^^)