ついにCSSをいじるぞ！！
ブログのカスタマイズといえば
CSSやphpファイルの変更！
コードを一つ間違えれば
ブログがおかしくなると言われる一方で
自分好みにしていく魅力には
やはり勝てない・・・！
今回は、h2タグのデザイン変更に
チャレンジしてみました。
CSSの編集は外観から
外観→テーマの編集を選ぶと、
CSSの編集画面が表示されます。
見出しタグの元ネタは親テーマに
Cocoonは親テーマと子テーマがあって
変更は基本的に子テーマで行います。
なので、まずはテーマ選択から
Cocoonの親テーマを選択
そこから「h2」で検索して
見出しタグの定義情報を探します。
親テーマの定義をコピーします。
今度は子テーマを選択して
編集用のエリアにそれを貼り付けて
必要に応じて加工します。
今回のタグの場合はこんな感じ
動作確認
CSSの変更を保存したら、
基本的には自分のサイトを
実際に開いて確認してみます。
ここで注意しなければならないのが
ブラウザキャッシュの存在です。
同じページをリロードするだけだと
キャッシュが作用して
変わってなく見えることがあります。
本来はキャッシュクリアをして
都度確認するんでしょうが、
私は開くブログ記事を変えることで
確認していました。
参考にしたサイト様
様々な見出しタグのサンプルが
CSSコード付きで紹介されているので
きっとお好みのデザインが見つかると思います。
今回はそれをコピペして
既存と重複する項目を外して
色を変えるだけで、見出しが完成しました。
カラーコードの参考にしました。
配色が見やすくてありがたかったです。
あとがき
基本的には既存のコードに
ネットから拾ったコードを被せるだけの
簡単なお仕事なのですが、
いかんせん初めての作業とあって
探り探り一つ一つ進めていったので
この程度の作業でも１時間くらい要しました。
特に、動作確認の項目で書いた点に
気づくまで時間が掛かりましたね。
初歩的な内容ですが
参考になれば幸いです。
コメント