スポンサーリンク

【ブログ】見出しタグの装飾を変えてみた!【Cocoon】

スポンサーリンク
h2タグCSS ブログ/WordPress
スポンサーリンク

ついにCSSをいじるぞ!!

ブログのカスタマイズといえば
CSSやphpファイルの変更!

コードを一つ間違えれば
ブログがおかしくなると言われる一方で
自分好みにしていく魅力には
やはり勝てない・・・!

今回は、h2タグのデザイン変更
チャレンジしてみました。

CSSの編集は外観から

ThemeEdit
外観→テーマの編集を選ぶと、
CSSの編集画面が表示されます。

見出しタグの元ネタは親テーマに

Cocoonは親テーマと子テーマがあって
変更は基本的に子テーマで行います。

なので、まずはテーマ選択から
Cocoonの親テーマを選択

親テーマ選択

そこから「h2」で検索して
見出しタグの定義情報を探します。

親テーマ定義

親テーマの定義をコピーします。

今度は子テーマを選択して
編集用のエリアにそれを貼り付けて
必要に応じて加工します。

今回のタグの場合はこんな感じ
h2タグCSS

動作確認

CSSの変更を保存したら、
基本的には自分のサイトを
実際に開いて確認してみます。

ここで注意しなければならないのが
ブラウザキャッシュの存在です。

同じページをリロードするだけだと
キャッシュが作用して
変わってなく見えることがあります。

本来はキャッシュクリアをして
都度確認するんでしょうが、
私は開くブログ記事を変えることで
確認していました。

参考にしたサイト様

https://saruwakakun.com/html-css/reference/h-design

様々な見出しタグのサンプルが
CSSコード付きで紹介されているので
きっとお好みのデザインが見つかると思います。

今回はそれをコピペして
既存と重複する項目を外して
色を変えるだけで、見出しが完成しました。

HTML,CSS カラーコード一覧表 | 背景色や文字色の設定
HTML,CSS 500色のカラーコード一覧表。W3C指定16色やセーフカラー216色など、ホームページのフォントカラーや背景色。カラーコード一覧表

カラーコードの参考にしました。
配色が見やすくてありがたかったです。

あとがき

基本的には既存のコードに
ネットから拾ったコードを被せるだけの
簡単なお仕事なのですが、

いかんせん初めての作業とあって
探り探り一つ一つ進めていったので
この程度の作業でも1時間くらい要しました。

特に、動作確認の項目で書いた点に
気づくまで時間が掛かりましたね。

初歩的な内容ですが
参考になれば幸いです。

コメント

タイトルとURLをコピーしました