Simplicityで記事一覧のサムネイルにエフェクトをするカスタマイズ

Simplicity2のカスタマイズ備忘録だ。WordPressのテーマSimplicity2で、記事一覧のサムネイル画像にマウスオーバーした際にホバーエフェクト(hover)するように変更してみた。のサイトで使用したデザインのCSSコードを貼ってある。

Simplicity2のバージョンは2.6.3。

CSS変更する際の注意

WordPress上で「外観」→「テーマの編集」にある「スタイルシート(style.css)」に変更したいコードを追加していく。その前に2つほど気をつけておくことを。

CSSのカスタマイズは子テーマで

親テーマを直接触るなんて怖くてできない。以下のサイトで「Simplicity2カスタマイズ用の子テーマファイル」をダウンロード。これ、常識。

テーマをカスタマイズするなら親テーマの直接編集はお勧めできません。というのも、ダウンロードページで配布しているテーマファイルを直接編集すると、アップデート時に編集下部分がが上書きされ、せっかくのカスタマイズが全て消えてしまいます。それを防ぐ

変更していなければブラウザのキャッシュをクリアを

変更されていなくても、ブラウザのリロード(再読込)をすれば、たいていはCSSの変更を反映してくれるはず。もし、変更されていない場合はブラウザのキャッシュをクリア(スーパーリロード)を試してみる。
(例)Windows
Firefox:Ctrl + F5 または Ctrl + Shift + R
Google Chrome:Ctrl + F5 または Shift + F5

サムネイル画像にエフェクトをかけるカスタマイズ

これまでのサイト作成で、hoverによるエフェクトをあまりつかったことがなかった。決して、CSSをよく理解しているとは言えない素人だ。なので、いろいろなサイトを検索してみた。

サムネイルにエフェクトをかけるコード3つ

シンプルなCSSが見つかった。

/* サムネイルにエフェクト1 */
.entry-thumb img{
transition: 0.5s;
}

.entry-thumb img:hover {
opacity: 0.6;
transition: 0.5s;
}

こういうのもあった。「overflow: hidden」は画像が拡大したときに外枠をはみ出さないで、という設定。

/* サムネイルにエフェクト2 */
.entry-thumb{
width: 259px;
height: 160px;
overflow: hidden;
}

.entry-thumnail{
-moz-transition: 0.5s linear;
-webkit-transition: 0.5s linear;
-o-transition: 0.5s linear;
-ms-transition: 0.5s linear;
transition: 0.5s linear;
}

.entry-thumnail:hover {
opacity: 0.6;
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}

こういうのも。「transition: ●●s」や「opacity: ●●」の数値は好みに合わせて変更するほうがいいかと。

/* サムネイルにエフェクト3 */
.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);
}

最終的に子テーマに追加したコードはこれ(暫定)

サムネイルを拡大&白黒にしたかった。参考にしたのは下のサイト。ぶっちゃけ合っているかどうかはまったく自信がない。

人気のカードUIにぴったりの、CSSだけで実装できるサムネイルhoverエフェクトを作ってみました!ちょっと工夫しただけで、ぐっと頑張った感が出る便利なヤツです。コピペをすればすぐに使えるので、お手軽実装したいときにぜひどうぞ!
/* サムネイル画像のエフェクト */
.entry-thumb,.wpp-thumbnail{
overflow: hidden;
}
.entry-thumb img,.wpp-thumbnail img{
transition: 0.5s ;
}
.entry-thumb img:hover,.wpp-thumbnail:hover {
opacity: 0.8;
-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);
filter: blur(3px) grayscale(100%);
}

正しいCSSとは?

実は、試してみたCSSは他にもあった。どれもが似たような動作をしていたので、どれが正解なのかわからなかった。だから、(暫定)としている。もう少しCSSのお勉強してみる。正しいCSS、キレイなコードのCSSってやつがわからない。