注意:

Photoshop CS5 で Web ギャラリーを作成する方法については、Adobe Bridge ヘルプの Web フォトギャラリーの作成を参照してください。以下のトピックで説明する過去のオプションの Web フォトギャラリープラグインを使用する場合は、まず Windows 用または Mac OS 用のプラグインをダウンロードしてインストールしてください。

Web フォトギャラリーについて

Web フォトギャラリーとは、サムネール画像が表示されるホームページと、フルサイズ画像が表示されるギャラリーページとで構成される Web ページを作る機能です。どちらのページにも、Web ユーザーがサイト内を移動するためのリンクが設定されています。例えば、ビジターがホームページのサムネール画像をクリックすると、そのサムネールに対応するフルサイズ画像のギャラリーページが読み込まれます。画像のセットから Web フォトギャラリーを自動的に生成するには、「Web フォトギャラリー」コマンドを使用します。

Photoshop Web フォトギャラリーのホームページ
Web フォトギャラリーのホームページ

Photoshop には、ギャラリーに使用できる多種多様なスタイルが用意されています。これらのスタイルを選択するには、「Web フォトギャラリー」コマンドを使用します。HTML に精通しているユーザーなら、一連の HTML テンプレートファイルを編集して新しいスタイルを作成したり、スタイルをカスタマイズすることもできます。

ギャラリースタイルのテンプレートごとにオプションが異なります。プリセットされたスタイルを使用している場合、スタイルによっては一部のオプションがグレー表示され、利用できないことがあります。

Adobe Bridge を使用した Web ギャラリーの作成

Adobe Bridge では新しい Web ギャラリー機能を提供しています。手順については、Adobe Bridge ヘルプでWeb フォトギャラリーの作成を参照するか、以下のチュートリアルを参照してください。

従来のオプションの Photoshop プラグイン

  1. Windows 用または Mac OS 用の過去の Web フォトギャラリープラグインをダウンロードしてインストールしてください。

  2. (オプション)Adobe Bridge で、使用するファイルまたはフォルダーを選択します。

    画像は、Bridge に表示されている順で表示されます。表示順を変更する場合は、Bridge 内で順番を変更します。

  3. 次のいずれかの操作を行います。

    • Adobe Bridge で、ツール/Photoshop/Web フォトギャラリーを選択します。

    • Photoshop で、ファイル/自動処理/Web フォトギャラリーを選択します。

  4. スタイルポップアップメニューからギャラリーのスタイルを選択します。ホームページのプレビューがダイアログボックスに表示されます。

  5. (オプション)ギャラリーの問い合わせ先情報として、電子メールアドレスを入力します。

  6. 使用ポップアップメニューから、ギャラリーのソースファイルを選択します。

    Bridge から選択した画像

    Web フォトギャラリーダイアログボックスを開く前に Bridge で選択した画像を使用します。

    フォルダー

    「参照」ボタン(Windows)または「選択」ボタン(Mac OS)を使用して選択したフォルダーの画像を使用します。「サブフォルダーをすべて含める」を選択して、選択したフォルダーのすべてのサブフォルダーに含まれる画像を追加することもできます。

  7. 「保存先」をクリックし、ギャラリーの画像と HTML ページを保存するフォルダーを選択します。「OK」(Windows)または「開く」(Mac OS)をクリックします。

  8. Web ギャラリーの書式設定オプションを選択します。オプションポップアップメニューで、オプション別の設定を行います。詳しくは、Web フォトギャラリーのオプションを参照してください。

  9. 「OK」をクリックします。Photoshop では、保存先のフォルダーに、次の HTML ファイルと JPEG ファイルが配置されます。

    • 「拡張子」オプションに従って index.htm または index.html という名前が付けられたギャラリーのホームページ。ギャラリーをプレビューするには、このファイルを Web ブラウザーで開きます。

    • JPEG 画像が格納される images サブフォルダー。

    • HTML ページが格納される pages サブフォルダー。

    • JPEG サムネール画像が格納される thumbnails サブフォルダー。

カラーの一致の確認

ProPhoto RGB や Adobe RGB などの色域が広い作業用スペースで写真を処理する場合、埋め込みカラープロファイルを読み取ることができないブラウザーで Web ギャラリーを表示したときに画像のカラーが変化する可能性があります。このような場合は、画像のプロファイルを sRGB(ほとんどのブラウザーで初期設定として使用される)に変換してから、最適化したり、Web フォトギャラリーに含めたりしてください。次のいずれかの方法でプロファイルを sRGB に変換します。この場合、画像のコピーを作成して使用することをお勧めします。

イメージプロセッサーを使用すると、ファイルを必要なサイズで直接 JPEG 形式に保存することができます。その場合、Web フォトギャラリーのオプションの「画像」にある「画像のサイズ変更」はオフにしてください。

一般

ファイル拡張子、エンコーディングおよびメタデータに関するオプション。

拡張子

ファイル名の拡張子として .htm または .html を使用します。

URL に UTF 8 エンコーディングを使用

UTF-8 エンコーディングを使用します。

画像の幅と高さの属性を追加

HTML 上でサイズを指定し、ダウンロード時間を短縮します。

すべてのメタデータを保持

メタデータ情報を保持します。

バナー

ギャラリーの各ページに表示するバナーのテキストオプション。次の各項目にテキストを入力します。

サイト名

ギャラリーの名前。

作成者

ギャラリーの写真のクレジットに載せる個人または組織の名前。

問い合わせ先

電話番号や所在地など、ギャラリーに関する情報の問い合わせ先。

日付

ギャラリーの各ページに表示する日付。初期設定では、現在の日付が使用されます。

フォント、フォントサイズ

(一部のサイトスタイルで使用可能)バナーテキストのオプション。

画像

ギャラリーの各ページに表示するメイン画像のオプション。

数値リンクを追加

(一部のサイトスタイルで使用可能)各ギャラリーページの上部に横書きで、1 から始まり、ギャラリーの総ページ数で終わる連番を配置します。各数値はそれぞれのページへのリンクです。

画像のサイズ変更

ギャラリーページに配置するソース画像のサイズを変更します。ポップアップメニューからサイズを選択するか、ピクセル単位でサイズを入力します。「固定」では、サイズを変更するときに固定する画像の方向を指定します。「JPEG 画質」で、ポップアップメニューからオプションを選択するか、0 ~ 12 の値を入力します。または、スライダーをドラッグします。値が高いほど、画質が向上し、ファイルが大きくなります。

注意:

Photoshop では、環境設定で設定された初期設定の画像補間方式を使用します。画像サイズを縮小する際の初期設定では「バイキュービック法」が選択されています。

枠線のサイズ

画像の枠線の幅をピクセル単位で指定します。

タイトルに使用

(一部のサイトスタイルで使用可能)各画像の下にキャプションを表示するためのオプションを指定します。ファイル名を表示するには「ファイル名」を、ファイル情報ダイアログボックスの説明テキストを表示するには、「説明」、「クレジット」、「タイトル」および「著作権」を選択します。

フォント、フォントサイズ

(一部のサイトスタイルで使用可能)キャプションのフォントとサイズを指定します。

サムネール

サムネール画像のサイズなど、ギャラリーのホームページに関するオプション。

サイズ

サムネールのサイズを指定します。ポップアップメニューからサムネールサイズのオプションを選択するか、各サムネールの幅をピクセル単位で入力します。

列数、行数

ホームページに表示するサムネールの列数と行数を指定します。このオプションは、横フレームまたは縦フレームスタイルを使用しているギャラリーには適用されません。

枠線のサイズ

各サムネールの枠線の幅をピクセル単位で指定します。

タイトルに使用

(一部のサイトスタイルで使用可能)各サムネールの下にキャプションを表示するためのオプションを指定します。ファイル名を表示するには「ファイル名」を、ファイル情報ダイアログボックスの説明テキストを表示するには、「説明」、「クレジット」、「タイトル」および「著作権」を選択します。

フォント、フォントサイズ

(一部のサイトスタイルで使用可能)キャプションのフォントとサイズを指定します。

カスタムカラー

ギャラリーの要素のカラーに関するオプション。要素のカラーを変更するには、各項目のカラーボックスをクリックして Adobe カラーピッカーから新しいカラーを選択します。各ページの背景色(「背景」オプション)やバナーの色(「バナー」オプション)を変更することができます。

セキュリティ

各画像の上に盗用を防止するテキストを表示します。

コンテンツ

表示するテキストを指定します。カスタマイズしたテキストを入力するには、「カスタムテキスト」を選択します。ファイル情報ダイアログボックスのテキストを表示するには、「ファイル名」、「説明」、「クレジット」、「タイトル」、「著作権」を選択します。

フォント、カラー、位置

キャプションのフォント、カラー、配置を指定します。

3D オブジェクト回転ツール

画像上に配置するテキストに角度を付けます。

注意:

Photoshop CS5 で Web ギャラリーを作成する方法については、Adobe Bridge ヘルプの Web フォトギャラリーの作成を参照してください。以下で説明する過去のオプションの Web フォトギャラリープラグインを使用する場合は、まず Windows 用または Mac OS 用のプラグインをダウンロードしてインストールしてください。

Photoshop は、Web フォトギャラリーを様々なスタイルで提供します。HTML に精通している方は、一連の HTML テンプレートファイルを編集して新しいスタイルを作成したり、スタイルをカスタマイズすることもできます。

Photoshop 付属の Web フォトギャラリースタイルは、次のパスのフォルダーに個別に格納されています。

Windows

Program Files/Adobe/Adobe Photoshop CS5/Presets/Web Photo Gallery

Mac OS

Adobe Photoshop CS5/Presets/Web Photo Gallery

上記パスに位置するフォルダー名は、Web フォトギャラリーダイアログボックスのスタイルメニューに、オプションとして表示されます。各フォルダーには、Photoshop のギャラリーの生成に使用される、次の HTML テンプレートファイルが含まれています。

Caption.htm

ホームページの各サムネールの下に表示するキャプションのレイアウトを決定します。

FrameSet.htm

ページの表示に使用されるフレームセットのレイアウトを決定します。

IndexPage.htm

ホームページのレイアウトを決定します。

SubPage.htm

フルサイズの画像が含まれるギャラリーページのレイアウトを決定します。

Thumbnail.htm ホームページに表示するサムネールのレイアウトを決定します。

それぞれのテンプレートファイルには、HTML コードと変数が格納されます。変数とは、Web フォトギャラリーダイアログボックスで対応するオプションを設定したときに置き換わるテキストストリングです。例えば、テンプレートファイルに、囲まれたテキストとして変数を使用する次のような TITLE エレメントが含まれているとします。

<TITLE>%TITLE%</TITLE>

Photoshop は、このテンプレートファイルでギャラリーを生成するときに、変数 %TITLE% を、Web フォトギャラリーダイアログボックスの「サイト名」に入力されたテキストに置き換えます。

HTML エディターで HTML テンプレートファイルを開くと、既存のスタイルをより詳しく知ることができます。HTML ドキュメントの作成には標準の ASCII 文字だけが使用されるので、これらのドキュメントを開いたり、編集または作成を行ったりするには、ノートパッド(Windows)またはテキストエディット(Mac OS)などの標準のテキストエディターを使用できます。

Web フォトギャラリースタイルは、HTML テンプレートファイルを編集することによってカスタマイズできます。スタイルをカスタマイズする際は、Photoshop でギャラリーが正しく生成されるよう、次のガイドラインに従ってください。

  • スタイルフォルダーには、Caption.htm、IndexPage.htm、SubPage.htm、Thumbnail.htm、FrameSet.htm が含まれている必要があります。

  • スタイルフォルダーの名前は変更できますが、このフォルダー内の HTML テンプレートファイルの名前は変更できません。

  • Caption.htm ファイルを空のまま保持し、キャプションのレイアウトを決める HTML コードと変数を Thumbnail.htm ファイルに格納することができます。

  • テンプレートファイルの変数を適切なテキストまたは HTML コードに置き換えることができるので、オプションは、Web フォトギャラリーダイアログボックスを使用しなくてもテンプレートファイルから設定できます。例えば、変数を値として使用する、次のような背景色属性を持つ BODY エレメントがテンプレートファイルに存在するとします。

    bgcolor=%BGCOLOR%

    ページの背景色を赤に設定するには、変数 %BGCOLOR% を「FF0000」に置き換えます。

  • テンプレートファイルには、HTML コードと変数を追加できます。すべての変数には大文字を使用し、最初と最後にパーセント記号(%)を付けます。

  1. 既存の Web フォトギャラリースタイルが格納されているフォルダーを探します。
  2. 次のいずれかの操作を行います。
    • スタイルをカスタマイズするには、スタイルフォルダーのコピーを作成し、既存のスタイルフォルダーと同じ場所に格納します。

    • 新しいスタイルを作成するには、新しいスタイル用のフォルダーを新規作成し、既存のスタイルフォルダーと同じ場所に格納します。

    新規作成またはカスタマイズしたスタイルは、そのフォルダー名で、Web フォトギャラリーダイアログボックスのスタイルメニューに表示されます。

  3. HTML エディターを使用して、次のいずれかの操作を行います。
    • HTML テンプレートファイルをカスタマイズします。

    • 必要な HTML テンプレートファイルを作成し、スタイルフォルダー内に格納します。

    テンプレートファイルを作成するときは、Web フォトギャラリースタイルのカスタマイズについてで説明するカスタマイズのガイドラインに必ず従ってください。

    注意:

    ギャラリースタイルのテンプレートをカスタマイズまたは作成する際は、%CURRENTINDEX%、%NEXTIMAGE%、%NEXTINDEX%、%PAGE%、%PREVIMAGE%、%PREVINDEX% の各変数を、それぞれ行を分け 1 行ずつ HTML ファイル上に配置します。ギャラリーの特定のページだけを生成する場合、Photoshop では、それらのページに適用されない変数が含まれるテンプレート内の行が省略されます。例えば、Photoshop で最初のギャラリーページを生成するとき、直前のギャラリーページのリンクを決定する %PREVIMAGE% 変数は不要なので、この変数が含まれるテンプレートの行が省略されます。%PREVIMAGE% 変数を別の行に分けて配置しておけば、テンプレートの他の変数が無視されることはありません。

Photoshop では、HTML テンプレートファイルの変数を使用して、初期設定の Web フォトギャラリースタイルを定義します。これらの変数によって、Web フォトギャラリーダイアログボックスのユーザー入力に基づいて、ギャラリーが生成されます。

ギャラリースタイルを作成またはカスタマイズするときは、HTML テンプレートファイルに任意の変数を追加できます。ただし、例外として、%THUMBNAILS% と %THUMBNAILSROWS% は IndexPage.htm ファイル以外に追加することはできません。変数を追加する際は、変数が正しく使用されるように、HTML コードもファイルに追加する必要があることを忘れないでください。

HTML テンプレートファイルには、次の変数を使用できます。

%ALINK%

アクティブなリンクのカラーを決定します。

%ALT%

画像ファイルの名前を決定します。

%ANCHOR%

インデックスの先頭ではなく、ユーザーが表示している画像のサムネールに戻れるようにします。ユーザーが Home ボタンをクリックしたときに実行されます。

%BANNERCOLOR%

バナーの色を決定します。

%BANNERFONT%

バナーテキストのフォントを決定します。

%BANNERFONTSIZE%

バナーテキストのフォントサイズを決定します。

%BGCOLOR%

背景色を決定します。

%CAPTIONFONT%

ホームページの各サムネールの下に表示するキャプションのフォントを決定します。

%CAPTIONFONTSIZE%

キャプションのフォントサイズを決定します。

%CAPTIONTITLE%

キャプションのドキュメントタイトルをファイル情報から挿入します。

%CHARSET%

各ページに使用される文字セットを決定します。

%CONTACTINFO%

電話番号や住所など、ギャラリーに関する問い合わせ先情報を決定します。

%CONTENT_GENRATOR%

Adobe Photoshop CS5 Web フォトギャラリーに拡張します。

%COPYRIGHT%

キャプションの著作権情報をファイル情報から挿入します。

%CREDITS%

キャプションのクレジットをファイル情報から挿入します。

%CURRENTINDEX%

現在のホームページのリンクを決定します。

%CURRENTINDEXANCHOR%

SubPage.htm 内から最初のインデックスページをポイントします。

%DATE%

バナーに表示する日付を決定します。

%EMAIL%

ギャラリーに関する問い合わせ先の電子メールアドレスを決定します。

%FILEINFO%

キャプション用の説明をファイル情報から挿入します。

%FILENAME%

画像のファイル名を決定します。HTML テキストとして表示するメタデータに使用します。

%FILENAME_URL%

画像の URL 上のファイル名を決定します。URL 上のファイル名にのみ使用します。

%FIRSTPAGE%

フレームセットの右のフレームに表示する最初のギャラリーページのリンクを決定します。

%FRAMEINDEX%

フレームセットの左のフレームに表示するホームページのリンクを決定します。

%HEADER%

ギャラリーのタイトルを決定します。

%IMAGEBORDER%

ギャラリーページに表示するフルサイズの画像の枠線のサイズを決定します。

%IMAGE_HEIGHT%

「画像の幅と高さの属性を追加」チェックボックスを有効にします。属性をダウンロードできるようになり、ダウンロード時間が短縮されます。

%IMAGE_HEIGHT_NUMBER%

この変数は、画像の幅を表す数値(のみ)に置き換えられます。

%IMAGEPAGE%

ギャラリーページへのリンクを決定します。

%IMAGE_SIZE%

「画像のサイズ変更」チェックボックスがオンの場合、この変数には「大きな画像」パネルの画像ピクセル値が入ります。このチェックボックスがオフの場合、この変数は空の文字列になります。テンプレートの JavaScript でこの変数を使用すると、生成したサイトのすべての画像の最大の高さと幅を表示することができます。

%IMAGESRC%

ギャラリーページに表示するフルサイズの画像の URL を決定します。

%IMAGE_WIDTH%

「画像の幅と高さの属性を追加」チェックボックスを有効にします。属性をダウンロードできるようになり、ダウンロード時間が短縮されます。

%IMAGE_WIDTH_NUMBER%

この変数は、画像の幅を表す数値(のみ)に置き換えられます。

%LINK%

リンクの色を決定します。

%NEXTIMAGE%

次のギャラリーページのリンクを決定します。

%NEXTIMAGE _CIRCULAR%

大きなプレビュー画像から次の大きなプレビュー画像へのリンクを設定します。

%NEXTINDEX%

次のホームページのリンクを決定します。

%NUMERICLINKS%

サブページに、すべての大きなプレビュー画像への番号付きリンクを挿入します。

%PAGE%

現在のページの位置(1/3 ページなど)を決定します。

%PHOTOGRAPHER%

ギャラリーの写真のクレジットに載せる個人または組織の作成者を決定します。

%PREVIMAGE%

直前のギャラリーページのリンクを決定します。

%PREVINDEX%

直前のホームページのリンクを決定します。

%SUBPAGEHEADER%

ギャラリーのタイトルを決定します。

%SUBPAGETITLE%

ギャラリーのタイトルを決定します。

%TEXT%

テキストカラーを決定します。

%THUMBBORDER%

サムネールの枠線のサイズを決定します。

%THUMBNAIL_HEIGHT%

「画像の幅と高さの属性を追加」チェックボックスを有効にします。属性をダウンロードできるようになり、ダウンロード時間が短縮されます。

%THUMBNAIL_HEIGHT_NUMBER%

この変数は、サムネールの高さを表す数値(のみ)に置き換えられます。

%THUMBNAILS%

この変数は、フレームスタイルの Thumbnail.htm ファイルを使用して、サムネールと置き換わります。この変数は、HTML ファイルの改行のない行に単独で配置します。

%THUMBNAIL_SIZE%

サムネールパネル内のサムネールピクセル値が入ります。テンプレートの JavaScript でこれを指定すると、生成したサイトのすべてのサムネールの最大の高さと幅を表示することができます。

%THUMBNAILSRC%

サムネールへのリンクを決定します。

%THUMBNAILSROWS%

この変数は、非フレームスタイル用の Thumbnail.htm ファイルを使用して、サムネールの列と置き換わります。この変数は、HTML ファイルの改行のない行に単独で配置します。

%THUMBNAIL_WIDTH%

「画像の幅と高さの属性を追加」チェックボックスを有効にします。属性をダウンロードできるようになり、ダウンロード時間が短縮されます。

%THUMBNAIL_WIDTH_NUMBER%

この変数は、サムネールの幅を表す数値(のみ)に置き換えられます。

%TITLE%

ギャラリーのタイトルを決定します。

%VLINK%

既に訪れたリンクのカラーを決定します。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー