BJ Lazy Load

スクロールしたら画像が表示される BJ Lazy Loadの使い方

BJ Lazy Load

Pocket

BJ Lazy Loadとは

画像が多くなると、読み込みが遅くなります。BJ Lazy Load は、画面のスクロールに合わせて画像を読み込んでくれるプラグインです。見える部分以外の画像読み込みを遅延させることで、ナローバンドにも優しくスマートフォンにも対応しています。

BJ Lazy Load をインストール

プラグインのインストール画面に移動

プラグインのインストール画面に移動

WordPressの管理画面・ダッシュボードを表示します。左側のメニューの一覧から プラグイン > 新規追加 を選びプラグインのインストール画面に移動します。

BJ Lazy Loadを検索する

BJ Lazy Loadを検索する

プラグインのインストール画面に移動したら、検索窓に「BJ Lazy Load」と入力し プラグインの検索 をクリックします。WordPress プラグインディレクトリ からプラグイン「BJ Lazy Load」を自動的にインストールできます。

BJ Lazy Loadのインストール

BJ Lazy Loadのインストール

プラグインのインストール画面で検索結果が表示されます。検索結果の一覧の中から「BJ Lazy Load」を探し、 いますぐインストール をクリックします。現在の最新バージョンは BJ Lazy Load バージョン 0.7.5 です。

プラグイン:BJ Lazy Loadの有効化

プラグイン:BJ Lazy Loadの有効化

プラグイン BJ Lazy Load のインストールが完了しました。インストール完了時に表示された画面の プラグインを有効化 をクリックし、プラグイン:BJ Lazy Load を有効にします。

プラグイン:BJ Lazy Load が有効化されました

プラグイン:BJ Lazy Load が有効化されました。有効化をクリックするとプラグイン:BJ Lazy Load が有効化され、「インストール済みプラグイン」の画面が表示されます。プラグイン:BJ Lazy Load が有効化された状態で表示されています。

BJ Lazy Loadの設定

BJ Lazy Loadの設定画面へ移動

BJ Lazy Loadの設定画面へ移動

WordPressの管理画面・ダッシュボードを表示します。左側のメニューの一覧から 設定 > BJ Lazy Load を選び BJ Lazy Load の設定画面に移動します。

BJ Lazy Load Options

BJ Lazy Load Options
初期値のままで問題なく作動します。

Apply to content

コンテンツに遅延ロードさせるかを設定します。 Yes にしないとこのプラグインが作動しません。

Apply to post thumbnails

サムネイル画像に遅延ロードさせるかを設定します。

Apply to gravatars

Gravatar(ブログへの投稿やコメントの際に名前の横に表示される画像)を使ったコメント欄の画像を遅延ロードさせるかを設定します。

Lazy load images

画像ファイルを遅延ロードさせるかを設定します。必ず Yes にしてください。

Lazy load iframes

ソーシャルメディアやアフィリエイトなどのiframeで表示させているコンテンツに遅延ロードさせるかを設定します。

Theme loader function

LazyLoadを起動するコードを記述する場所の指定です。通常デフォルトの wp_footer で良いですが、機能しない場合は wp_head に変更してみてください。

Placeholder Image URL

遅延ロードで画像を読み込むまでの間に表示される画像を指定します。何も入力しなくて構いません。その場合は空白ですが、瞬時に画像が読み込まれますので問題ないでしょう。
表示させる場合は画像のURLを記入します。

Skip images with classes

遅延ロードさせたくない画像のクラス名を指定るします。

Threshold

読み込みを開始する数値を画像までの距離(ピクセル)で指定します。スクロールに遅れなく表示させたい場合は 400 ぐらいにしておくと、遅延なく画像が表示されます。

Infinite scroll

無限スクロールを実装したサイトにおいて遅延ロードさせるかを設定します。

Load hiDPI (retina) images

高解像度RetinaディスプレイMac向けの画像を遅延ロードさせるかを設定します。iPhone や iPad からのアクセスが想定される場合は Yes にします。

Load responsive images

レスポンシブに設定された画像を遅延ロードさせるかを設定します。スマートフォンやタブレットからのアクセスが想定される場合は Yes にします。