ただいまの人気記事はこれ!TOP15を公開中

【Cocoon】サイドバーの見出しをカスタマイズする方法いろいろ

Cocoon

今回は、Cocoonのサイドバーの見出しをカスタマイズする方法をお届けします。

Cocoonのサイドバーは、初期設定ではとてもシンプルなデザインになっています。

Cocoonのサイドバー(初期設定)

この見出しの色やデザインを、自分好みにするカスタマイズです。

どのカスタマイズもコピペでかんたんにできますので、よかったら参考にしてみてください。

カスタマイズのやり方

今回紹介するカスタマイズは、どれもコピペでできます。

やり方はかんたん!紹介するコードをコピーして、Cocoonの子テーマの「style.css」に貼りつけるだけです。

貼り付けるのはここ

Cocoonのカスタマイズ用コードを貼る場所

すでに何らかのコードを書いている場合は、その後ろに今回のコードを貼ればOKです。

見出しの背景色を変えるカスタマイズ

サイドバーの見出しの背景色を変える

まずは、Cocoonのサイドバーの見出しの背景色を変える方法です。

Cocoonのサイドバーのカスタマイズ(背景色を変える)

次のコードを貼るだけで、見出しの背景色を好きなものにすることができます。

背景色を変えるコード
.sidebar h3{
  background-color:#DFFCFA;/*好きな背景色にする*/
  padding:16px 10px;
  margin:16px 0;
}

「background-color:」のあとにあるのが、色の指定です。

ここでは「#DFFCFA」という色を指定しています。この部分を好きな色のカラーコードに変えてください。

カラーコードは、WEB色辞典を参考にするとわかりやすいです。

背景色を透明にする

文字の色はそのままに、見出しの背景色を透明にするカスタマイズです。

Cocoon 見出しの背景色を透明にする

文字だけのシンプルな見出しができます。

背景色を透明にするコード
.sidebar h3{
  background:transparent;/*背景を透明に*/
  padding:16px 10px;
  margin:16px 0;
}

このコードはそのまま貼るだけでOKです。

見出しの縦幅(高さ)を変えるカスタマイズ

Cocoonの初期設定では、見出しの縦幅が広めになっています。

Cocoon 見出しのpadding

 

この縦幅を、お好みの幅にするカスタマイズです。

見出しの内側の余白を調整するカスタマイズ
縦幅を調整するコード
.sidebar h3{
  background-color:#DFFCFA;/*好きな背景色にする*/
  padding:10px 10px;/*見出しの内側の余白を調整する*/
  margin:16px 0;
}

「padding:」のあとが、見出しの内側の余白を調整する項目になります。

10pxが2つ並んでいますが、前のほうが上下の余白を指定する項目です。数字を小さくするほど、間隔が狭くなります。お好みに応じて調整してみてください。

ちなみに後ろの10pxは、左右の余白の指定です。

文字の色を変えるカスタマイズ

見出しの文字の色を変える

背景色は初期設定のままで、見出しの文字の色を変えるカスタマイズです。

Cocoon サイドバーの見出しの文字色を変える
文字の色を変えるコード
.sidebar h3{
  background-color:#f3f4f5;
  color:#3A6CAE;/*文字の色を変える*/
  padding:16px 10px;
  margin:16px 0;
}

「color:」のうしろの「#3A6CAE」が、文字の色を指定する項目です。

この部分を好きな色のカラーコードに変えると、文字がその色になります。

カラーコードは、WEB色辞典を参考にするとわかりやすいです。

スポンサーリンク

背景色と文字の色を変える

見出しの背景色と、文字の色を変えるカスタマイズです。

サイドバーの見出しの背景色と文字色を変える Cocoon
背景色と文字色を変えるコード
.sidebar h3{
  background-color:#95CE4B;/*好きな背景色にする*/
  color:#ffffff;/*好きな文字色にする*/
  padding:16px 10px;
  margin:16px 0;
}

「background-color:」で背景色を、次の「color:」で文字色を指定しています。

どちらも好きなカラーコードに置き換えてください。カラーコードは、WEB色辞典を参考にするとわかりやすいです。

見出しに下線を入れるカスタマイズ

見出しに下線を入れる

サイドバーの見出しに下線を入れることもできます。

サイドバーの見出しに下線を入れる Cocoon
見出しに下線を入れるコード
.sidebar h3 {
  border-bottom:2px solid #8BC34A;/*下線の太さ、種類、色*/
  background:transparent;/*背景を透明に*/
  padding:10px 0 5px 3px;
}

「border-bottom:」の後ろで、下線の太さと種類、下線の色を指定しています。

数字を大きくするほど線が太くなります。

下線をドットにする

下線をラインではなく、ドット(点線)にすることもできます。

サイドバーの見出しの下線をドット(点線)にする Cocoon
見出しの下線をドットにするコード
.sidebar h3 {
  border-bottom:2px dotted #8BC34A;/*下線の太さ、種類、色*/
  background:transparent;/*背景を透明に*/
  padding:10px 0 5px 3px;
}

「border-bottom:」の後ろで、下線の太さと種類(ここでは点線)、下線の色を指定しています。

数字を大きくすると、ドットの大きさが変わります。

文字を中央寄せするカスタマイズ

サイドバーの見出しの文字を「中央寄せ」にするカスタマイズです。

Cocoon サイドバーの見出しの文字を中央寄せにする
文字を中央寄せするコード
.sidebar h3 {
  border-bottom:2px solid #8BC34A;/*下線の太さ、種類、色*/
  background:transparent;/*背景を透明に*/
  text-align:center;
  padding:10px 0 5px 3px;
}

「text-align:center」で中央寄せを指示しています。

線の色などお好みでカスタマイズしてみてください。

おしまいに

今回はCocoonのサイドバーの見出しをカスタマイズする方法をお届けしました。

サイドバーのデザインが変えると、サイトの印象もがらっと変わります。自分らしさも出しやすい項目かと思います。

よかったら参考にしてみてくださいね。

スポンサーリンク
Cocoon
ゆずゆをフォローする
この記事を書いた人
ゆずゆ

読むと、ちょっぴり役に立つ&たのしくなるコンテンツを発信しています。クッピーラムネとAmazonのFire HD8がお気に入り。雑貨マニア。

ゆずゆをフォローする
ゆずゆろぐ。