ホームページ制作

WordPressテーマ 「Bloosom Travel」マウスオン時に画像を凹ませる方法

更新日:

こんにちはUSUと申します。

Contents
  1. ◆リンク画像にモーションをつけるメリット
  2.  
  3. ◆追加CSS設定を行う

◆リンク画像にモーションをつけるメリット

TERASU Products
  • リンクとして認知されやすくなる。
  • ポチっと動くモーションにより、 クリックしてみたくなる。
  • サイトに立体感、躍動感が生まれ、 のっぺりした印象がなくなる。

些細なことですが、
モーションをつけることで 訪問者から見てもらえる確率が高くなります。

テーマによっては画像などにリンクを挿入すると自動で
画像が光ったりする機能がありますが、
残念ながらBloosomTravelには そのような機能が無いようです。

 

◆追加CSS設定を行う

今回のモーションには2つのCSSコードが 含まれています。  

  1. カーソルオンでポチっと沈む
  2. カーソルオンで画像が光る

  早速、モーションをつける設定を行っていきましょう。 ダッシュボードの 「外観」→「カスタマイズ」へ進みます。  

左のメニューの中の、 「追加CSS」を選択します。

するとCSSを追加する欄が現れますので、 そこに下記のCSSコードを入力します。    

・カーソルオンでポチっと沈むCSS

a:hover img{opacity:0.5;
filter:alpha(opacity=50);
-ms-filter: “alpha( opacity=50 )”;
}

・カーソルオンで画像が光るCSS

a:hover{position:relative;top:3px ;left:3px;}

この２つを追加CSS欄に追加します。
場合によってはCSSクラス名を 記載する必要がありますが、
全般に適用する場合はこれでOKです。

そして「更新」を押してみましょう。 ご自身の記事にある、
リンク付きの画像に適用されているはずです。

ポチっと凹むモーションはいらないけど
光るモーションだけ適用したい という場合は、
片方だけももちろん使えますので
 お好みに合わせて使ってください♪

◆総括

いかがでしたでしょうか？ 一見地味なところではありますが、
「押してみたくなる心理」を利用することで、
あなたの商品やコンテンツを さらにより多くの人たちに見てもらえる
ようになることでしょう。

簡単にできますので是非トライしてみてください。

Youtubeチャンネルもございますのでこちらからどうぞ！
チャンネル登録もよろしくお願いします↓↓↓

おすすめ: