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

サイドバー見出しデザインカスタマイズ
この記事は約4分で読めます。

WordPressテーマ「Cocoon」では、簡単にサイドバーが設定できるので便利ですよね。

しかし、ちょっとばかし見出しがおしゃれとは言いがたい…。

というわけで、今回はこのサイドバーの見出しをカスタマイズする方法を解説します。

サイドバー見出しデザインの変更

初期設定では、見出し部分は文字が左寄りで、キーカラーを使ったベタ塗りのデザイン。

サイドバー見出しのデザインを変更するには、CSSを追加する必要があります。

手順は簡単、２ステップです。

  • STEP1
    CSSをコピー
  • STEP2
    貼り付け

CSSを貼り付ける場所

まず、CSSを貼り付ける場所をお伝えしておきます。

WordPress管理画面から、「外観」>「カスタマイズ」>「追加CSS」を開きます。

コピーしたコードを貼り付けた後、「公開」をクリックしてください。

WordPressのCSSを編集する前は、編集前に必ずバックアップを取って保存してください。もし編集後、エラーが出るようでしたら、バックアップファイルを元に復元してください。

コピーするCSS

デザイン別にご紹介しますので、お好きなものをコピーして使ってください。

基本的には「.sidebar h3」を指定して変更します。

下線のみにする

文字を中央にした下線だけのシンプルなデザイン。

CSSコード
.sidebar h3 {
background: transparent;
border-bottom: 2px solid #d4dfbb;
text-align: center;
padding: 10px;
}
  • background：transparentで、背景を透明化する
  • border-bottom： 下線の太さ・種類・色　
    　お好みの太さ・色に変更してください。
    　点線にしたい場合は「solid」を「dotted」に変更すればOK！
  • text-align：centerで、文字を中央揃え
    中央揃えでなくてもいい場合は、この行は削除します。
  • padding：余白　
    　数字を変更して調整してみてください。
左側の線のみにする

左側にシンプルに線を入れたデザイン。

CSSコード
.sidebar h3 {
background: transparent;
border-left: solid 7px #d4dfbb; 
padding: 10px;
}
  • background：transparentで、背景を透明化する
  • border-left：左側の線の太さ・種類・色　
    　お好みの太さ・色に変更してください。
  • padding：余白　
    　数字を変更して調整してみてください。
ラインで囲む

両側にシンプルに線を入れたデザイン。

CSSコード

.sidebar h3 {
background: transparent;
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 #d4dfbb;
}
.sidebar h3::before {
left: 0;
}
.sidebar h3::after {
right: 0;
}
  • background：transparentで、背景を透明化する
  • text-align： centerで、文字中央揃え
  • border-top：両側の線の太さ・種類・色　
    　お好みの太さ・色に変更してください。

まとめ

サイドバーはパソコンだと必ず見てもらう場所なので、できればおしゃれにしたいものです。

もっといろいろなデザインに変更することも可能なので、数字を変更したり、コードを追加したりしてカスタマイズを楽しんでみてください。

コメント