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
スズケー
スズケー
フンザ出身のパキスタン人と国際結婚しています。 デザイナーとライターとアーティスト、時々通訳をしつつ、 投資もやってます。 お金稼いでパキスタンと日本とインドと、好きに行ったり来たりしたい。
パキスタン・フンザ 旅行、滞在情報まとめ

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

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

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

にほんブログ村 旅行ブログ パキスタン旅行へ にほんブログ村 海外生活ブログ パキスタン情報へ にほんブログ村 恋愛ブログ 国際結婚(アジア人)へ

COMMENT

メールアドレスは非公開です。お気軽にコメントをどうぞ。

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