マニュアル キャンセル

Web フォトギャラリーの作成

  1. Photoshop ユーザーガイド
  2. Photoshop の概要
    1. 夢をカタチに
    2. Photoshop の新機能
    3. 初めての写真編集
    4. ドキュメントの作成
    5. Photoshop | よくある質問
    6. Photoshop の必要システム構成
    7. プリセット、アクションおよび設定の移行
    8. Photoshop とは
  3. Photoshop とその他の Adobe 製品およびサービス
    1. Photoshop で Illustrator アートワークを作業する
    2. InDesign での Photoshop ファイルの操作
    3. Photoshop 用 Substance 3D マテリアル
    4. Photoshop と Adobe Stock
    5. Photoshop の Capture アプリ内拡張機能の使用
    6. Creative Cloud ライブラリ
    7. Photoshop の Creative Cloud ライブラリ
    8. Photoshop での Touch Bar の使用
    9. グリッドとガイド
    10. アクションの作成
    11. 取り消しおよびヒストリー
  4. Photoshop iPad 版
    1. Photoshop iPad 版 | よくある質問
    2. ワークスペースについて
    3. システム要件 | Photoshop iPad 版
    4. ドキュメントの作成、表示、書き出し
    5. 写真の追加
    6. レイヤーの操作
    7. ブラシを使った描画とペイント
    8. 範囲の選択とマスクの追加
    9. コンポジットを修正する
    10. 調整レイヤーを使用する
    11. トーンカーブでコンポジットの色調を調整する
    12. 変形操作を適用する
    13. 合成画像の切り抜きと回転
    14. カンバスの回転、パン、ズーム、リセット
    15. テキストレイヤーを使用する
    16. Photoshop と Lightroom の連携
    17. Photoshop iPad 版で環境にないフォントを取得する
    18. Photoshop iPad 版での日本語テキスト
    19. アプリの設定を管理する
    20. タッチショートカットとジェスチャー
    21. キーボードショートカット
    22. 画像サイズを編集する
    23. Photoshop iPad 版での制作過程をライブストリームで配信
    24. 修復ブラシで不具合を修正する
    25. Capture でブラシを作成して Photoshop で使用する
    26. Camera Raw ファイルの操作
    27. スマートオブジェクトの作成と操作
    28. 覆い焼きと焼き込みを使用した画像の露出調整
  5. Photoshop web 版(ベータ版)
    1. よくある質問 | Photoshop web 版(ベータ版) 
    2. ワークスペースの概要
    3. 必要システム構成 | Photoshop web 版(ベータ版)
    4. キーボードショートカット | Photoshop web 版(ベータ版)
    5. サポートされるファイルの種類 | Photoshop web ベータ版
    6. クラウドドキュメントを開いて操作する
    7. 関係者との共同作業
    8. クラウドドキュメントに対する制限付き編集の適用
  6. クラウドドキュメント
    1. Photoshop クラウドドキュメント | よくある質問
    2. Photoshop クラウドドキュメント | ワークフローに関する質問
    3. Photoshop でのクラウドドキュメントの管理と操作
    4. Photoshop 用クラウドストレージのアップグレード
    5. クラウドドキュメントを作成または保存できない
    6. Photoshop クラウドドキュメントのエラーを解決する
    7. クラウドドキュメントの同期ログの収集
    8. アクセスを共有してクラウドドキュメントを編集
    9. アプリ内でファイルとコメントを共有する
  7. ワークスペース
    1. ワークスペースの基本
    2. Photoshop の検索パネルで学習を高速化
    3. ドキュメントの作成
    4. Photoshop での Touch Bar の使用
    5. ツールギャラリー
    6. パフォーマンス環境設定
    7. ツールの使用
    8. タッチジェスチャー
    9. タッチ機能とカスタマイズ可能なワークスペース
    10. テクノロジープレビュー
    11. メタデータと注釈
    12. 初期設定のショートカットキー
    13. タッチ機能とカスタマイズ可能なワークスペース
    14. ほかのアプリケーションへの Photoshop 画像の配置
    15. 環境設定
    16. 初期設定のショートカットキー
    17. 定規
    18. プリントしないエクストラの表示または非表示
    19. 画像のコラムの指定
    20. 取り消しおよびヒストリー
    21. パネルとメニュー
    22. ファイルの配置
    23. スナップを使用した要素の配置
    24. ものさしツールを使用した配置
    25. プリセット
    26. キーボードショートカットのカスタマイズ
    27. グリッドとガイド
  8. Web、画面、アプリデザイン
    1. デザインに最適な Photoshop
    2. アートボード
    3. デバイスプレビュー
    4. レイヤーから CSS をコピー
    5. Web ページのスライス
    6. スライスの HTML オプション
    7. スライスのレイアウトの変更
    8. Web グラフィックの使用
    9. Web フォトギャラリーの作成
  9. 画像とカラーの基本
    1. 画像のサイズを変更する方法
    2. ラスター画像とベクトル画像の操作
    3. 画像サイズと解像度
    4. カメラやスキャナーからの画像の取り込み
    5. 画像を作成、開く、読み込む
    6. 画像の表示
    7. 無効な JPEG マーカーエラー | 画像を開く
    8. 複数の画像の表示
    9. カラーピッカーとスウォッチのカスタマイズ
    10. ハイダイナミックレンジ(HDR)画像
    11. 画像のカラーの適用
    12. カラーモードの変換
    13. カラーモード
    14. 画像の一部の消去
    15. 描画モード
    16. カラーの選択
    17. インデックスカラーのカラーテーブルのカスタマイズ
    18. 画像情報
    19. ゆがみフィルターが使用できない
    20. カラーについて
    21. チャンネルを使用したカラーおよびモノクロの補正
    22. カラーパネルとスウォッチパネルでのカラーの選択
    23. サンプル
    24. カラーモードまたは画像モード
    25. 色かぶり
    26. アクションへの条件付きモード変更の追加
    27. HTML CSS と SVG からスウォッチを追加
    28. ビット数と環境設定
  10. レイヤー
    1. レイヤーの基本
    2. 非破壊編集
    3. レイヤーとグループの作成および管理
    4. レイヤーの選択、グループ化、リンク
    5. 画像をフレームに配置する
    6. レイヤーの不透明度と描画
    7. レイヤーのマスク
    8. スマートフィルターの適用
    9. レイヤーカンプ
    10. レイヤーの移動、重なり順の変更およびロック
    11. ベクトルマスクによるレイヤーのマスク
    12. レイヤーとグループの管理
    13. レイヤー効果とレイヤースタイル
    14. レイヤーマスクの編集
    15. アセットを抽出
    16. クリッピングマスクを使用したレイヤーの表示
    17. レイヤーからの画像アセットの生成
    18. スマートオブジェクトの操作
    19. 描画モード
    20. 複数の画像のグループ写真への合成
    21. レイヤーを自動合成を使用して画像を結合
    22. レイヤーの整列と分布
    23. レイヤーから CSS をコピー
    24. レイヤーまたはレイヤーマスクの境界線からの選択範囲の読み込み
    25. ノックアウトして他のレイヤーからコンテンツを表示
    26. レイヤー
    27. レイヤーの統合
    28. 合成
    29. 背景色
  11. 選択範囲
    1. 選択とマスクワークスペース
    2. クイック選択の実行
    3. 選択の基本を学ぶ
    4. 選択ツールによる選択
    5. なげなわツールによる選択
    6. 画像内のカラーの範囲の選択
    7. ピクセル選択範囲の補正
    8. パスと選択範囲の境界線の変換
    9. チャンネルの基本
    10. 選択したピクセルの移動、コピー、削除
    11. 一時的なクイックマスクの作成
    12. 選択範囲とアルファチャンネルマスクの保存
    13. 画像の焦点領域の選択
    14. チャンネルの複製、分割、および統合
    15. チャンネルの演算
    16. 選択範囲
    17. バウンディングボックス
  12. 画像調整
    1. 遠近法ワープ
    2. カメラの振動によるぶれの軽減
    3. 修復ブラシの使用例
    4. カラールックアップテーブルの書き出し
    5. 画像のシャープとぼかしの調整
    6. カラー調整について
    7. 「明るさ・コントラスト」補正の適用
    8. シャドウとハイライトのディテールの調整
    9. レベル補正
    10. 色相と彩度の調整
    11. 自然な彩度の調整
    12. 画像領域内のカラーの彩度の調整
    13. 色調のクイック補正
    14. 画像への特殊なカラー効果の適用
    15. カラーバランスの補正による画像の演出
    16. ハイダイナミックレンジ(HDR)画像
    17. ヒストグラムとピクセル値の表示
    18. 画像のカラーの適用
    19. 写真を切り抜きおよび角度補正する方法
    20. カラー画像の白黒画像への変換
    21. 調整レイヤーと塗りつぶしレイヤー
    22. トーンカーブの補正
    23. 描画モード
    24. 出力用画像のターゲット指定
    25. レベル補正およびトーンカーブスポイトツールを使用したカラーと色調の補正
    26. HDR の露光量とトーンの調整
    27. フィルター
    28. ぼかし
    29. 画像領域の覆い焼きまたは焼き込み
    30. 特定色域の色調の補正
    31. オブジェクトカラーの置き換え
  13. Adobe Camera Raw
    1. Camera Raw の必要システム構成
    2. Adobe Camera Raw の新機能
    3. Camera Raw の紹介
    4. パノラマの作成
    5. サポート対象レンズ
    6. Camera Raw の周辺光量補正、粒状、かすみの除去の効果
    7. 初期設定のショートカットキー
    8. Camera Raw の自動的な遠近法の補正
    9. Camera Raw で非破壊的な編集を行う方法
    10. Camera Raw の円形フィルター
    11. Camera Raw 設定の管理
    12. Camera Raw での画像のオープン、処理、および保存
    13. Camera Raw の強化されたスポット除去ツールで画像を修復
    14. 画像の回転、切り抜きおよび調整
    15. Camera Raw でのカラーレンダリングの調整
    16. 機能の概要 | Adobe Camera Raw | 2018 年リリース
    17. 新機能の概要
    18. Camera Raw のプロセスバージョン
    19. Camera Raw での部分補正
  14. 画像の修復および復元
    1. コンテンツに応じた塗りつぶしを使用して写真からオブジェクトを削除
    2. コンテンツに応じたパッチと移動
    3. 写真のレタッチと修復
    4. 画像のゆがみとノイズの修正
    5. 多くの問題を解決するための基本的なトラブルシューティング手順
  15. 画像変換
    1. オブジェクトの変形
    2. 切り抜き、回転およびカンバスサイズを調整
    3. 写真を切り抜きおよび角度補正する方法
    4. パノラマ画像の作成と編集
    5. 画像、シェイプ、パスのワープ
    6. Vanishing Point
    7. ゆがみフィルターの使用
    8. コンテンツに応じた拡大・縮小
    9. 画像、シェイプ、パスの変形
    10. ワープ
    11. 変形
    12. パノラマ
  16. 描画とペイント
    1. 対称パターンのペイント
    2. 長方形の描画とストロークオプションの変更
    3. 描画の概要
    4. シェイプの描画と編集
    5. ペイントツール
    6. ブラシの作成と修正
    7. 描画モード
    8. パスへのカラーの追加
    9. パスの編集
    10. 混合ブラシによるペイント
    11. ブラシプリセット
    12. グラデーション
    13. グラデーション補間
    14. 選択範囲、レイヤーおよびパスの塗りつぶしおよび境界線の描画
    15. ペンツールによる描画
    16. パターンの作成
    17. パターンメーカーを使用したパターンの生成
    18. パスの管理
    19. パターンライブラリとプリセットの管理
    20. グラフィックタブレットによる描画またはペイント
    21. テクスチャブラシの作成
    22. ブラシへの動的な要素の追加
    23. グラデーション
    24. アートヒストリーブラシによる、スタイル化されたストロークのペイント
    25. パターンによるペイント
    26. 複数のデバイスでのプリセットの同期
  17. テキスト
    1. テキストの追加と編集
    2. 統合テキストエンジン
    3. OpenType SVG フォントの操作
    4. 文字の書式設定
    5. 段落の書式設定
    6. テキスト効果の作成方法
    7. テキストの編集
    8. 行と文字の間隔
    9. アラビア語およびヘブライ語のテキスト
    10. フォント
    11. フォントのトラブルシューティング
    12. 日本語、中国語、韓国語のテキスト
    13. テキストの入力
    14. Photoshop で文字ツールを使用したときのテキストエンジンエラー | Windows 8
  18. ビデオとアニメーション
    1. Photoshop でのビデオの編集
    2. ビデオおよびアニメーションレイヤーの編集
    3. ビデオとアニメーションの概要
    4. ビデオとアニメーションのプレビュー
    5. ビデオレイヤーのフレームのペイント
    6. ビデオファイルと画像シーケンスの読み込み
    7. フレームアニメーションの作成
    8. Creative Cloud 3D アニメーション(プレビュー)
    9. タイムラインアニメーションの作成
    10. ビデオ用の画像の作成
  19. フィルターと効果
    1. ゆがみフィルターの使用
    2. ぼかしギャラリーの使用
    3. フィルターの基本
    4. フィルター効果リファレンス
    5. 照明効果の追加
    6. 広角補正フィルターの使用
    7. 油彩フィルターの使用
    8. レイヤー効果とレイヤースタイル
    9. 特定フィルターの適用
    10. 画像領域をこする
  20. 保存と書き出し
    1. Photoshop でのファイルの保存
    2. Photoshop でのファイルの書き出し
    3. サポートされているファイル形式
    4. グラフィック形式でのファイルの保存
    5. Photoshop と Illustrator 間でのデザインの移動
    6. ビデオとアニメーションの保存と書き出し
    7. PDF ファイルを保存
    8. Digimarc 著作権保護
  21. プリント
    1. 3D オブジェクトのプリント
    2. Photoshop を使用したプリント
    3. カラーマネジメントを使用したプリント
    4. コンタクトシートと PDF プレゼンテーション
    5. ピクチャパッケージレイアウトでの写真のプリント
    6. スポットカラーのプリント
    7. ダブルトーン
    8. 業務用プリンターでの画像のプリント
    9. Photoshop からのカラー印刷の改善
    10. 印刷問題のトラブルシューティング | Photoshop
  22. 自動化
    1. アクションの作成
    2. データ駆動型グラフィックの作成
    3. スクリプト
    4. ファイルのバッチ処理
    5. アクションの再生と管理
    6. 条件付きアクションの追加
    7. アクションおよびアクションパネルについて
    8. アクションへのツールの記録
    9. アクションへの条件付きモード変更の追加
    10. プラグインとスクリプト用の Photoshop UI ツールキット
  23. カラーマネジメント
    1. カラーマネジメントの設定
    2. 一貫した色の保持
    3. カラー設定
    4. カラープロファイルの操作
    5. オンライン表示用ドキュメントのカラーマネジメント
    6. 印刷時におけるドキュメントのカラーマネジメント
    7. 読み込んだ画像のカラーマネジメント
    8. 色の校正
  24. コンテンツ認証情報
    1. コンテンツ認証情報の詳細
    2. NFT の ID と来歴
    3. クリエイティブ属性のアカウントの接続
  25. 3D と技術的な画像の処理
    1. Photoshop の 3D 機能 | 廃止された 3D 機能に関するよくある質問
    2. Creative Cloud 3D アニメーション(プレビュー)
    3. 3D オブジェクトのプリント
    4. 3D ペイント
    5. 3D パネルの拡張機能 | Photoshop
    6. 3D の基本概念とツール
    7. 3D レンダリングと保存
    8. 3D オブジェクトおよび 3D アニメーションの作成
    9. 画像のスタック
    10. 3D ワークフロー
    11. 計測
    12. DICOM ファイル
    13. Photoshop と MATLAB
    14. 画像内のオブジェクトのカウント
    15. 3D オブジェクトの結合と変換
    16. 3D テクスチャ編集
    17. HDR の露光量とトーンの調整
    18. 3D パネルの設定
注意:

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

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

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

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

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

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

Web フォトギャラリーの作成

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 フォトギャラリーのオプションの「画像」にある「画像のサイズ変更」はオフにしてください。

Web フォトギャラリーのオプション

一般

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

拡張子

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

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

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

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

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

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

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

バナー

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

サイト名

ギャラリーの名前。

作成者

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

問い合わせ先

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

日付

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

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

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

画像

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

数値リンクを追加

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

画像のサイズ変更

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

注意:

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

枠線のサイズ

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

タイトルに使用

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

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

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

サムネール

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

サイズ

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

列数、行数

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

枠線のサイズ

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

タイトルに使用

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

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

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

カスタムカラー

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

セキュリティ

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

コンテンツ

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

フォント、カラー、位置

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

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

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

Web フォトギャラリースタイル

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 フォトギャラリースタイルのカスタマイズについて

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 コードと変数を追加できます。すべての変数には大文字を使用し、最初と最後にパーセント記号(%)を付けます。

Web フォトギャラリースタイルのカスタマイズまたは作成

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

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

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

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

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

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

    注意:

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

Web フォトギャラリースタイルの変数

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%

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

アドビのロゴ

アカウントにログイン