賢威のカスタマイズ|h2要素の色を変える方法
今日は賢威6.2のワードプレス用テンプレートの、
h2の色を変える方法を書いてみたいと思います。
今回カスタマイズするテンプレートは、
賢威6.2コーポレート版ですので、
他のテンプレートではCSSの記述や位置が違う場合がありますので、
ご注意下さい。
まず賢威6.2のワードプレス用テンプレートを表示させると、
こんな感じになっています。
H2要素がグレーの背景で文字は深いグレー、そして上の線は黒色になっています。
これではなんとなく暗いイメージがします。
私の賢威のフッターの色はダークグリーンに設定しています。
そこで私のブログのフッターの色と同じ、
ダークグリーンに変えてみたいと思います。
まずはダッシュボードをクリックします。
左のメニューから外観⇒テーマの編集を順に選んでいきます。
するとテーマの編集画面になります。
右のメニューの下の方にあるdesign.cssをクリックします。
design.cssは賢威のデザインに関する設定が書いてあるCSSです。
design.cssの編集画面になりますので、
今回変更するh2要素の部分を探します。
上の画像がh2の設定です。
青で囲ってあるのがh2要素の上にある黒い線の部分です。
赤で囲ってあるのがh2要素の背景の色です。
これを書きかえていきます。
この前の記事でも書きましたが、
コードを消してしまうと部分的に戻すのが面倒になりますので、
前回同様/* */(半角)で無効にしていきます。
コードを残すと重くなるという方がいますが、
これくらいではさほど問題になりませんので、
部分的に戻す事を考えるとこの無効にする方法が良いと思います。
もちろんコードを消しても構いません。
ここでは無効にする方法でやっていきたいと思います。
今までのコードを/* */(半角)で無効にして、
赤で囲ったコードを追加していきます。
一番上はh2要素の黒だった部分を、
ワンポイントの深めの赤に変えています。
次はh2要素の背景をフッターと同じダークグリーンに変え、
先ほどと同じワンポイントを左の線に適用しています。
そして次はh2要素の文字の色を変えていきます。
デフォルトのグレーの濃い文字の色では、
背景がダークグリーンの場合見づらくなりますので、
文字の色は白に設定します。
最後はファイルを更新をクリックします。
するとこのようにh2の背景をダークグリーンに。
そして文字の色を白、ワンポイントのアクセントに深い赤を設定することができました。
でも、このままでは記事の続きを読むをクリックすると、
このようにグレーになっています。
これはこの部分のh2が全体設定の影響を受けているからです。
賢威6.2コーポレート版は文字の色などの全体設定がグレーになっています。
記事の文字がグレーではぼけた感じになりますので、
ついでにこの部分も変えたいと思います。
先ほどの要領でダッシュボード⇒外観⇒テーマの編集⇒design.cssの順に選んでいきます。
この赤で囲った部分が全体をグレーにしている設定です。
記事の文字の色は黒がいいので黒に変更します。
先ほどの要領で無効にして、
赤で囲ったコードを追加します。
追加が終わったらファイルを更新をクリックします。
表示させてみるとこうなっています。
文字の色が黒に変わりました。
記事の本文は見やすくなりましたが、
h2の文字が黒では背景がダークグリーンなのでやはり見づらいですね。
それに他のページのh2の文字の色とも変わってしまいます。
そこでこのh2の文字の色を変えていきます。
このページのh2はクラス設定でPOSTというクラスに設定されています。
そしてこのPOSTに対する文字の色の指定がないので、
全体設定が適用されるのです。
そこでPOSTのh2の文字の色を指定していきます。
先ほどと同じ要領で、
ダッシュボード⇒外観⇒テーマの編集⇒design.cssの順に選んでいきます。
そしてdesign.cssの編集画面の最後に赤で囲ったコードを追加します。
追加が終わったらファイルを更新をクリックします。
画面を表示させてみると、このように設定することが出来ました。
これで全てのh2要素の背景をダークグリーンに、
そして文字の色を白色に、
ワンポイントに深い赤を設定することができました。
でも、これではサイドバーにある見出しと整合性が取れません。
そこで次回はサイドバーの見出しを同じように設定する方法を書いてみたいと思います。
私も使っている賢威の販売ページはこちらからどうぞ。
このブログの気になるランキングは下のバナーをクリックすると確認できますよ。
結構いいところにいます。
宜しければ応援お願いします。
Googleアドセンスで
月に3万円稼げるようになりました。
Googleアドセンスで
月に3万円稼いだ方法は
下のバナーをクリックして読んで下さい。