【Simplicity2カスタマイズ⑦】サムネイル画像のカスタマイズを行う！

2016.05.282016.06.22

Word Pressの超優良で且つ無料テーマであるSimplicity2のカスタマイズを備忘録的に残しています。

Simplicity2のカスタマイズの一覧は、こちらのページからご覧ください。

今回行うカスタマイズは、「トップページに表示されているサムネイル画像をカスタマイズする」です。

行うカスタマイズはリンクが貼られている画像の上にマウスが乗っかると薄く色が変化するのと、マウスが乗った時に画像がボワンと少し浮かび上がるような変化を付けたいと思います。

参考にさせて頂いたのは、以前にも紹介したこともあるこちらの記事（WordPressテーマ「Simplicity」をカスタマイズする19のポイント【2016.04.14更新】 / MASALOG）です。

ここで紹介されていたCSSコードを一つは利用させて頂きました。

LWL_ディスプレイ_レスポンシブ_PC用1つめのH2前

画像の上にマウスが乗ると薄く色が変化するCSS

まずはこちらのコードをスタイルシート（style.css）に記述します。

/*---------------------------------
画像ホバー時
--------------------------------*/
 a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

通常は画像の上にマウスを乗せても変わらないのですが…

マウスを上の乗っけると、画像が薄いグレーになりました。

といっても、参考の画像をスクリーンショットしようとしても、ほとんど画像では分からなかったのでここでは載せないでおきます。

LWL_記事内広告_レスポンシブ_PC用2つめのH2前

画像の上にマウスが乗ると、サムネイル画像が浮かび上がるカスタマイズ

これはMASALOGさんのブログ内に書かれていた記事をそのまま引用させて頂きます。

コードは以下です。

/*---------------------------------
サムネイル画像が拡大する
--------------------------------*/
.entry-thumb,.wpp-thumbnail{
  overflow: hidden;
}
.entry-thumb img,.wpp-thumbnail img{
  transition: 0.6s ;
}
 
.entry-thumb img:hover,.wpp-thumbnail:hover {
   opacity: 0.6;
   -moz-transform: scale(1.1,1.1);
  -webkit-transform: scale(1.1,1.1);
  -o-transform: scale(1.1,1.1);
  -ms-transform: scale(1.1,1.1);
}

これもテストサイトではサムネイル画像が微妙なので例の画像を貼り付けませんが、これで画像の上にマウスを置くとボワンと画像が浮かび上がるようなエフェクトがかかります。

格好良いですね。