KAMATANI GRAPHIC DESIGN

JOURNAL

KAMATANI GRAPHIC DESIGN

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

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

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

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

https://kamatanidesign.com/wordpress/736/

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

下線

見出しデザイン　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;/*上線なし*/
}

border-bottom: solid 2px #333;/*下線*/というCSS表記がポイントやな。

solid（実線）の箇所を下記に書き換えると、反映されるから試してみてなぁ。

none境界線を表示しない。境界線の幅も0になります。
hiddennoneと同じく境界線を表示しません。ただしnoneと違ってtableタグで他の境界線と重なった場合でも非表示となります。
solid境界線を実線で描写します。
dotted境界線を点線で描写します。
dashed境界線を破線で描写します。
double境界線を二重線で描写します。
groove境界線をへこんだ立体線で描写します。
ridge境界線を出っ張った立体線で描写します。
inset要素全体がへこんだようなデザインになる境界線を描写します。
outset要素全体が出っ張ったようなデザインになる境界線を描写します。

二重線

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

上下線

見出しデザイン　CSS
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;/*下線下空白*/
}

border-top: 2px solid #333;/*上線*/
border-bottom: 2px solid #333;/*下線*/

という２つのCSS表記がポイントやな。CSS知らんでも何となくわかってきたんちゃう？

背景色

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

background: #777;/*背景色*/の色を決めて、 color: #FFF;/*文字色*/を

変更するんや。

https://www.colordic.org/

下線＋背景色

見出しデザイン　CSS

さっきの下線のCSSに背景のCSS（background: rgba(50,50,50,.07);/背景色/）が

プラスされた形になる訳や。

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; 
}

背景色ストライプ

見出しデザイン　CSS
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; 
}

background: repeating-linear-gradientとは

その名の通り「繰り返しのグラデーション」を作るための関数なんや。

https://developer.mozilla.org/ja/docs/Web/CSS/gradient/repeating-linear-gradient()

https://simplicity-hacks.tokyo/?p=69

-45deg, /* 角度の指定 */の数字を変更するとストライプのデザインが変更できるから

一度やってみってや。

ちなみに0degが横ストライプ、90degが縦ストライプって寸法や。

見出しデザイン　CSS
見出しデザイン　CSS

背景色グラデーション

見出しデザイン　CSS
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; 
}

https://saruwakakun.com/html-css/basic/linear-radial-gradient

背景画像

見出しデザイン　CSS
 h2 {
  font-size: 20px !important;/*文字のサイズ*/
  font-weight:  bold;/*文字の太さ*/
  background-image:url(https://kamatanidesign.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;
}

https://developer.mozilla.org/ja/docs/Web/CSS/background-size

https://hico2019.com/internet_business/2987/

左線

見出しデザイン　CSS
 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;
}

角丸ツートーンカラー

見出しデザイン　CSS
 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;
}

角丸グラデーション背景

見出しデザイン　CSS
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;
}

見出しの左右両端に線

見出しデザイン　CSS
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;/*文字と横線の間隔*/
}

https://saruwakakun.com/html-css/basic/before-after

CSSの疑似要素って何？before・afterの使い方

まとめ

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

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

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

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

BACK TO JOURNAL