BloosomTravelでマウスオン時に画像を凹ませる » グラデーション＠ブログ部

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

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

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

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

◆テーマ「Bloosom Travel」とは

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

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

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

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

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

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

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

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

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

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

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

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

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

この２つを追加CSS欄に追加します。

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

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

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

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

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

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

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

その他の記事

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

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