賢威7を使っている方は、

リンク画像やリンク文字にポインタを持っていったときに、

何もアクションがないので、

すこし物足りなさを感じてはいないでしょうか

 

やっぱり、何らかのアクションがあった方が、

読者さんの目に止まりやすくなりますし、

その結果サイト内に長く滞在してくれることにもつながりますよね。

 

そこで今回は、

賢威7でポインタの選択時に、

リンク画像や文字を白く凹ませる方法について

パソコン初心者の方でもわかりやすく、

簡単にご紹介していきたいと思います。

 

賢威7のこのカスタマイズですが、

何されていないブログと比べれば、

簡単ながらも手の込んだサイトと感じますので、

是非、参考にしてみてください。

 

ちなみに、リンク画像やリンク文字に、

ポインタをあてることをマウスオーバーと言います。

 

賢威7でポインタの選択時に白く凹ませる実例!b

まず始めに、

『リンク画像やリンク文字を白く凹ませるってどういうもの?』

と思うあなたに実例をあげてご紹介したいと思います。

 

下記の画像の上にマウスを乗せてもらえば、

白に変化し凹みます。↓

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-18-19-22-19

 

 

 

賢威7でポインタの選択時に白く凹ませる方法!

賢威7でポインタの選択時に、

リンク画像やリンク文字を白く凹ませるには、

ソースコードを直接入力する必要があります。

 

難しいそうに聞こえますが、

入力するだけですので意外と簡単です。

 

手順1

ではまず始めに、

ブログの管理画面に入り、

左メニューから『外観』を選択し

テーマの編集』をクリックしましょう。

 

 

手順2

次は、右メニューから『base.css』を選択しましょう。

 

どちらかというとbase.cssは下の方にあります。

 

 

手順3

『base.css』を選択すると、

上記のようなソースコードが表示されますので、

最下部までスクロールしてください。

 

 

手順4

最下部に移動しましたら、

画像の赤枠に位置に

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

/*マウスオーバー時にリンクを凹ませる*/
a:hover{ position:relative;top:3px ;left:3px; }

のコードをそのまま挿入してください。

 

 

手順5

上記の画像は挿入後になります。

 

コードを挿入した後は、

『ファイルを更新』を忘れずにクリックしてください。

 

また凹む動きの幅は『px』の数値で調整することができます。

もっと大きく動かしたいのであれば『10px』にするなど。

 

白色の濃さは『opasity』の数値で調整することができます。

もっと濃くしたい場合は『0』に近くすることでできますので、

お好みで調整してください。

 

 

 

ポインタの選択時に白く凹まない場合は?

上記の方法でリンク画像やリンク文字がうごかない時は、

まず『キャッシュの削除』を試してみてください。

 

私も初めての時は、

このキャッシュが原因で動いてくれませんでした。

 

それでも動かない方は、

リンク画像やリンク文字を挿入する際に、

画像の配置を『なし以外』(右寄せ、左寄せ、中央など)

に設定しておりませんでしょうか?

 

この場合も動かない原因になりますので、

なし』に設定しておいてくださいね。

 

いかがだったでしょうか?

 

賢威7では様々なカスタマイズができますが、

初期設定は意外とスカスカですよね。

 

簡単にカスタマイズできる方法も、

いっぱいありますので、

是非、自分の好みのサイトに仕上げていってくださいね。

 

今回のように賢威7などのカスタマイズに関することだったり、

ブログで稼ぐノウハウを今だけ無料でメルマガ講座にて公開しています。

 

更に全22冊、約430ページの『教科書』もプレゼントしていますので、

是非、メルマガ講座にご登録いただきダウンロードして下さいね。

 

NAOメルマガ講座のお申し込みは下記になります↓↓