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

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

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

デフォルトのCSSを確認

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

.sidebar h3 {
    background-color: #f3f4f5;
    padding: 16px 10px;
    margin: 16px 0;
}

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

カスタマイズその１：グラデーションのライン

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

.sidebar h3 {
    background: none; /*背景色を解除*/
    padding: 0; /*余白をなしに*/
    font-size: 16px; /*文字サイズを小さく*/
    letter-spacing: 2px; /*文字の間隔を少し広く*/
}
.sidebar h3:first-letter {
    font-size: 1.5em; /*最初の文字を1.5文字分に大きく*/
}
.sidebar h3:after { /*グラデーションのラインを引く*/
    content:"";
    display:block;
    height:1px;
    width:100%;
    background: -webkit-linear-gradient(left, #40bfa0 0%,#fef785 82%,#f37b7b 100%);
    background: linear-gradient(to right, #40bfa0 0%,#fef785 82%,#f37b7b 100%);
}

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

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

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

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

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

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

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

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

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

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

.sidebar h3 {
    background: none;
    font-size: 16px;
    letter-spacing: 2px;
    display: inline-block;
    position: relative;
    width: 100%;
    padding: 0;
    text-align: center;
}
.sidebar h3::before, .sidebar h3::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 28%; /*ラインの長さ*/
    border-top: 3px solid #444d53; /*ラインの色*/
}
.sidebar h3::before {
    left: 0;
}
.sidebar h3::after {
    right: 0;
}

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

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

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