Diver-サムネイルのアニメーション設定

 

Diverで『サムネイルのアニメーションの設定方法』を紹介します。

サムネイル上にマウスのポインターがのると、動きを加えることが可能です。

 

カエル
Diverの使い方を紹介するよ

 

動く必要ないとう方は、なくしてしまってもいいと思います。

ちょっとした動きで人の目線は無意識に惹きつけられるので設定しても損はないでしょう。

 

この記事を参考にすることで、自分好みのサイト作り出すことが可能です。

 

スポンサーリンク

サムネイルでのアニメーション設定メリット

サムネイルのアニメーション設定

サムネイルにアニメ―ションを設定できる個所は上画像になります。

メリットは記事が並ぶ中から、記事を目立たせることが出来る点です。たまたまでポインターが画像の上行けば目線は惹きつけられます。

 

僕はサムネイルに書かれている文字が拡大されることに利点を感じズームを設定してます。

 

サムネイルのアニメーション設定方法

簡単は変更です。

 

WordPressのメニューを開きます。

『外観』→『カスタマイズ』をクリック

Diver-カスタマイズ

 

『カスタマイズ』画面になったら、『デザイン設定➀』をクリックします。

記事一覧サムネイルから変更をすることが出来ます。

 

サムネイルのアニメーション設定

 

設定できるアニメーションの種類は『なし』も含めて6種類。

好きな好みにしてみてください。

 

サムネイルのアニメーション設定

 

サンプル例をそれぞれのせておきますね。

ズーム

サムネイルのアニメーション設定

 

 

ぼかし

サムネイルのアニメーション設定

これはサムネイルがぼやけて逆効果では?

 

グレイスケール

サムネイルのアニメーション設定周りと雰囲気が変わり注目は集めるかも

 

セピア

サムネイルのアニメーション設定

グレイスケールに似てますが、個人的にはセピアの方が文字は見やすい。

 

透過

 

サムネイルのアニメーション設定

うすくなります。

このくらいちょっとの変化でも人の目線ってひきつけられますよね。

 

まとめ

アニメ―ションはパソコンでの表示にのみ有効です。

アニメーションによってサイトの雰囲気も多少は変わるので設定をしてみるのもいいかもしれませんね。

 

Diverに関する記事は他にもあるので良かったら見てください。

また、SEOに関する記事も書いてあるので合わせてどうぞ。

スポンサーリンク

Twitterでフォローしよう

おすすめの記事