Genki Wi-Fi

フリーランス イラストレーター高田ゲンキの情報発信ブログ、『Genki Wi-Fi(ゲンキ・ワイファイ)』。

*

Stinger5のヘッダー画像にリンクを追加し、
マウスオーバー時の透過処理を無効にする方法

LINEで送る
Pocket

前回はヘッダーのテキストを隠す方法を説明しましたが、今回はそれに引き続き、“ヘッダー画像にリンクを追加し、マウスオーバー時の透過処理を無くす方法”を説明したいと思います。

やはり、人はヘッダーをクリックしてTopページに戻りたい

外観上は前回のカスタマイズで完璧になったんですけど、1日使ってみて感じたのは「ヘッダーをクリックしてTopページに戻れないと、モヤッとする」ということ。ほとんどのWebサイトが上部のヘッダーか左上のロゴをクリックしてTopページに戻る機能を備えているので、その習慣で無意識にクリックするのですが、Stinger5の場合、デフォルトの仕様ではヘッダー画像にTopページへのリンクは貼られていないので、“空クリック”になってしまい、やるせなさを感じることが何度かありました。さすがに、そんな理由でページから離脱する人はほぼいないと思いますが、やっぱりせっかくブログにアクセスしてもらったからにはユーザビリティが良い方が好ましいので、この点を改善することにしました。

① まずはヘッダー画像にTopページのリンクを設定

header.phpをの「 <!–カスタムヘッダー画像–>」という部分(オリジナルだと95行目以降あたり)をいじります。

↓オリジナルはこうなってるので…

「<a href=”<?php echo home_url(); ?>/”></a>」を追加して↓このようにします。

これだけでヘッダー画像にTopページへのリンクが追加されます。

sponsored link

しかし、問題発生

しかし、ここで問題が発生してしまいました。

Stinger5は、もともとリンクが設定されている画像にポインタを合わせると20%だけ透過する仕様(opacity:80%;)になっているので、このままだと前回の記事で画像の下に隠したテキストがマウスオーバーした時だけ透けてうっすら見えてしまうのです。

stinger5-header-opacity

ブログタイトルのテキストが透けてる状態

② ヘッダーの画像だけ透過処理を無効にする

これはいくらなんでもダサい!ということで、ハジメさんに相談してヘッダーの画像だけ透過処理を無効にする方法を教えてもらいました。

手を加えるのはstyle.cssです。

オリジナルだと44行目くらい(たぶん…)に「/* 画像リンクのマウスオーバーに透かし */」という注釈があると思いますが、その下の

の下に透過処理無効化の記述を追加して、

に変更します。

これで、ヘッダー画像のみ透過処理が無効になり、テキストが透けなくなりました。

まとめ

これで一連のヘッダーカスタマイズは終了です。

僕としては、ブログのヘッダーはなるべく縦サイズを小さくして、ページを開いてから記事が始まるまでの物理的距離を短くしたいと思っていたので(そういう意味もあって、ヘッダーのイラストのサイズをStinger5のデフォルトの縦サイズより小さくしています)、今回のカスタマイズは地味だけど非常に意味があるものでした。

Stinger5は気に入ってるけどヘッダーのテキストは無くても良いかも…と思ってる人は意外と多いと思うので、是非参考にしてほしいと思います。

sponsored link


LINEで送る
Pocket


 - ブログ, WordPress    - ,




Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事

“genki-wifi.net”、スタート。

新しいドメインを取りました。今後はこちらで更新していきますので、ブックマーク等もこちらに変更をお願いします。 主な理由としては、使用しているエックスサーバーとサ …

Genki Wi-Fiの「feedly」読者数が100人を超えました!

いつもGenki Wi-Fiにアクセスありがとうございます。高田ゲンキ( genki119)です。 昨日の記事では当ブログのFacebookページが100人を超 …

ベルリンを題材にしたブログの最高峰、 中村真人さんの『ベルリン中央駅』がリニューアル!

『素顔のベルリン』『ベルリンガイドブック』の著者、中村真人さんのブログ、『ベルリン中央駅』が、2015年8月1日で10周年を迎え、ドメインも新たにリニューアルし …

facebookページを作りました!

当ブログ「Genki Wi-Fi」のfacebookページを作りました。 https://www.facebook.com/genkiwifi ブログの更新情報 …

大阪府堺市の「モバイルモール」に、
当ブログのイラスト(大阪Ver.)が!

Contents1 ※追記(2015年6月28日)2 いきさつ3 イラストを大阪バージョンにアレンジ!4 オープン後、写真も送っていただきました ※追記(201 …

no image
【月間アクセスランキング】 2015年8月にアクセスが多かった記事 トップ5

先月(2015年8月)は、久しぶりに仕事が落ち着いていたこともあって、ほぼ毎日ブログを更新することができました。「毎日更新するぞ!」と頑張ったワケではなく、7月 …

no image
Stinger5のヘッダーの文字を隠して画像だけにする方法

こんにちは。兼業イラストレーターの高田ゲンキ( genki119)です。 冗談ではなく、最近本当に良い意味で復業化してきて、日々がより充実しています。依然として …

no image
2015年の振り返りと2016年の展望について

明けましておめでとうございます。高田ゲンキ( genki119)です。 暮れから一時帰国中で神奈川県にいます。年末年始とばたばたしていたらいつの間にか新年も4日 …

Xサーバー利用者がMarsEditで「HTTP Username」アラートが出て困った場合の対処法

ひさしぶりにブログを更新するためにMarseditを開いたところ、↓こんなアラートが出て先に進めなくなりました。 This blog is protected …

新ブログ「Genki Wi-Fi(ゲンキ・ワイファイ)」開設の解説!

新しいブログ、「Genki Wi-Fi」を作りました。今までのウェブサイトやウェブサイト内の既存のブログと並行して運営していこうと思っています。 位置づけとして …

Stinger5のヘッダー画像にリンクを追加し、 マウスオーバー時の透過処理を無効にする方法 |

フリーランス イラストレーター高田ゲンキの情報発信ブログ、『Genki Wi-Fi(ゲンキ・ワイファイ)』。

Copyright© Genki Wi-Fi , 2015 All Rights Reserved.