WordPress Cocoon

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

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

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

\性別、年代別のアイテム盛りだくさん!/

デフォルトのCSSを確認

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

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

カスタマイズその1:グラデーションのライン

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

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

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

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

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

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

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

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

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

カスタマイズその2:中央寄せで両側にライン

もう1つ紹介しておきます。文字を中央寄せにして、両サイドにラインを入れたデザインです。コードはこちら↓

こんな感じの見た目になります↓

サイドバーの見出しデザインは .sidebar h3 に好きなコードを指定するだけなので簡単だと思います。

見出し用のCSSはネット上にたくさん紹介されているので、お好みのデザインにチャレンジしてみてくださいね!

コメント

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

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

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