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

s-gazou

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

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

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

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

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

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

スポンサーリンク

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

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

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

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

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

スポンサーリンク

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

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

コードは以下です。

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

格好良いですね。

サムネイル画像のカスタマイズ / まとめ

今回はシンプルなカスタマイズでしたが、これもあるのとないのとでは格段に変わってくるカスタマイズだと思うので、気に入った方はぜひ試して下さい。

次のページはこちら⇒【Simplicity2カスタマイズ⑧】記事本文のh1~h4の見出しとサイドバーの見出しを変更する

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。