【WordPressブログ】本当に使える2021年 Cocoon見出しカスタマイズ（CSSコピーだけでできるデザイン集めました）

Cocoon 見出しのデザインをカスタマイズできるCSSの忘備録

見出しのデザインをカスタマイズできるCSSコードを紹介するでぇ。

コピペしてすぐにデザインに反映できるから使ってなぁ。

Cocoon 見出しデザインカスタマイズ　CSS忘備録

下線

 h2 {
  font-size: 20px !important;/*文字のサイズ*/
  font-weight:  bold;/*文字太さ*/
  border-bottom: solid 2px  #333;/*下線*/
  color: #333;/*文字色*/
  padding-bottom: .5em;/*文字下空白*/
  margin-bottom: 15px;/*下線下空白*/
  border-top: none;/*上線なし*/
}

二重線

 h2 {
  font-size: 20px !important;/*文字のサイズ*/
 font-weight:  bold;/*文字太さ*/
  border-bottom: 6px double  #333;/*下線*/
  color: #333;/*文字色*/
  padding-bottom: .5em;/*文字下空白*/
  margin-bottom: 15px;/*下線下空白*/
  border-top: none;/*上線なし*/
}

上下線

h2 {
  font-size: 20px !important;/*文字のサイズ*/
 font-weight:  bold;/*文字太さ*/
  border-top: 2px solid #333;/*上線*/
  border-bottom: 2px solid #333;/*下線*/
  color: #333;/*文字色*/
  padding: .5em 0;/*文字上右下左空白*/
  margin-bottom: 15px;/*下線下空白*/
}

背景色

h2 {
  font-size: 20px !important;/*文字のサイズ*/
  font-weight:  bold;/*文字太さ*/
  background: #777;/*背景色*/
  padding: .5em .7em;/*余白*/
  color: #FFF;/*文字色*/
  margin-bottom: 15px;/*文字下空白*/
  border-top: none;
  border-bottom: none;
}

下線＋背景色

h2 {
  font-size: 20px !important;/*文字のサイズ*/
  font-weight:  bold;/*文字太さ*/
  background: rgba(50,50,50,.07);/*背景色*/
  font-weight:  bold;
  border-bottom: solid 2px #333;/*下線*/
  color: #333;/*文字色*/
  padding: .7em 1em;/*文字上下左右空白*/
  margin-bottom: 20px;/*文字下空白*/
  border-top: none; 
}

背景色ストライプ

h2 {
  font-size: 20px !important;/*文字のサイズ*/
  font-weight:  bold;/*文字の太さ*/
  background: repeating-linear-gradient(
    -45deg,     /* 角度の指定 */
    #eee,      /* 色A ... 開始 */
    #fff 4px,  /* 色A ... 終了 */
    #ccc 4px,      /* 色B ... 開始 */
    #b2b2b2 4px   /* 色B ... 終了 */
  );/*ストライプ*/
  border-bottom: solid 2px #333;/*下線*/
  color: #333;/*文字色*/
  padding: .7em 1em;/*文字上下左右空白*/
  margin-bottom: 20px;/*文字下空白*/
  border-top: none; 
}

背景色グラデーション

h2 {
  font-size: 20px !important;/*文字のサイズ*/
  font-weight:  bold;/*文字の太さ*/
  background-image: linear-gradient(
  135deg,     /* 角度の指定 */
   #ddd,      /* 色A */
   #eee,      /* 色B */
   #fff      /* 色C */
  );/*背景色グラデーション*/
  border-bottom: solid 2px #333;/*下線*/
  color: #333;/*文字色*/
  padding: .7em 1em;/*文字上下左右空白*/
  margin-bottom: 20px;/*文字下空白*/
  border-top: none; 
}

背景画像

 h2 {
  font-size: 20px !important;/*文字のサイズ*/
  font-weight:  bold;/*文字の太さ*/
  background-image:url(https://be-my-design.com/wp-content/uploads/2021/10/h3musica.png);/*任意の画像*/
  background-repeat:no-repeat;/*繰り返さない*/
  background-size:contain;/*縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する*/
  color: #333;/*文字色*/
  padding: .5em .7em;/*文字上下左右空白*/
  margin-bottom: 15px;/*文字下空白*/
  background: hidden !important;
}

左線

 h2 {
  font-size: 20px !important;/*文字のサイズ*/
  font-weight:  bold;/*文字の太さ*/
  border-left: 3px solid #333;/*左線*/
  padding: .5em .7em;/*文字上下左右空白*/
  margin-bottom: 15px;/*文字下空白*/
  border-top: none; 
  border-bottom: none;
}

角丸ツートーンカラー

 h2 {
  font-size: 20px !important;/*文字のサイズ*/
  font-weight:  bold;/*文字の太さ*/
  position: relative;
  color: #FFF;/*文字の色*/
  padding: .8em;/*文字上右下左空白*/
  padding-left: 1.3em;/*文字左空白*/
  margin-bottom: 15px;/*背景下空白*/
  background: linear-gradient(rgba(50,50,50,.9) 0%, rgba(50,50,50,.85)  50%, rgba(50,50,50,1)  50%) ;/*背景色ツートン*/
  border-radius: 50em 50em 50em 50em;/*角丸*/
  border-top: none; 
  border-bottom: none;
}

角丸グラデーション背景

h2 {
  font-size: 20px !important;/*文字のサイズ*/
  font-weight:  bold;/*文字の太さ*/
  padding: .8em;/*文字上右下左空白*/
  padding-left: 1.3em;/*文字左空白*/
  margin-bottom: 15px;/*背景下空白*/
  background: linear-gradient(#FFF 0%, rgba(50,50,50,.1) 100%);/*背景色グラデーション*/
  border-radius: 50em 50em 50em 50em;/*角丸*/
  border-top: none; 
  border-bottom: none;
}

見出しの左右両端に線

h2 {
  font-size: 20px !important;/*文字のサイズ*/
  font-weight:  bold;/*文字の太さ*/
  display: flex;/*「Flexbox」コンテナー*/
  align-items: center;/*垂直方向位置*/
  margin-bottom: 15px;/*文字下空白*/
  border-top: none; 
  border-bottom: none;
  background: none !important;
}
h2:before,/*CSSの擬似要素*/
h2:after {
    content: "";
    height: 1px;
    flex-grow: 1;/*フレックスアイテムの伸び率*/
    background-color: #666;/*文字の色*/
}
h2:before {
    margin-right: 1rem;/*文字と横線の間隔*/
}
h2:after {
    margin-left: 1rem;/*文字と横線の間隔*/
}

まとめ

CSSの追加、組み合わせでなんぼでも、カスタマイズできるんや。

すべてを覚えることはできないけど、CSSのコードのつづりや書き方もぼちぼち

覚えていくと、便利に使用できるから、この機会に勉強してやぁ。

この他にも見出しデザインは、掲載するので、楽しみにしといてや。