プラグイン【Jetpack】の画像比較ブロック=2枚の画像を比較表示できる

人気のプラグインJetpackに含まれる画像系のブロック中から、興味のあるものをピックアップして使い方をチェックしています。

今回は「画像比較」ブロックです。

画像比較ブロック

[画像比較]ブロックを使うと、加工した画像のビフォーとアフターを比較したり、2枚の画像の違いを見比べる時に便利なビューワーを挿入できます。

挿入された画像の上に表示されるスライダーをドラッグして、画像を比較します。

画像比較ブロックの使い方

  1. 追加ブロックの中から[画像比較]ボタンをクリックします。
  1. 編集エリアに下図のような「比較前/比較後」の画像をアップする画面が表示されるので、比較用の2枚の画像をアップロード、又は、画像を選択します。
  1. 必要に応じてキャプションを入力します。
  2. スライダーは、サイドバーの[方向]で左右か上下を選択できます。

記事に挿入されたビューワーは、CSSを使ってスタイリング可能です。

画像比較 サンプル動画

※ Jpackを無効化した時に備えるため、サンプルは動画になっています。

最後に…

プラグイン『JetPack』は、1つで何通りもの機能を備えたオールラウンダープラグインです。複数のプラグインをインストールするより、1つのプラグインで済ませたい人にはとても便利なツールですよね。

ところが、その分サイトへの負荷も高く、全体的に重くなる印象があります。

また、それぞれのツールは基本的な機能に抑えられていて、細かいカスタマイズが出来ないというデメリットがあります。

今回の記事で取り上げた画像比較機能も、専用のツールが複数出回っています。

導入するプラグインの数を抑えるためにJetPackで賄うか、できるだけ軽い動作の専用プラグインを導入するか、本当に悩ましいです。

参考までに、画像比較ができるプラグインを探してみました。

タイトルとURLをコピーしました