画像比較ブロック
2つの画像の違いを表示して比較するには、画像比較ブロックのスライダーを使用します。
画像比較ブロックを追加する
画像比較ブロックは、Jetpackに接続されたすべてのサイトで利用できます。Jetpackブロックの一部であり、デフォルトで有効になっています。画像比較ブロックを使用するために有料アップグレードは必要ありません。詳しくは、Jetpackブロックの記事で、利用可能なブロックと有効化方法をご覧ください。
Jetpack Blocks require the Block Editor (also referred to as the Gutenberg editor). If you’ve installed the Classic Editor plugin, you have a few options:
- Deactivate the Classic Editor: Go to Plugins → Installed Plugins in your WP Admin and deactivate the Classic Editor plugin.
- Enable both editors: If you prefer flexibility, navigate to Settings → Writing in your WP Admin (not the menu under Jetpack settings). Set Allow users to switch editors to Yes. You will only see these options if you have the Classic Editor plugin installed and active.
Some custom themes or plugins may prevent you from using the Block Editor. In that case, please contact the support team for the plugin or theme for further assistance.
For more details, see Using Blocks and the Classic Editor.
ブロックセレクターのJetpackセクションから検索または選択して、画像比較ブロックを追加できます。2つの画像が結合された緑色のアイコンで見分けられます。ブロックの追加方法について詳しくは、Jetpackブロックをご覧ください。
画像比較ブロックに画像を追加するには、次の手順に従ってください。
- このブロックは、幅と高さが同じ2つの画像で最も適切に動作するため、サイズの近い画像を用意してください。
- ブロックを追加したら、ギャラリーには通常の画像ブロックと同じように画像を追加できます。
- コンピューターから画像をアップロードしたり、メディアライブラリから選択したり、外部ソースから追加したりできます。
- 画像を追加したら、ブロックツールバーとサイドバーを使ってカスタマイズできます。
- 必要に応じて、画像をアップロードした後にブロックへキャプションを追加してください。
誤って間違った画像をアップロードした場合や画像の順序を変更したい場合は、ブロックを削除して最初からやり直す必要があります。
ブロック設定
すべてのブロックには、エディターのサイドバーに固有のオプションがあり、ブロックツールバーにもオプションがあります。サイドバーが表示されない場合は、公開ボタンの隣にある設定アイコン（メニューのようなアイコン）をクリックしてください。
画像比較ブロックで設定できるオプションは数個だけですが、その中でも特に重要なのが画像スライダーの向きです。
向きの設定
向きの設定を使うと、画像の配置を左右から上下へ切り替えられます。これにより、画像間でスライダーが移動する方向も変わります。
向きは何度でも切り替えられますが、新しい向きをテストする前に変更を保存してください。
高度な設定
ブロックにCSSクラスを追加し、カスタムCSSを記述して、好みに合わせてブロックをスタイリングできます。
既知の問題
画像比較ブロックは、画像の配信と最適化によってパフォーマンスを向上させるためにJetpackのサイトアクセラレーターを使用します。サイトアクセラレーターと併用して複数の最適化サービスやキャッシュサービスを使用すると、ブロックによる画像の表示方法などで競合が発生する場合があります。
よくある問題には、画像が表示されない、スライダーが機能しないなどがあります。これらは、画像のURLを変更したり、画像形式を自動的に変換したり、遅延読み込みやCDNの書き換えを行ったりするプラグインが、Jetpackに干渉することによって発生する場合があります。
画像比較ブロックで表示の問題が繰り返し発生する場合は、次の対処をお試しください。
- 互換性をテストするため、画像最適化プラグイン（EWWW Image Optimizerなど）を一時的に無効にしてみてください。
- ブロックが無効化後に正常に動作する場合は、再度有効にする際にそのプラグインの設定を確認してください。遅延読み込みやCDNの処理などの機能を無効にしてみてください。
- ブロックをテストします。
ベストプラクティスとして、Jetpackのサイトアクセラレーターと重複する複数の最適化レイヤーやキャッシュレイヤーを有効にしないでください。
Still need help?
Please contact support. We’re happy to advise.
プライバシー情報
画像機能ブロックはデフォルトで有効化されています。無効化することはできません。画像比較ブロックは常にブロックセレクターで利用できます。
| 使用されるデータ | |
|---|---|
| サイト所有者／ユーザー
ありません。 | サイト訪問者
ありません。 |
| 追跡されるアクティビティ | |
| サイト所有者／ユーザー
Google Photosとの接続を解除すると、Google Photosの接続が解除されたことを追跡します。 | サイト訪問者
ありません。 |
| 同期されるデータ（続きを読む） | |
| サイト所有者／ユーザー
この機能が有効になっているかどうか、および利用可能な設定がどのように構成されているかを識別するオプションを同期します。 | サイト訪問者
ありません。 |
