【Cocoon】ホバー時のサムネイル画像をカスタマイズする

アイキャッチ画像 Cocoon
スポンサーリンク

ホバー時のサムネイル画像

前回のエントリー記事で「ホバー時の背景色」を設定しましたが、今回は「ホバー時のサムネイル画像」のカスタマイズについてまとめてみました。

テーマCocoonのホバー時のサムネイル画像

WordPressテーマ Cocoonで使われている「ホバー時のサムネイル画像」は、特に変化がありません。

例えばランキングをホバーしたときは次の様になっています。

【WordPress】ホバー時のサムネイル画像をカスタマイズする

サムネイル画像に変化は無く、サムネイル画像以外の背景色が変化する処理となっています。

その他の「関連記事」「次の記事」「前の記事」などの項目に対しても、「ホバー時のサムネイル画像」に変化がありません。

ホバー時のサムネイル画像のカスタマイズ

今回のカスタマイズの内容は、「ホバー時のサムネイル画像」に対して透明度の設定とアニメーションを付加してみました。

カスタマイズ内容

「ホバー時のサムネイル画像」のカスタマイズは、下記の通りです。

このカスタマイズ内容を「スタイルシート(style.css)」に追記します。

/************************************
** ■サムネイル画像のホバー時エフェクト処理
************************************/
/*記事一覧の画像*/
.entry-card:hover figure img{
  opacity: 0.6;
  transition: all 0.8s ease;
}
/*記事一覧画像の画像*/
.entry-card-wrap.a-wrap:hover figure img{
  opacity: 0.6;
  transition: all 0.8s ease;
}
/*人気記事の画像*/
.popular-entry-card-link.a-wrap:hover figure img{
  opacity: 0.6;
  transition: all 0.8s ease;
}
/*関連記事の画像*/
.related-entry-card-wrap.a-wrap.cf:hover figure img{
  opacity: 0.6;
  transition: all 0.8s ease;
}
/*次の記事の画像*/
.prev-post.a-wrap.cf:hover figure img{
  opacity: 0.6;
  transition: all 0.8s ease;
}
/*前の記事の画像*/
.next-post.a-wrap.cf:hover figure img{
  opacity: 0.6;
  transition: all 0.8s ease;
}
/*ブログカードの画像*/
.blogcard:hover figure img{
  opacity: 0.6;
  transition: all 0.8s ease;
}
/*ブログカード画像の画像*/
.blogcard-thumbnail:hover figure img{
  opacity: 0.6;
  transition: all 0.8s ease;
}
/*タイトル画像*/
.site-name-text:hover img{
  opacity: 0.6;
  transition: all 0.8s ease;
}

カスタマイズ後のホバー時のサムネイル画像

今回のカスタマイズによって、「ホバー時のサムネイル画像」が「ホバー時の背景色」とマッチするようになりました。

【WordPress】ホバー時のサムネイル画像をカスタマイズする

最後に

前回の「ホバー時の背景色」のカスタマイズで違和感を感じた場合は、今回の「ホバー時のサムネイル画像」のカスタマイズを行うと良いでしょう。

今回のエントリー記事で、各項目のホバー時の処理は完了です。

コメント

  1. 渡邊 より:

    こんにちは。初めまして。
    Cocoonではサムネイル画像にホバーエフェクトが設定されておらず、どうすれば良いか困っていたところ、貴サイトのこの記事に辿り着きました。
    一瞬で解決することができ、とても助かりました。ありがとうございます。
    ところで、Cocoonでは、記事内に画像リンクを貼り付けた場合にも、ホバーエフェクトが起こらないようですが、これを設定する方法はないものでしょうか・・・?
    こちらでご紹介下さっているように、ホバー時に透明になるようにカスタマイズしたいと思うのですが、ネット上の情報を色々試したところ、いずれもCSS記述エラーになったり、プラグインも正常に機能しなかったりで、なかなか前に進めません。
    もし何か良い方法をご存知でしたら、ご教示願えませんでしょうか。
    厚かましい相談で申し訳ないのですが、何卒よろしくお願い申し上げます。

    • 初めまして(o_ _)o))
      大変ご丁寧なコメントを頂きありがとうございます。
      また、当方のサイトがお役に立てて光栄です。

      画像リンクのホバーエフェクトについてですが、自分が記事内でほとんど画像リンクを使わないため考えていませんでした。

      画像リンクに対してホバーエフェクトの処理を行うのは、下記のソースコードをスタイルシートに追記することで実現すると思います。

      a:hover img{
      opacity: 0.6;
      transition: all 0.8s ease;
      }

      但し、注意する点としては、ブログサイト全体の全ての画像リンクに対してホバーエフェクトの処理が行われます。

      そのためこれまで他のアイキャッチやサイドバーのなどの画像に対してホバーエフェクトの処理を行っている場合、その処理に上書きされる可能性もあります。

      もしサイドバーの画像リンクにホバーエフェクトを掛けたくない場合は、下記のソースコードをスタイルシートに追記してみて下さい。

      .main a:hover img{
      opacity: 0.6;
      transition: all 0.8s ease;
      }

      今回MASAa.netは、最初のソースコードを追記しました。

      これによりアフィリエイトの画像(アマゾン等一部除く)に対してもホバーエフェクトが掛かるようになりました。

      と言う事で、直ぐに思いつく画像リンクに対してのホバーエフェクトの処理はこのような感じになります。

      もしよろしければご参考頂ければと思います。

      今後ともMASAa.netをよろしくお願い致します。