借金相談

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

↓読んだ証拠に応援のクリックをして頂けるとうれしいです!

アフィリエイト ブログランキングへ

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

 

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

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

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

2013-12-21_232308

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

2013-12-21_232321

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

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

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

 

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

 

hタグの変え方

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

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

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

h3タグのCSSは、これ

2013-12-21_232618

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

 

2013-12-21_232635

 

ちょっと解説しますと、

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

 

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

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

 

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

h3タグのCSS

/*●H3タグ*/
#main-contents h3{
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;
}

するとこうなります。

2013-12-21_233252

 

h4タグのCSS

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

するとこうなります。

2013-12-21_233305

 

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

補足で説明すると、

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

 

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

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

 

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

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

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

 

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

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

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

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

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

 

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

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

 


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

keni-mini2


↓読んだ証拠に応援のクリックをして頂けるとうれしいです!

アフィリエイト ブログランキングへ

あわせて読みたい関連記事

6 Responses to “賢威6.1のh3やh4タグのCSSを変えてデザインをカスタマイズしてみよう!”

  1.  どうもこんばんは

     アフィリエイト就職支援人@そね ゆうやです。

     hタグって見出しになりますから

     その部分のデザインもできることなら

     拘りたいですよね。

     htmlやCSSをいじることは、最初は

     難しそうに感じていましたけど、

     今では基本的な部分は

     分かるようになっていますね。

     自分好みのサイトを作りたいときは

     こういう知識も大事ですね。

     応援しております。

    • けんぞう@海外在住でアフィリエイト けんぞう@海外在住でアフィリエイト より:

      そねゆうやさん

      コメントありがとうございます。

      最初htmlが分かってくると大分楽になりますし、
      CSSが分かってくるともっと世界が広がってきますよね。

      これからもオリジナリティの強いサイトを作れるよう
      お互いにがんばりましょう!

  2. いそけん より:

    けんぞうさん、お世話になっています。いそけんです。

    HTMLの件については、私も今回痛感しています。
    知らないよりは知っていたほうが断然たしかにいいですよね。

    今回の賢威の設定もそれがあれば全然簡単に設定も出来そうですね・・・

    同感です。応援して帰りますね!

    • けんぞう@海外在住でアフィリエイト けんぞう@海外在住でアフィリエイト より:

      いそけんさん

      コメントありがとうございます。

      ライティングスキルもデザインスキルもHTMLに対する知識も
      なくても大丈夫なところは、もちろんありますが、
      知らないより知っておいた方が断然得というところがありますよね。

      HTMLも難しいところがあるかもしれませんが、
      見よう見まねでやっていく内に段々分かってくるようになってきますので。

      これからもよろしくお願いいたします!

  3. やはぎ より:

    けんぞうさん

    こんにちは、やはぎです。

    htmlやcssはいじれた方がいいですね^^
    僕はまだCSSはド素人なので、これから勉強していきますww

    こいつに慣れて、もっとレベルアップしていきます!!
    応援しています。今後ともよろしくお願いします。

    • けんぞう@海外在住でアフィリエイト けんぞう@海外在住でアフィリエイト より:

      やはぎさん

      コメントありがとうございます。
      CSSは簡単なものもで出来るようになってくると
      HTMLも含めて、全体的に大分抵抗感がなくなりますよ!

      これからもどうぞよろしくお願いいたします。

コメントを残す

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

サブコンテンツ

管理人

けんぞう


海外在住アフィリエイター:
けんぞう


先が見えないサラリーマン生活に限界を感じ、自由を夢見て、一発奮起し、2012年に40代で韓国へ移住

そこで待っていたカビまみれの半地下生活の中で、アフィリエイトに可能性を見出し、人生の大逆転を掛けて、グーグルアドセンスとブログ・メルマガアフィリエイトを実践中

夢は、パソコン一台で収入を得られる仕組みを作り、家族と一緒に世界を自由に旅していくこと
⇒詳細はこちら

応援コーナー

よろしければ応援のクリックをして頂けるとうれしいです!

アフィリエイト ブログランキングへ

このページの先頭へ

Get Adobe Flash player