WEB・DTP・ブログ

画像リンクにCSSでJINっぽいアニメーションエフェクトを加える

画像リンクにCSSでJINっぽいアニメーションエフェクトを加える

こんにちは、スズケーです。

12月22日に私がこのブログのテーマで使っている「JIN」というWordPressテーマのVer1.82へのアップデートがありました。

そこで、地味に便利なシンタックスハイライター機能が追加されまして!

単純な私は、喜び勇んで早速、過去の記事「JINでも使いたい!光るボタンを作ってみた」に使ってみました。

JINでも使いたい!光るボタン
JINでも使いたい!光るボタンを作ってみたwordpressの有料テーマ「JIN」でもaffinger5にあるような光るボタンを使いたくて作成しました。そのCSS、HTMLコードを公開しています。ご自由にお使いいただけます。...
SyntaxHighlighterシンタックスハイライターの使用前・使用後
スズケー
スズケー
何これめっちゃ見やすい…

私は新しいもの好きなので、もっとシンタックスハイライター使いたい…!ということで、
なんぞソースコードを書くような記事はないかと考え、
先日少しだけカスタマイズした、画像リンクのカスタマイズをご紹介することにしましたっ。

カスタマイズは自己責任で行ってください。事前にバックアップをとっておくことをおススメします。
コードを記入してもうまく反映されない場合があります。このカスタマイズは、あくまでもスズケーのブログで行ったものです。

 

JINっぽいアニメーション付き画像リンク

WordPressテーマ「JIN」の魅力の一つに、洗練された嫌味のないCSSアニメーションエフェクトがあると思っています。

写真とかボタンとかが、ふわっと動いたり浮かび上がってくるのがかわいい。

が、サイドバーや投稿記事本文に画像を貼ってそこにリンクを設定した場合、その画像の上にポインターを持っていっても、ポインターの形が変わるだけで
画像が半調になったりも一切しないので、その画像からリンクがあると言うのに、ちょっと気がつきにくいんですよね。

そこで、画像リンクにもJINらしいアニメーションを装着してみました。

軽くした画像かなり粗くなっちゃったけど…こんな感じ。

JINっぽいアニメーション付きの画像リンクJINっぽいアニメーション付きの画像リンク

トップページのカード型記事一覧のようなふわっと浮かび上がらせるタイプにするか、
ピックアップコンテンツのようにじわっと大きくするタイプにするかで迷いましたが、
浮かび上がらせるタイプだと画像に陰をつけるのが必須。

例えば記事内やサイドバーに画像リンクを設置する時、
サイドバーの画像には陰がついてない方がスッキリして違和感ないかなぁ…と思ったので、
今回は、陰なしで画像のみをじわっと大きくするタイプにしてみました。

実際の出来上がりがこれ。

うん、なかなかいいのではないでしょうか。

ではさっそく、シンタックスハイライターを使ってCSSの紹介を!

じわっと大きくなる画像リンクのCSS

下記のコードを子テーマのCSS、もしくは追加CSSに追記してください。

/* ================================
 * 画像リンクアニメ *
================================ */
img{
transition: 0.5s;
} 
a:hover img{
opacity:0.6;
-ms-filter: "alpha( opacity=60 )";
	-moz-transform: scale(1.02,1.02);
  -webkit-transform: scale(1.02,1.02);
  -o-transform: scale(1.02,1.02);
  -ms-transform: scale(1.02,1.02);
}

transitionがアニメーションの時間、
opacityと-ms-filterが画像の半調のかけ方、
transform各種が画像が縦横にどれだけ大きくなるかの数値です。

できるだけトップページのピックアップコンテンツに近いイメージになるようにしました。

これでサイト内の全ての画像リンクが、マウスオーバーした際にじわっと大きくなって半調がかかるようになりました!

スズケー
スズケー
JINぽくてかわいい…満足です。

特定の画像リンクのみにこのエフェクトをかけたい場合

全ての画像リンクに対してではなく、
特定の画像リンクのみにこのアニメーションエフェクトを適用することもできます。

この場合は以下のように設定を。

特定の画像リンクのみにエフェクトをかける場合のCSS

子テーマのCSS、もしくは追加CSSにコードを追加する際に、
「img」のあとにclass名を設定。
ここではとりあえず「.onmouseanime」にします。

/* ================================
 * 画像リンクアニメ *
================================ */
img.onmouseanime{
transition: 0.5s;
} 
a:hover img.onmouseanime{
opacity:0.6;
-ms-filter: "alpha( opacity=60 )";
	-moz-transform: scale(1.02,1.02);
  -webkit-transform: scale(1.02,1.02);
  -o-transform: scale(1.02,1.02);
  -ms-transform: scale(1.02,1.02);
}

つぎに、投稿用のエディター画面でアニメーションエフェクトを適用したい画像にリンクを設定し、
画像詳細画面の「画像CSSクラス」に先ほどのクラス名「onmouseanime」を追加します。

ここでは「.onmouseanime」ではなく「onmouseanime」と記載します。
.(ドット)はいりません。
画面をクリックして「画像詳細」画面を開く画面をクリックして「画像詳細」画面を開く
「画像CSSクラス」を設定「画像CSSクラス」を設定

これで「画像CSSクラス」に先ほどCSSに記載した「onmouseanime」というクラス名が追加された画像のリンクのみに、アニメーションエフェクトが適用されるようになります。

 

スズケー
スズケー
JINらしい画像リンクを設定したいという方、
ご自由にコピーして使ってください!
使われたら、一言コメントとかいただけると喜びます。
 

お読みいただきありがとうございました!
コメント欄はちょっと下にあります。承認式ですが、コメントはお気軽にどうぞ。

ABOUT ME
スズケー
スズケー
フンザ出身のパキスタン人と国際結婚しています。 デザイナーとライターとアーティスト、時々通訳をしつつ、 投資もやってます。 お金稼いでパキスタンと日本とインドと、好きに行ったり来たりしたい。
 
にほんブログ村 旅行ブログ パキスタン旅行へ にほんブログ村 海外生活ブログ パキスタン情報へ にほんブログ村 恋愛ブログ 国際結婚(アジア人)へ

WordPress完璧インストール 設定代行


スマホで稼ぎながら旅するグループアフィリエイト


目指せブロガー!「旅をしながら稼ぐ」を実現するためのおすすめ教材
ホビリエイト・マスターズカリキュラム ロゴ

「楽しく稼ぐ」をモットーに、趣味や好きなことが仕事・収入に繋がるブログ運営を学べる講座。お手頃価格の参加費で、正統派のブログアフィリエイトのノウハウを0からしっかり習得できる、初心者さんにもおすすめの教材。
  
公式サイトを見る 紹介記事を見る

仮面ブロガーズ ロゴ

ブログで結果を出すための個別指導型オンライン学習コミュニティ。「ブロガー」として自分自身や自分の得意なことを商品にして、少ないアクセスでも好反応・高収入を得られる「資産となるブログ作り」を学ぶことが出来る。

公式サイトを見る 紹介記事を見る

イチ押し!自分のまつ毛をバッサバサに育てる究極のまつ毛美容液

まつ毛が短く、目もとに自信がない方へ。30日で実感、60日で感動できる「まつ毛」「まゆ毛」美容液。1日1回使用して、本当にまつ毛がバッサバサになりました!エクステやつけまつ毛のダメージで抜け毛が多い方にもおすすめ。

公式サイトを見る 紹介記事を見る

 
パキスタン・フンザ 旅行、滞在情報まとめ

パキスタン、フンザ旅行に関する情報記事の一覧はこちらから!
治安、旅行ガイド、両替やATM、フンザへの行き方など、ブログ内のパキスタン旅行や滞在に関する必要情報・便利情報をまとめた目次(サイトマップ)です。

パキスタン・フンザ ガイド
パキスタン・フンザ 旅行、滞在情報ガイドパキスタン、フンザ旅行に関する情報記事の一覧、目次。治安、旅行ガイド、両替やATM、フンザへの行き方など、ブログ内のパキスタン旅行に関する必要・便利情報まとめ。...
ご意見・ご質問などはメールフォームからどうぞ。
デザイナーとライターをしています。お仕事のご依頼やご相談もお気軽に。

コンタクト用メールフォーム

COMMENT

メールアドレスは非公開です(メルアド入力なしでもコメントできます)。
お気軽にコメントをどうぞ。

テキストのコピーはできません。