賢威6.1のh3やh4タグのCSSを変えてデザインをカスタマイズしてみよう！

賢威6.1は、SEOに強く、デザイン的にもすっきりしているので、
すごく気に入っているのですが、一つ、不満なところがありました。

 

それは、hタグのデザインがしょぼいということです。

hタグというのは、見出しのタグです。

元々の設定は、
見出し3(h2)の場合は、こんな感じ

見出し4(h3)の場合は、こんな感じ

シンプルと言えば、シンプルで良いのかもしれませんが、
何か、ちょっと物足りない・・・

しかも、h2もh3、両方とも、四角で囲うパターンなので、
何となくメリハリがないかなと・・・

あとはやっぱり、賢威はたくさんのアフィリエイターの方が、
使っていらっしゃるので、みんな同じようになってしまうのが、
やっぱり嫌だったのです。

 

そこで、h2とh3タグのデザインを変えてみることにしました。

 

hタグの変え方

hタグを変えるには、CSSというデザインをコントロールしている
ファイルを修正しないといけません。

賢威6.1の場合、WordPressの外観→テーマ編集に
入って、design.cssというものを修正することになります。

その中に、h2タグとh3タグのCSSが入っています。

h2タグのCSSは、これ

h3タグのCSSは、これです。

 

 

ちょっと解説しますと、

margin　⇒　外側の余白です。3つ並んでいる場合は、上、左右、下となります。
em ⇒フォントサイズを1とした場合の倍数です。
padding ⇒内側の余白です。
border ⇒枠線です。1pxというのは枠線の幅、solidというのは、実線ということ。
その後、コードは、色を表しています。
font-size⇒文字の大きさです。
font-weight⇒文字の装飾です。boldというのは、太字にするということです。

 

hタグのデザインをどうやって変えるか。

では、次に、hタグのデザインをどうやって変えるかという話になりますが、
例えば、こういうサイトに、hタグのデザインごとのcssが紹介されています。
ちなみに”hタグ css　デザイン”と検索したら、いろいろなサイトが出てきます。
あまりソースコードが複雑になっていないのを利用するのが良いと思います。

 

ちなみに私は今回、このようなCSSを作ってみました。

h2タグのCSS

/*●H3タグ*/
#main-contents h2{
margin: 0 0 1.5em;
padding: 0.8em;
border-top:1px solid #0000000;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-left:8px solid #000000;
font-size: 1.143em;
font-weight: bold;
}

するとこうなります。

 

h3タグのCSS

/*●H4タグ*/
#main-contents h3{
background:#EEEEEE;
margin: 0 0 1.5em;
border-left:5px solid #000000;
border-bottom:1px dotted #000000;
padding:3px 15px 5px;
font-weight: bold;
}

するとこうなります。

 

まあ、少し変えたけという感じではあるのですが、
それなりに、メリハリは、つけられたと思います。

補足で説明すると、

backgroundは、背景の画像
dottedは、点線を表しています。

 

取り敢えず、今回はここまでにしておきます^^
もし、この記事をご覧になる頃、私の、タグの装飾が変わった場合は、
「あっ、また気が変わったんだなあ」と思って下さい。

私も結構、飽きっぽい性格なので^^;

 

アフィリエイトで差別化をしていくために

アフィリエイトというのは、ある程度のところまで行けば、
少しずつ、他の人と変えていきながら、自分の味を出して
差別化をしていく必要があります。

その一つの方法が、オリジナルのデザインを作ることです。

 

HTMLやCSSは覚えておいた方が、絶対有利

HTMLやCSSという話を聞くと、初心者の方は、それだけで、
「もうダメ」と思ってしまうかもしれません。

もちろん、HTMLやCSSの知識がなくても、稼げるようになると
思います。

でも、HTMLやCSSの知識があった方が、選択の幅が広がるので、
より有利な立場に立てることは間違いないです。

是非、少しずつ経験を積み上げていきながら、
稼げるアフィリエイターになっていきましょう！

 

ちなみに、今回は、賢威6.1の弱点を書いてしまいましたが、
それ以外の所では、大満足しています。
不満足なところは変えてしまえば良い訳ですから^^

賢威はやっぱりアフィリエイターに必須のテンプレートだと
思います。

 

SEOに強い戦略的テンプレート「賢威6.1」。レスポンシブWebデザインにも対応！パンダアップデート・ペンギンアップデートで悩むサイトオーナー様必見のSEOマニュアルが付属！