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

今回はWordPressテーマの
「Bloosom Travel」
カーソルオン時にリンク付き画像を動かす方法
について紹介していきます。

こんな感じ👇👇👇

リンク画像を躍動的にすることにより
クリック率が高くなりますので ぜひ参考にしてみてください。

まず初めにテーマ「BloosomTravel」 について紹介していきます。

◆テーマ「Bloosom Travel」とは

TERASU Products

「Bloosom travel」は大きなヘッダー画像が 特徴の一つであり、無料テーマながらも
一見コーポレートサイトのような外観が 非常にオシャレです。
ブログにもホームページにも使いやすく、
慣れれば使い勝手の良いテーマになります。

当ホームページ&ブログも 「Bloosom Travel(無料版)」にて制作しています。

https://blossomthemes.com/theme-demo/?theme=blossom-travel/

※先に断っておきますが筆者はプログラマーではない上、
完全独学で編み出した手法になりますので
至らないところがありますがその辺はご容赦ください。

 

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

TERASU Products

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

 

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

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

 

◆追加CSS設定を行う

 

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

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

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

 

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

TERASU Products  

 

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

・カーソルオンでポチっと沈む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;}

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

 

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

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

◆総括

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

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

その他の記事 TERASU Products

 

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

おすすめ: