WordPressCocoon

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

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

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

デフォルトのCSSを確認

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

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

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

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

新しいデザインを子テーマの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 の2つで大丈夫です。

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

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

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

.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はネット上にたくさん紹介されているので、お好みのデザインにチャレンジしてみてくださいね!

WordPress
\記事が役に立ったらシェアしてね/
うぇぶあしび

comment

  1. テイラー より:

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

    • DICE DICE より:

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

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

  2. テルヒコ より:

    初心者には非常にありがたいカスタマイズの記事いつも拝見しています。
    このサイドバーの記事もめちゃめちゃ参考になりました。
    ところで、新着記事などの文字サイズをDICEさんのように小さくしたい場合はどのようにすれば良いのでしょうか?
    お暇な時にでも教えて頂けると嬉しいです。
    宜しくお願いします。

    • DICE DICE より:

      コメントありがとうございます!
      新着記事の文字サイズはウィジェットで

      「最近の投稿」を使っているなら
      .widget_recent_entries ul li a {
      font-size: .8em;
      }

      Cocoon独自の「[C]新着記事」なら
      .widget-entry-card {
      font-size: .8em;
      }

      で調整できると思います。

  3. テルヒコ より:

    DICEさん、ありがとうこざいました ( v^-゚)Thanks♪
    助かりました!

タイトルとURLをコピーしました