Before / After 比較スライダー生成

2枚の画像を読み込むと、つまみを動かして見比べられる比較スライダーを作れます。WordPress の「カスタムHTML」ブロックなどにそのまま貼れる、ライブラリ不要のコードをコピーできます。

読み込んだ画像や入力したデータは外部に送信されません。すべてお使いのブラウザ内で処理されます。

画像と設定

Before の画像

ここに画像をドロップまたはクリックして選択

未選択

After の画像

ここに画像をドロップまたはクリックして選択

未選択

スライダーの設定

分割の向き

縦分割（左右に動かす）横分割（上下に動かす）

つまみの初期位置：50%

角丸：8px

最大幅（px。空欄なら表示領域いっぱい）

ラベルラベルを表示する

Before 側の文言

After 側の文言

ラベルの表示位置

画像の指定方法（出力するコード）

画像のURLを指定する（おすすめ）画像をコードに埋め込む（Base64）

Before の画像URL

After の画像URL

WordPress の場合は、メディアライブラリにアップロードした画像の「ファイルのURL」を貼ります。空欄のままでも、後からコードの中の BEFORE_IMAGE_URL・AFTER_IMAGE_URL を差し替えられます。

代替テキスト（alt）

Before の画像の説明

After の画像の説明

空欄の場合は、ラベルの文言（Before / After）を使います。

Before と After の画像を読み込むと、ここにプレビューが表示されます

とくしよネット運営者

このツールは、ブログ「とくしよネット」の運営者が制作・管理しています。