スポンサーリンク

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

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

ついにCSSをいじるぞ!!

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

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

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

CSSの編集は外観から

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

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

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

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

親テーマ選択

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

親テーマ定義

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

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

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

動作確認

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

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

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

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

参考にしたサイト様

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

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

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

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

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

あとがき

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

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

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

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

コメント

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