Luxeritas(ルクセリタス)の動きと画像の設定をしよう!【アニメーション、Lazy Load(画像の遅延読み込み) 編】

2018年10月10日ブログ管理Lazy Load, Luxeritas, Luxeritasカスタマイズ, アニメーション, ブログ管理, 初心者

アニメーションとLazy Loadヘッダー

トリ師匠
トリ師匠
いよいよ残り10個くらいになったの。

ぐず夫
ぐず夫
もう達観して悟ってもうたで何ともないわ!
トリ師匠
トリ師匠
(…ならなんで怒ってんねん)
今日はブログのちょっとした動きと、画像読み込みの設定について触ってみよか。

ということで、今回はLuxeritasのカスタマイズ機能を使ってアニメーションと画像の遅延読み込みの設定をしてみたいと思います。

アニメーション 機能

アニメーション選択

トリ師匠
トリ師匠
ここでは一部のアイコンをホバーした時のアニメーションを設定できるで。内容は見たままやで、さっさと「アニメーション」を選択してみよか。

 

① サイト名

ヘッダー内、サイト名に触れた場合のアニメーション効果を設定します。

【 ズームインの場合… 】

サイト名に触れると文字が大きくなる

ズームイン
マウスホバーで文字サイズが拡大

 

【 ズームアウトの場合… 】

サイト名に触れると文字が小さくなる

ズームアウト
マウスホバーで文字サイズが縮小

 

② 記事一覧のサムネイル

一覧表示等のサムネイル画像に触れた場合のアニメーション効果を設定します。

【 ズームインの場合… 】

サムネイルに触れると画像が大きくなる

サムネズームイン
マウスホバーでサムネイルが拡大

 

【 ズームアウトの場合… 】

サムネイルに触れると画像が小さくなる

サムネズームアウト
マウスホバーでサムネイルが縮小

 

③ SNSシェアボタン

SNSシェアボタンに触れた場合のアニメーション効果を設定します。

【 上方移動の場合… 】

SNSボタンに触れると画像が上へスライドする

上方移動
マウスホバーでピョコンと上へスライド

※ ズームイン・ズームアウトはサムネイル等と同様のため割愛

 

④ ヘッダーナビ(グローバルナビ)

ヘッダーナビに触れた場合のアニメーション効果を設定します。

【 上方移動の場合… 】

ヘッダーナビに触れると画像が上へスライドする

ヘッダーナビ上方移動

 

 

Lazy Load(画像の遅延読み込み) 機能

Lazy Load選択

トリ師匠
トリ師匠
ここはLazy Load(画像の遅延)について設定する場所じゃ。そんじゃ「Lazy Load(画像の遅延読み込み)」を選んでクリックじゃ!

 

始めるその前に。Lazy Loadてなんですのん?

ぐず夫
ぐず夫
「Lazy Load」てなによ?
トリ師匠
トリ師匠
Lazy Loadは文字通りページに表示される画像の表示を遅らせるっちゅうもんじゃ。
ぐず夫
ぐず夫
なんでそんなもん必要なん?
トリ師匠
トリ師匠
過去の従来のページはな、ページへ飛んだ時に全部の画像を読み込むのが普通じゃった。でもそれやと処理は重くなるわ、データの転送量も増えるわで、あんまりええことがないやろ。じゃから画像を読むタイミングはユーザーの目に触れる時にせえへんか?てことで作られた便利機能じゃ。
ぐず夫
ぐず夫
ふーん。なんかええことあるのん?
トリ師匠
トリ師匠
んなら逆に聞くけど、ぐず夫は毎回ページを端から端まで全部読んでるか?
ぐず夫
ぐず夫
いいや。適当に2割くらいやの。
トリ師匠
トリ師匠
(さすがにもう少し読めや…)
2割しか見んのに、新しいページへ飛ぶたび全部の画像読み込んどったら時間も無駄じゃしデータ転送量も馬鹿にならん。そんな思いをユーザーさんにさせへんために、ユーザーさんが見たい部分だけ表示させるっちゅう、ページの管理者が用意するおもてなし機能じゃ。何より画像をまとめて読み込まへんから、訪問時のページ表示速度を上げてくれる一石二鳥の効果もあるんやで!
ぐず夫
ぐず夫
よー分からんがええことなんやな。ならさっさとやろか!

 

① 各種サムネイル画像のLazy Load有効化

ブログ内のサムネイル画像のLazy Loadを有効化する機能。(※ 対象となる画像例)

サムネ一覧の例
一覧表示のサムネイル画像

 

② 投稿コンテンツのLazy Load有効化

投稿内の画像についてLazy Loadを有効化する機能。(※ 対象となる画像例)

対象となる投稿画像例
投稿記事内に表示される全ての画像

 

③ サイドバーのLazy Load有効化

サイドバーに表示される画像についてLazy Loadを有効化する機能。(※ 対象となる画像例)

サイドバー画像例

トリ師匠
トリ師匠
注釈にもあるけど、スクロール追従型のウィジェットを実装してると異常が出ることがあるらしいで気をつけてな!

 

④ フッターのLazy Load有効化

フッター部分に表示される画像についてLazy Loadを有効化する機能。(※ 対象となる画像例)

フッターの画像例
例:フッターにプロフィール画像が貼られている場合

 

⑤ GravatarのLazy Load有効化

Gravatar(いわゆるユーザーアイコン)画像についてLazy Loadを有効化する機能。(※ 対象となる画像例)

Gravatar画像例
コメント欄内のアイコン画像

 

⑥ Javascriptが無効でも画像を表示する

Javascriptが動作しない/無効のブラウザにも画像を表示させる機能

トリ師匠
トリ師匠
「noscript」っちゅうタグを使ってスクリプトが動かんブラウザにも画像を表示させるそうじゃ。

 

⑦ エフェクト・効果

画像の表示方法について設定します。フェードイン表示と通常表示の選択が可能。

トリ師匠
トリ師匠
これでアニメーションと画像遅延の設定は終了じゃ!

アニメーションと画像遅延の設定を終えて…

トリ師匠
トリ師匠
今回はユーザーさんの見た目に関わる部分じゃったがどうやった?
ぐず夫
ぐず夫
どうってことあらへんよ。
ワシはワシのブログの客と違うし。
トリ師匠
トリ師匠
(どんだけ冷めてんねん…)

以上でアニメーション、Lazy Load(画像の遅延読み込み)編のカスタマイズを終了します。

ではまた次回をお楽しみに!