賢威のカスタマイズ｜本文の見出しの色の変え方
先日までに賢威６．２のワードプレステンプレートで、
ｈ２やサイドバーの見出しの色の変え方をお伝えしました。
でも、前回までの記事では、本文のｈ３、ｈ４、ｈ５の色の変え方は書いておりません。
そこで今日は本文のｈ３、ｈ４、ｈ５の色の変え方を書いてみたいと思います。
今回の記事で賢威のカスタマイズもある程度出来ると思います。
色を変えるだけでも見た目は変わりますので、
賢威をデフォルトのままで使っている方は、
簡単ですので一度試してみて下さいね。
※今回の方法も賢威６．２のコーポレート版での方法です。
賢威７や他のテンプレートでは、
ＣＳＳの記述や場所が変わっている可能性がありますのでご注意下さい。
まず、賢威のデフォルトの本文の見出しはこんな感じです。
これだとちょっと見た目が寂しいですよね。
そこでこの部分を変えていきたいと思います。
変え方は前回と同じ手順で外観⇒テーマの編集を順に選びます。
するとテーマの編集画面になります。
画面右側にあるファイルの中からdesign.cssをクリックします。
design.cssを開き本文のｈ３、ｈ４、ｈ５のコードを見てみるとこんな感じになっています。
それではこの部分のコードを変えていきます。
まずｈ３は赤で囲ったコードを／＊ ＊／（半角）を使って無効にしていきます。
これは部分的にすぐに元に戻せるようにするためです。
もちろん削除してもかまいません。
青で囲ったコードを追加していきます。
前回のｈ２と同様に左にワンポイントの色を設定し背景の色を設定します。
背景に色を設定したので文字の色は白を指定します。
次にｈ４は赤で囲ったコードを追加します。
ここでは背景を濃いグレーに指定し、文字の色を白にします。
ｈ５は赤で囲った部分を無効にして、青で囲ったコードを追加します。
背景を指定するのですが、これだけだと背景と文字の中心がズレて見えますので、
上に４ｐｘの幅で同じ色の線を指定します。
こうすると背景と文字のセンターが揃って見た目も良いです。
文字の色は白を指定し、ファイルを更新をクリックします。
これでコードの書き換えは終了です。
プレビューで見てみると、
このように本文の見出しを変えることが出来ました。
今回はこのような色にしてみましたが、
色コードを変えることで好きな色に指定することが出来ます。
見出しの使い方は、ｈ３の場合は＜ｈ３＞文字列＜／ｈ３＞で使います。
ｈ４やｈ５は上のｈ３をそれぞれに変えることで使う事ができます。
賢威のテンプレートをデフォルトで使っている方は、
他の方との差別化のためにも是非挑戦してみて下さいね。
そんなに難しくはありませんよ。
賢威のレビューはこちらからどうぞ。
ブログランキングに参加しています。
このブログの気になるランキングは下のバナーをクリックすると確認できますよ。
結構いいところにいます。
宜しければ応援お願いします。
Googleアドセンスで
月に３万円稼げるようになりました。
Googleアドセンスで
月に３万円稼いだ方法は
下のバナーをクリックして読んで下さい。
