前回はヘッダーのテキストを隠す方法を説明しましたが、今回はそれに引き続き、“ヘッダー画像にリンクを追加し、マウスオーバー時の透過処理を無くす方法”を説明したいと思います。
やはり、人はヘッダーをクリックしてTopページに戻りたい
外観上は前回のカスタマイズで完璧になったんですけど、1日使ってみて感じたのは「ヘッダーをクリックしてTopページに戻れないと、モヤッとする」ということ。ほとんどのWebサイトが上部のヘッダーか左上のロゴをクリックしてTopページに戻る機能を備えているので、その習慣で無意識にクリックするのですが、Stinger5の場合、デフォルトの仕様ではヘッダー画像にTopページへのリンクは貼られていないので、“空クリック”になってしまい、やるせなさを感じることが何度かありました。さすがに、そんな理由でページから離脱する人はほぼいないと思いますが、やっぱりせっかくブログにアクセスしてもらったからにはユーザビリティが良い方が好ましいので、この点を改善することにしました。
① まずはヘッダー画像にTopページのリンクを設定
header.phpをの「 <!–カスタムヘッダー画像–>」という部分（オリジナルだと95行目以降あたり）をいじります。
⬇オリジナルはこうなってるので…
<!--
カスタムヘッダー画像
-->
<div id="gazou">
<?php if(get_header_image()): ?>
<p id="headimg"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p>
<?php endif; ?>
</div>
<!-- /gazou -->
「<a href=”<?php echo home_url(); ?>/”></a>」を追加して⬇このようにします。
<!--
カスタムヘッダー画像
-->
<div id="gazou">
<?php if(get_header_image()): ?>
<p id="headimg"><a href="<?php echo home_url(); ?>/"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></a></p>
<?php endif; ?>
</div>
<!-- /gazou -->
これだけでヘッダー画像にTopページへのリンクが追加されます。
しかし、問題発生
しかし、ここで問題が発生してしまいました。
Stinger5は、もともとリンクが設定されている画像にポインタを合わせると20%だけ透過する仕様（opacity:80%;）になっているので、このままだと前回の記事で画像の下に隠したテキストがマウスオーバーした時だけ透けてうっすら見えてしまうのです。
ブログタイトルのテキストが透けてる状態
② ヘッダーの画像だけ透過処理を無効にする
これはいくらなんでもダサい！ということで、ハジメさんに相談してヘッダーの画像だけ透過処理を無効にする方法を教えてもらいました。
手を加えるのはstyle.cssです。
オリジナルだと44行目くらい（たぶん…）に「/* 画像リンクのマウスオーバーに透かし */」という注釈があると思いますが、その下の
/* 画像リンクのマウスオーバーに透かし */
a:hover img {
-moz-opacity: 0.8;
opacity: 0.8;
}
の下に透過処理無効化の記述を追加して、
/* 画像リンクのマウスオーバーに透かし */
a:hover img {
-moz-opacity: 0.8;
opacity: 0.8;
}
#headimg a:hover img {
-moz-opacity: 1;
opacity: 1;
}
に変更します。
これで、ヘッダー画像のみ透過処理が無効になり、テキストが透けなくなりました。
まとめ
これで一連のヘッダーカスタマイズは終了です。
僕としては、ブログのヘッダーはなるべく縦サイズを小さくして、ページを開いてから記事が始まるまでの物理的距離を短くしたいと思っていたので（そういう意味もあって、ヘッダーのイラストのサイズをStinger5のデフォルトの縦サイズより小さくしています）、今回のカスタマイズは地味だけど非常に意味があるものでした。
Stinger5は気に入ってるけどヘッダーのテキストは無くても良いかも…と思ってる人は意外と多いと思うので、是非参考にしてほしいと思います。
コメント