GRADATION公式サイトはこちら>>>

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

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

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

TERASU Products
当社トップページへ

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

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

◆テーマ「Bloosom Travel」とは

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

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

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

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

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

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

ウェブサイト

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

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

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

◆追加CSS設定を行う

TERASU Products

今回のモーションには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です。

そして「更新」を押してみましょう。

ご自身の記事にある、
リンク付きの画像に適用されているはずです。

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

◆総括

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

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

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

その他の記事

無料テーマ BlossomTravelのコピーライトを書き換える方法 Powered By WordPressを消す方法

https://blog.schoolreo.com/bloosomtravel-footer/


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

スポンサーリンク

積極的にシェアお願い!!

スポンサーリンク