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

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

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

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

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

◆テーマ「Bloosom Travel」とは

「Bloosom travel」は大きなヘッダー画像が
特徴の一つであり、無料テーマながらも
一見コーポレートサイトのような外観が
非常にオシャレです。

ブログにもホームページにも使いやすく、
慣れれば使い勝手の良いテーマになります。

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

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

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

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

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

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

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

◆追加CSS設定を行う

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

  早速、モーションをつける設定を行っていきましょう。

ダッシュボードの
「外観」→「カスタマイズ」へ進みます。  

左のメニューの中の、
「追加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チャンネルもございますのでこちらからどうぞ！
チャンネル登録もよろしくお願いします↓↓↓

スポンサーリンク