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 Wi-Fi(ゲンキ・ワイファイ)」開設の解説!

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

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

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

Genki Wi-FiのFacebookページの「いいね!」が 100人を超えました!

いつもGenki Wi-Fiにアクセスありがとうございます。高田ゲンキ( genki119)です。 突然ですが、当ブログのfacebookページが存在してるのを …

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

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

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

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

no image
イラストレーターにとって効果的なブログを作るために必要な5つのこと

前回のブログに引き続き、ブログ運営をするにあたって実務的な部分で注意する点を書きたいと思います。タイトルは「イラストレーターが…」としましたが、イラストレーター …

2016年を振り返ってみる

こんにちは。高田ゲンキ( genki119)です。 2016年もあと少し。ということで、今年最後の本投稿で、この一年を振り返ってみたいと思います。 sponso …

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

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

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

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

Stinger5のタグクラウドを かっこよくカスタマイズする方法

最近WordPressのカスタマイズにますますハマってる高田ゲンキ( genki119)です。 今日は、“Stinger5のタグクラウドをかっこよくカスタマイズ …

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

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

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