この記事の所要時間: 335

賢威7のマウスオーバーでリンクの設定された画像やテキストを薄いホワイトに変える方法を画像と動画で徹底解説

リンクの設定を工夫して差別化を図る


リンクの設定された画像やテキストリンクの上にマウスを乗せたとき、それがリンクであることを訪問者に一発で理解してもらえるようなアクセントを付けることは、ユーザビリティ(使いやすさや使い勝手)の向上に繋がります。

また、非常にシンプルなカスタマイズではありますが、見た目的にも何も工夫がされていないブログと比べれば大きな差別化を生み出すこともできるのです。

実際に、このブログのリンクを設定している画像やテキストの上にマウスを乗せてもらえば、薄いホワイトに変化しますので、それがリンクであることを知らせる効果があります。

あなたも自分のブログに訪問してくれた読者に対して、少しでも長く滞在してもらうために、ちょっとした工夫をして差別化を意識してみませんか?

もし賢威をまだお持ちでない場合には、私も賢威を特典付きでご紹介しておりますので、是非とも下記のページをご覧ください。

これまで3年間で8回も賢威を大幅にリニューアルしたり、賢威のカスタマイズに関して、200名以上の方をサポートをしてきた実績から、賢威のサポートなら誰にも負けない自信があります。


あなたも賢威のカスタマイズを本気で極めてみませんか?


それでは賢威7のマウスオーバーで画像を薄いホワイトに変える方法について詳しく解説していきます。

マウスオーバーで画像を薄いホワイトに変える


マウスオーバーで画像を薄いホワイトに変えるには、ソースコードを直接編集する必要がありますので、ダッシュボードの左メニュー一覧から【外観】にマウスを合わせて【テーマの編集】をクリックします。

※クリックで画像が拡大します。
賢威7のマウスオーバーで画像を薄いホワイトに変える方法を画像と動画で徹底解説

次に、右側のソースコードメニュー一覧の中にある【base.css】をクリックして、ソースコードの編集画面を開いてください。

※クリックで画像が拡大します。
賢威7のヘッダー上下の余白を調整する方法 を画像と動画で徹底解説

【base.css】の編集ページを開いたら、そのソースコードの一番下までカーソルを持っていき、下記のソースコードを新たに付け加えます。

a:hover img {
     opacity: 0.7;
     filter: alpha(opacity=80);
}

ソースコードの追加が完了したら【ファイルを更新する】をクリックして、ブログに設置してあるリンクの上にマウスを乗せてみましょう。

マウスを乗せたときに色が変われば無事にカスタマイズは完了です。

なお、マウスを乗せたときの色の濃さを調整したいときは、上記のソースコード内にある【0.7】という数値を変更して調整することができます。

この場合、数値が【0】に近くなればなるほど、マウスを乗せたときの色は濃くなっていきますので
、お好みで調整してください。

リンクを変化させる方法を動画で解説


それでは賢威7のマウスオーバーでリンクの設定された画像やテキストを薄いホワイトに変える方法を動画で詳しく説明していきます。

賢威7のマウスオーバーで画像を薄いホワイトに変える方法


リンク画像やテキストを変化させる方法まとめ


今回はマウスオーバー時にリンクの設置された画像やテキストを変化させる方法をご紹介しましたが、シンプルでも有効的なカスタマイズは意外と多くあります。

カスタマイズというと目立つところばかりに注目しがちですが、実際にはこうしたシンプルなカスタマイズほど訪問者に喜ばれますし、結果として滞在時間を延ばしていくのです。

これから賢威7をカスタマイズするときの参考として、こうしたカスタマイズを意識してみてはいかがでしょうか?

他にも賢威7のカスタマイズ方法を動画と画像で徹底的に解説していますので是非ともご覧いただき、あなたの賢威7カスタマイズにお役立てください。


賢威7のカスタマイズ方法を画像と動画で徹底解説


本日も最後までお読みいただきありがとうございました!

【完全無料】話題沸騰の史上最強の初心者向け企画!
アフィリエイト初心者のための覚醒メールセミナーNEO

分からないことは今すぐに解決してください!
ネットビジネスで分からないことをナオトに質問する

よく読まれている関連記事をご紹介します!