稲葉正毅の富の三原則

専業アフィリエイターの稲葉がブログとステップメールでネットに資産を構築する方法を解説。アフィリエイトは種をまけば成長し資産となります。資産構築型のアフィリエイトなら売上を着実にアップできます。

ヘッダー画像をクリックできるようにしてトップページに移動させる方法

稲葉です


この間さくらブログ(Seesaaブログと同様)で
新しいブログを作り、色々とカスタマイズしていたところ、
躓いた点がありました。


それはヘッダー画像をクリックした時に、
トップページに移動させる方法で、
通常cssでヘッダー画像を埋め込むと、クリックができません。



このヘッダー画像をクリックできるようにする方法を
解説します。



画像をクリックできるようにするには、
実はcssをちょっと変更するだけで可能となります。


どうやるかと言うと、
ヘッダーに表示されているタイトル文字の
部分をブロック化してしまいます。


書くと難しいですが、実際やってみると簡単ですので、
ぜひお試しください。


まず、cssの中でこのような場所を探します。

通常ここがタイトル文字をリンクにした時の
動作を定義している部分です。


まずここにヘッダー画像のサイズを定義します。

widthは横幅で、heightは縦の長さです。
画像のサイズを指定してくださいね。


これが終わったら、
最後にもう1行追加して完成です。

display:block; と指定すると、
指定したサイズの領域がブロック化されます。


基本的にはこの3行を追加することで
クリックできるようになります。



あとは、文字を表示させなくしたり
色々とカスタマイズしてみてください。


参考までに稲葉がさくらブログで
カスタマイズしたcssの該当部分を掲載しておきます。


ぜひお試しくださいませ。

コメントエリア

  • Comments ( 1 )
  • Trackbacks ( 0 )
  1. ヘッダー画像の下に余白(クリックできる)ができるだけで、ヘッダーはクリックできないのですが、なぜでしょうか??教えていただけるととても助かります!!!!!

コメントを残す

*

Return Top