見出しのデザインを変更する
自分でCSSを書いてデザインを変更してみよう
最近は日々とｈｔｍｌとｃｓｓの勉強にいそしんでおります。
今回はそんな中で復習も兼ねて見出しのデザインを変更しましたので、そのCSSのコードをご紹介しようと思います！
今回ご紹介しているコードを以下の様にWordPressで使用する場合は「ｈタグ」の前に「.article」を付けて使用してください。
（使用例）
.article h1 {
background-color: #fff;
}
文字を強調するデザイン
私はH１タグをこのデザインに変更しています。
See the Pen gradient by ざんと (@zanto_kirisame) on CodePen.
box-shadowで枠組みを際立たせて、さらに文章にも影を付けて立体感を出して強調しています。
マウスを乗せると色が変わるデザイン
私はH2で使用しています。
See the Pen gradient by ざんと (@zanto_kirisame) on CodePen.
サンプルとして４パターン用意してあります。
同一系統色のグラデーションもキレイですが、別系統とのグラデーションも味があっていいですね！
コードをコピペした後に「rgba」や「color」の数値を変更して、お好みの色を使用してください。
上下にボーダーラインを入れて背景色を薄く入れたデザイン
私はH3で使用しています。
See the Pen border-sand by ざんと (@zanto_kirisame) on CodePen.
こちらも４パターン用意してあります。
ボーダーラインと背景色の数値は同じですが、背景のみ「rgba」の４つ目の「α（アルファ）」の数値を「0.1」にして色を薄くしています。
上下をボーダー、左右を三角で挟んだデザイン
私はH4で使用しています。
See the Pen triangle by ざんと (@zanto_kirisame) on CodePen.
背景には色を付けていませんが、三角で挟むことで注目してもらうデザインになっています。
三角と文字の高さを合わせる為にバランスを取るのが難しかったです。
吹き出しに使用されている三角形を使用したデザインだね！
まとめ
普段WordPressやCocoonの機能に頼り切っていると気付きませんでしたが、CSSはとても色んな事が出来る為、勉強していくとデザインの幅がグッと広がって楽しいですね！
これからも新しく覚えた知識などを使用してデザインを変更して行く時はご紹介したいと思います！
良いブログライフを！
