賢威のカスタマイズ|サイドバの見出しの色を変える方法
今日は先日の賢威のワードプレス用テンプレートの、
カスタマイズの続きです。
先日はここまでカスタマイズしました。
メインカラムのh2要素の背景の色と、
文字の色を変えてみました。
背景の色はこのブログのフッターで使っている、
ダークグリーンに変更しました。
こうすることでブログにオリジナル感が出たと思います。
でも、このままではサイドバーの見出しが白のままなので、
ブログ全体の統一感がありません。
そこで、今日はサイドバーの見出しの背景色、
文字の色の変え方をお伝えしたいと思います。
これを変更すれば、フッターの色と、
メインカラムの見出しの色、サイドバーの見出しの色と、
ブログに統一感が出るばかりではなく、
同じ賢威のテンプレートを使っている方と、
差別化することができます。
実はサイトを訪問する方というのは、
色んなサイトを見てきています。
そんな方が同じテンプレートを使ったサイトを訪れた時に感じることは、
また同じかよということです。
こう思われてしまうとサイトの記事を読んでもらえなくなります。
この記事を読んでいる方は、たかが色だろうと思っているかもしれません。
でも、色を変えるだけでもサイトのイメージは変わります。
アフィリエイトサイトで必要な事は、
まずは記事を読んでもらう事です。
そのためには、また同じかよと思われないように、
差別化することが必要なのです。
その差別化を簡単に出来るのが、この色を変えるという事です。
もし、あなたが賢威のテンプレートを、
デフォルトのままで使っているのであれば、
この記事を読んで差別化にチャレンジしてみて下さいね。
それでは前置きが長くなりましたが、
サイドバーの見出しの変え方です。
先日メインカラムはカスタマイズしていますので、
今はこんな感じになっています。
これでは全体の統一感がありませんよね。
そこでサイドバーの見出しを変更していきたいと思います。
サイドバーのCSSは前回書いたh2要素と同じ場所にありますので、
前回と同じ手順でCSSファイルを編集していきます。
まずはダッシュボード⇒外観⇒テーマの編集⇒design.cssの順に選んで行きます。
するとdesign.cssの編集画面になります。
ここでサイドバーの見出しのコードを探します。
この部分は賢威6.2コーポレート版では中ほどにあります。
赤で囲った部分を変えていきます。
ここのコードはサイドバーの見出しの文字の色、
枠の色、枠の上の線が指定されています。
前回同様コードを消さずに/* */(半角)を使って無効にしていきます。
まず初期設定のコードを無効にします。
そして赤で囲ったコードを追加していきます。
追加したコードを上から見ていくと、
まず見出しの枠線をなくし左の線のみに、
ワンポイントの深い赤を指定します。
次に枠線の上にあった線と文字の色を無効にして、
文字の色だけを白色に設定します。
これだけだと背景も白、文字の色も白なので、
左のワンポイントの深い赤しか見えません。
そこで最後のコードを追加して、
見出しの背景を他と同じダークグリーンに設定します。
コードの追加が終わったらファイルを更新をクリックします。
するとこのようにサイドバーの見出しを変えることができました。
これでフッターやメインカラムの見出し、サイドバーの見出しが同じ色になり、
ブログに統一感が出ました。
それに賢威のテンプレートを初期設定のまま使っている方との差別化にもなります。
これだけの簡単な設定なので、まだやっていない方は、
是非挑戦してみて下さいね。
私も使っている賢威の販売ページはこちらからどうぞ。
このブログの気になるランキングは下のバナーをクリックすると確認できますよ。
結構いいところにいます。
宜しければ応援お願いします。
Googleアドセンスで
月に3万円稼げるようになりました。
Googleアドセンスで
月に3万円稼いだ方法は
下のバナーをクリックして読んで下さい。