2枚の画像（Before と After）を入れると、スライダーで比べられる HTML / CSS / JavaScript のコードを出力するツールです。 画像をコードの中に埋め込む形（Data URI）と、画像を別ファイルで置く形（ファイル参照）を選べます。 ブラウザで開くだけで動き、読み込んだ画像は外部に送られません。 1組だけで足りる方は、無料版もあります。https://mall-aibou.booth.pm/items/8927512 ━━━━━━━━━━━━━━━━━━━━ ご注意 ━━━━━━━━━━━━━━━━━━━━ 出力したコードは、貼り付け先のサービスやテーマの仕様（scriptタグが使えるかなど）によって、動かないことがあります。 公開する前に、実際のページで表示と操作をご確認ください。 ━━━━━━━━━━━━━━━━━━━━ この商品で得られるもの ━━━━━━━━━━━━━━━━━━━━ ◆ 複数組のスライダーを、ひとつのコードにまとめて出力 ◆ 組ごとに、横型（左右で比べる）か縦型（上下で比べる）かを選べる ◆ Before / After のラベル表示（名前も変えられます） ◆ 線とつまみの色、線の太さ、表示幅の上限、最初の位置の調整 ◆ 画像の入れ方を選べる（Data URIで埋め込む ／ ファイル参照） ◆ ファイル参照のときの、画像の置き場所の指定（例 images/） ◆ 画面上のプレビュー（ドラッグ・クリック・矢印キーの動きを確認できます） ◆ 「HTMLファイルとして保存」で、そのまま開けるHTMLの保存 ◆ 画像のサイズ制限なし（大きい画像をData URIにすると、コードも長くなります） ━━━━━━━━━━━━━━━━━━━━ 使い方（3ステップ） ━━━━━━━━━━━━━━━━━━━━ 1. before-after-slider.html をダブルクリックして、ブラウザで開く 2. 「Beforeを選ぶ」「Afterを選ぶ」で画像を選ぶ。複数組のときは「組を追加する」を押す 3. 画像の入れ方や見た目を整えて、「コードをコピー」を押して、使いたい場所に貼り付ける ━━━━━━━━━━━━━━━━━━━━ 動作環境 ━━━━━━━━━━━━━━━━━━━━ ・Chrome / Edge / Safari の最新版 ・ネット接続は不要です ・外部のサーバーと通信しません。広告もトラッキングもありません ━━━━━━━━━━━━━━━━━━━━ できないこと ━━━━━━━━━━━━━━━━━━━━ ・画像の編集、リサイズ、圧縮はできません。元の画像がそのままコードに入ります ・WordPressなど、各サービスへの組み込みを自動で行うことはできません ・貼り付け先のサービスやテーマで動くことを保証するものではありません ■ 使ってよい範囲 　業務・制作にお使いいただけます。出力したコードは、ご自身のサイトや納品物にお使いいただけます。クレジット表記は不要です。 　ツールのファイルそのものの再配布・販売はご遠慮ください。 ■ 同梱物 　before-after-slider.html ／ README.txt TOOL BOX