ポートフォリオのコレクションとプロジェクトを紹介するページをカスタマイズします。ページ上のパーツを選択し、カスタマイズオプションを試してみましょう。また、エディタの他のページと同様に、パーツを手動で追加または削除することもできます。

Wix ポートフォリオは動的ページで構成されているため、テンプレートページをすべてのプロジェクトに適用することができます。つまり、プロジェクトでパーツを追加または削除すると、それらの画像やテキストボックスの変更もすべてのプロジェクトに適用されます。

ポートフォリオページは以下で構成されています：

ポートフォリオ：コレクションが表示されるメインページ。ポートフォリオのホームページのようなものと考えてください。
コレクションページ：選択したコレクションのすべてのプロジェクトを表示するページ。
プロジェクトページ：各プロジェクトの情報とメディアを表示するページ。

この記事では、以下の項目について説明します：

メインのポートフォリオページをカスタマイズする

ポートフォリオページの背景、ストレッチ設定、ポートフォリオギャラリーを編集します。これは、コレクションを表示するポートフォリオの「ホーム」ページです。表示中のコレクションが 1つしかない場合、このページにはプロジェクトが代わりに表示されます。

ポートフォリオページをカスタマイズする方法：

エディタ左側で「ページ」をクリックします。
「ポートフォリオページ」をクリックし、「ポートフォリオ」ページを選択します。
エディタで「ポートフォリオページ」をクリックします。
実行する内容を選択します：

ポートフォリオページの背景を編集する

ポートフォリオページで「デザイン」アイコンをクリックします。
「背景」を選択します。
ポートフォリオページの背景色、不透明度、枠線、角、および影をカスタマイズします。

ストレッチ設定を行う

ポートフォリオページのパーツをサイトの幅に合わせて引き延ばすか、エディタのグリッド線内にのみ表示されるように設定します。

ポートフォリオページで「ストレッチ」アイコンをクリックします。
トグルをクリックして、パーツの幅を選択します：
- 有効：ポートフォリオページがサイトの幅いっぱいに引き伸ばされます。「パーツ両端の余白」スライダーを使用して、サイトの端からパーツまでの距離を設定します。
- 無効：ポートフォリオページはエディタのグリッド線内に表示され、サイトの幅いっぱいには引き延ばされません。

ポートフォリオギャラリーを編集する

エディタで「ポートフォリオギャラリー」をクリックします。
編集する内容を選択します：
- レイアウト：「レイアウト」をクリックし、レイアウトタイプを選択して「レイアウトを編集」をクリックし、ギャラリーの方向やスクロールの方向などを変更します。注意：ギャラリーの方向を変更すると、表示されるギャラリーアイテムの順序が逆になります。
- アクション：「アクション」アイコンをクリックし、動画再生オプションを設定します。
- デザイン：「デザイン」アイコンをクリックします。次に、「何をデザインしたいですか？」ドロップダウンをクリックして、デザインするギャラリーの箇所を選択します。次の設定から選択してデザインをカスタマイズします：通常時またはホバー状態、背景の塗りつぶし、枠線、影、および角。
- アニメーション：「アニメーション」アイコンをクリックして、訪問者がギャラリーアイテムにマウスオーバーしたり、ページをスクロールダウンしたときに表示されるエフェクトをカスタマイズします。

ポートフォリオページでのコレクションの表示順序を変更する

「コレクションを管理」をクリックします。
コレクションをドラッグ＆ドロップして、ポートフォリオに表示される順序を変更します。

コレクションページをカスタマイズする

訪問者がポートフォリオページからコレクションを選択すると、コレクションページに移動します。これらのページには、すべてのコレクションで同じデザインとレイアウトが表示されます。ウィジェットに表示するパーツを選択し、必要に応じてページをデザインし、プロジェクトを表示するギャラリーをカスタマイズします。

コレクションページをカスタマイズする方法：

エディタ左側で「ページ」をクリックします。
「ポートフォリオページ」をクリックし、「コレクションページ」を選択します。
エディタで「コレクションページ」をクリックします。
実行する内容を選択します：

ウィジェットに表示されるパーツを編集する

パーツ上で「パーツ」アイコンをクリックします。
表示したいパーツ横のチェックボックスをクリックします。

ヒント：ウィジェットでパーツを選択し、キーボードの Delete キーを押すことで、パーツを非表示にすることもできます。再度表示する必要がある場合は、上記の手順に従ってください。

コレクションページのデザインを編集する

「デザイン」アイコンをクリックします。
編集するデザインパーツを選択します：
- タイトル：タイトル設定を編集します：
  - スタイル：タイトルに使用するフォントスタイルを選択します。
  - フォント：使用するフォントを選択します。
  - 文字サイズ：フォントサイズ（ピクセル単位）を選択します。
  - 書式：アイコンを使用してタイトルの書式を設定します。
  - エフェクト：タイトルの影の効果を選択します。
  - 文字と行の間隔：タイトルの文字と行間を選択します。
  - 縦書きテキスト：トグルをクリックして、タイトルを上から下に縦書きにします。
  - SEO・アクセシビリティ：タイトルに使用する HTML タグを選択します。
- 詳細：詳細のスタイル、フォント、書式設定、エフェクト、文字と行の間隔、縦書きテキスト、SEO とアクセシビリティを設定します。
- 「戻る」ボタン：「戻る」ボタンのデザインはパーツ自体に設定されています。エディタで「戻る」ボタンパーツをクリックしてカスタマイズします。
- 背景：背景の色と不透明度、枠線、角、影を設定します。

ヒント：デフォルトのデザイン設定に戻すには、「初期設定に戻す」をクリックします。

ストレッチ設定を行う

コレクションページのパーツをサイトの幅に合わせて引き延ばすか、エディタのグリッド線内にのみ表示されるように設定します。

コレクションページで「ストレッチ」アイコンをクリックします。
トグルをクリックして、パーツの幅を選択します：
- 有効：コレクションページがサイトの幅いっぱいに引き延ばされます。「パーツ両端の余白」スライダーを使用して、サイトの端からパーツまでの距離を設定します。
- 無効：コレクションページはエディタのグリッド線内に表示され、サイトの幅いっぱいには引き延ばされません。

ポートフォリオギャラリーを編集する

エディタで「ポートフォリオギャラリー」をクリックします。
編集する内容を選択します：
- レイアウト：「レイアウト」をクリックし、レイアウトタイプを選択して「レイアウトを編集」をクリックし、ギャラリーの方向やスクロールの方向などを変更します。
  注意：ギャラリーの方向を変更すると、表示されるギャラリーアイテムの順序が逆になります。
- アクション：「アクション」アイコンをクリックし、動画再生オプションを設定します。
- デザイン：「デザイン」アイコンをクリックします。次に、「何をデザインしたいですか？」ドロップダウンをクリックして、デザインするギャラリーの箇所を選択します。次の設定から選択してデザインをカスタマイズします：通常時またはホバー状態、背景の塗りつぶし、枠線、影、および角。
- アニメーション：「アニメーション」アイコンをクリックして、訪問者がギャラリーアイテムにマウスオーバーしたり、ページをスクロールダウンしたときに表示されるエフェクトをカスタマイズします。

コレクションページのポートフォリオギャラリーのカスタマイズオプションのスクリーンショット。

コレクション内のプロジェクトの表示順序を選択する

「コレクションを管理」をクリックします。
該当するコレクションで「管理」をクリックします。
「このコレクション内のプロジェクト」セクションでプロジェクトをドラッグアンドドロップして、コレクションに表示される順序を変更します。
右上の「保存」をクリックします。

プロジェクトページをカスタマイズする

訪問者は、いずれかのプロジェクトをクリックして表示すると、プロジェクトページに移動します。これらのページは、すべてのプロジェクトで同じレイアウトとデザインを共有します。ウィジェットに表示するパーツを選択し、ページのデザインをカスタマイズし、ポートフォリオギャラリーを編集します。

プロジェクトページをカスタマイズする方法：

エディタ左側で「ページ」をクリックします。
「ポートフォリオページ」をクリックし、「プロジェクトページ」を選択します。
エディタで「プロジェクトページ」をクリックします。
実行する内容を選択します：

ウィジェットに表示されるパーツを編集する

パーツ上で「パーツ」アイコンをクリックします。
表示したいパーツ横のチェックボックスをクリックします。

プロジェクトページのデザインを編集する

「デザイン」アイコンをクリックします。
プロジェクトページデザインのプリセットを選択します。選択するプリセットデザインによって、プロジェクトページの各アイテムの配置が決まります。
「デザインをカスタマイズ」をクリックして、デザインをさらに編集します。
編集するデザインパーツを選択します：
- タイトル：タイトル設定を編集します：
  - スタイル：タイトルに使用するフォントスタイルを選択します。
  - フォント：使用するフォントを選択します。
  - 文字サイズ：フォントサイズ（ピクセル単位）を選択します。
  - 書式：アイコンを使用してタイトルの書式を設定します。
  - エフェクト：タイトルの影の効果を選択します。
  - 文字と行の間隔：タイトルの文字と行間を選択します。
  - 縦書きテキスト：トグルをクリックして、タイトルを上から下に縦書きにします。
  - SEO・アクセシビリティ：タイトルに使用する HTML タグを選択します。
- 詳細ラベル：詳細ラベルのスタイル、フォント、書式設定、エフェクト、文字と行の間隔、縦書きテキスト、SEO とアクセシビリティを設定します。
- 詳細テキスト：詳細テキストのスタイル、フォント、書式設定、エフェクト、文字と行の間隔、縦書きテキスト、詳細テキストの SEO とアクセシビリティを設定します。
- 詳細：詳細のスタイル、フォント、書式設定、エフェクト、文字と行の間隔、縦書きテキスト、SEO とアクセシビリティを設定します。
- カバー画像：カバー画像の色と不透明度、枠線、角、影を設定します。
- ページ背景：背景の色と不透明度、枠線、角、影を設定します。
- ナビゲーションボタン：訪問者がプロジェクトの移動に使用するボタンの通常時とホバー状態のデザインオプションをカスタマイズします。

ヒント：デフォルトのデザイン設定に戻すには、「初期設定に戻す」をクリックします。

ストレッチ設定を行う

プロジェクトページのパーツをサイトの幅に合わせて引き延ばすか、エディタのグリッド線内にのみ表示されるように設定します。

プロジェクトページで「ストレッチ」アイコンをクリックします。
トグルをクリックして、パーツの幅を選択します：
- 有効：プロジェクトページがサイトの幅いっぱいに引き延ばされます。「パーツ両端の余白」スライダーを使用して、サイトの端からパーツまでの距離を設定します。
- 無効：プロジェクトページはエディタのグリッド線内に表示され、サイトの幅いっぱいには引き延ばされません。

ポートフォリオギャラリーを編集する

エディタで「ポートフォリオギャラリー」をクリックします。
編集する内容を選択します：
- レイアウト：「レイアウト」をクリックし、レイアウトタイプを選択して「レイアウトを編集」をクリックし、ギャラリーの方向やスクロールの方向などを変更します。
  注意：ギャラリーの方向を変更すると、表示されるギャラリーアイテムの順序が逆になります。
- メディアを管理：ギャラリーに表示する画像や動画を選択したり、メディアをインポートしたりできます。プロジェクトを作成する際に画像を追加する方法はこちら
- 設定：「設定」アイコンをクリックして、アイテムがクリックされた際の動作、画像読み込み中に表示する項目、右クリック保護を使用するかどうかを選択します。
- アクション：「アクション」アイコンをクリックし、動画再生オプションを設定します。
- デザイン：「デザイン」アイコンをクリックします。次に、「何をデザインしたいですか？」ドロップダウンをクリックして、デザインするギャラリーの箇所を選択します。次の設定から選択してデザインをカスタマイズします：通常時またはホバー状態、背景の塗りつぶし、枠線、影、および角。
- アニメーション：「アニメーション」アイコンをクリックして、訪問者がギャラリーアイテムにマウスオーバーしたり、ページをスクロールダウンしたときに表示されるエフェクトをカスタマイズします。