【コピペOK】Cocoonの見出しをCSSで装飾する。【初心者向け】

Webクリエイターの井上(@Kouki_Inoue0411)です。
今回は、Wordpress向けの無料スキン【Cocoon】をCSSを使って少しカスタマイズしてみたいと思います。

まずは、デフォルトの見出しを確認する

WordPressのインストール方法やCocoonの反映の方法は省きます。
Cocoonインストール後の見出しの装飾は以下のような感じ。

最初はこんな感じの見出しが確認できると思います。
良く言えば、シンプル。
悪く言えば、栄えない。

ものすごくシンプルで、余計なモノはそぎ落としたかのようなサイトの場合は、合っているのでないでしょか？
しかし、個性を出していきたいですよね？

CSS編集からサクっと見出し装飾しちゃいましょ。

ログイン→ダッシューボード→外観→CSS編集の順にクリックしていくと現在使用しているサイトのレイアウトと追加CSSが出てくると思います。

この【CSS編集】空欄の中にCSSを記入していきます。
これだけで完了です。
※初心者の方は、最低限のCSS(スタイルシート)の言語を覚えてから始められることをお勧めします。

Cocoonの見出しのタグ

いきなり見出しタグの【h1】と記入しても良いですが、今回は個別で変更したいので【article】を付けて見出しタグを付け、CSS言語で装飾していきます。
※必ず子テーマ(Cocoon child)を確認して変更を行ってください。

以下のコードをコピペして、空欄に入れて公開を押すと【h2】見出しが変化すると思います。

例

/*見出し h2*/
.article h2 {
color: #FF0000;/*文字は赤色*/
background: #EEEEEE;/*背景色は薄いグレー*/
border-bottom: 1px solid #CCCCCC;/*下線を付けて色はグレー*/
}

上記のコードをコピペして公開を押してたらOK！

背景色をグラデーションに変える

上記で変換が確認出来たら背景色をグラデーションに変えていきたいと思います。

見出し2【h2】の装飾

.article h2{
color: #FFFFFF;
background: linear-gradient(-135deg, #20B2AA, #4169E1);
}

上記の画像のようになったと思います。
続けて、【h3】の装飾ややサイドバーの見出し装飾もしていきたいと思います。

見出し3【h3】の装飾

.article h3{
display: inline-block;
background: linear-gradient(-135deg, #20B2AA, #4169E1);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;

border: none;
border-left: 5px solid #4169E1
}

サイドバー【h3】の装飾

.sidebar h3{
padding: 0 0 10px 0;
display: inline-block;
background: linear-gradient(-135deg, #20B2AA, #4169E1);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;

border-bottom: 6px solid;
border-image: linear-gradient(to right, #4169E1 0%, #20B2AA 100%);
border-image-slice: 1;
}

まとめ

今回はグラデーションを付けて見ましたが、様々な見出し装飾があります。

【サルワカ】さんや【NXworld】さん等、調べたらすぐにヒットするので素地のとして試してみてください。
更に、文字や背景をグラデーションにしてく方法は【WEBクリエーターボックス】さん等でも観覧できます。