こんにちは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
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を消す方法 |
Youtubeチャンネルもございますのでこちらからどうぞ!
チャンネル登録もよろしくお願いします↓↓↓