画像ギャラリーをワンクリックで作成[HTML]

7月 26, 2020

Arles Image Explorer をダウンロードする

Webサイト用の画像ギャラリーを生成するツール「Arles Image Explorer」を下記のサイトからダウンロードし,インストールする.

https://www.digitaldutch.com/arles/

対応OSはWindows

Arles Image Explorerを開くと,以下のような画面がでてくる.

f:id:Vastee:20190714193748p:plain

画像をドラッグアンドドロップする

画像をドラッグアンドドロップし,アップロードを行うと,以下のような画面になる.

f:id:Vastee:20190714193801p:plain

各種設定を行う

画像をアップロード後,左上のWeb Pageボタンを押して各種設定を行う.

今回は,ほぼデフォルトのまま使ったのだが,画像の配列やサイズを変更したり,Index Page>HTML Design…で文字のフォントや色や,htmlのトップに表示するコンテンツを追記することもできるようであった.

Allボタンを押す

Allボタンを押して,ギャラリーを生成.

完成

以下のようなギャラリーがHTMLで生成される.

f:id:Vastee:20190714195054p:plain

フォルダ構成としては,以下のようになっており,入力画像とサムネイル画像がきれいに整理されて保存されている.

f:id:Vastee:20190714195247p:plain

Arles Image Explorer で生成されたhtmlやアイコンマークは自分で編集可能なため,拡張性もある.

Webページのプロトタイプを作成する際に役に立ちそうなツールだ.

HTML

Posted by vastee