サイトのポートフォリオ ページとプロジェクトをカスタマイズします。

ポートフォリオ ページは、訪問者をプロジェクトとつなげる、定型化されたランディング ページです。ブランドやスタイルに合わせてポートフォリオ ページをカスタマイズできます。このガイドを使用して、ポートフォリオ ページと個々のプロジェクトのスタイル オプションを見つけてください。ポートフォリオ ページを作成してコンテンツを追加するには、「ポートフォリオ ページ」をご覧ください。

ポートフォリオ ページとポートフォリオ プロジェクト

ポートフォリオ ページは2つの部分に分かれています。メインのポートフォリオ ページは、アイキャッチ画像のグリッドや、訪問者がクリックしてポートフォリオを探索するためのリンクのリストを作成し、これらのリンクがコンテンツを追加できる個々のプロジェクトにつながります。

スタイル オプションを開く

ポートフォリオ ページとプロジェクトのスタイルは、次の2つの場所で設定します。

• ポートフォリオ ページ - ポートフォリオ ページで [編集] をクリックし、ポートフォリオ セクションの鉛筆アイコンをクリックします。
• プロジェクト - ポートフォリオ ページのプロジェクトをクリックして開き、[編集] をクリックして、スタイルを設定したいセクションの鉛筆アイコンをクリックします。各プロジェクトはセクションで構成されており、各セクションには独自のスタイル オプションがあります。

ポートフォリオ ページ

ポートフォリオ ページには、すべてのプロジェクトがアイキャッチ画像またはテキスト リンクとして表示され、訪問者はこれをクリックすることで個々のプロジェクトを開くことができます。

ポートフォリオ セクションのスタイルでは、次の詳細をカスタマイズできます。

• 形式 - ポートフォリオ ページのレイアウトを設定します。グリッド レイアウトとホバー レイアウトには、それぞれ独自の形式オプションがあります。
• 背景 - プロジェクトのリンクの後ろに背景画像、背景動画、または背景用アートを追加します。
• 色 - サイトの色を設定したり、ポートフォリオのセクション テーマを変更したりします。

以下の点に留意してください。

• これらの変更は、同じレイアウトを使用するすべてのポートフォリオ ページに影響します。
• 新しいレイアウトに変更しても、特定のレイアウトに加えた変更は保存されるため、前のレイアウトに戻した場合、設定が復元されます。
• ポートフォリオ ページのプロジェクト数によっては、スタイル微調整オプションの一部がレイアウトに影響しない場合もあります。たとえば、多数のプロジェクトを含む [ホバー: 背景] レイアウトの場合、すべてのサブページ リンクを表示するにはセクションの高さが一定以上である必要があるため、高さの微調整オプションを変更しても、目に見える効果が得られない場合があります。そのような場合は、代わりに [リンクの上下の間隔] 微調整オプションをご使用ください。

グリッド レイアウトの形式を設定する

グリッド レイアウトでは、プロジェクトがアイキャッチ画像のグリッドで表示されます。訪問者は画像またはタイトル テキストをクリックしてプロジェクトを開きます。セクション スタイルの [形式] タブのオプションは、選択したグリッド レイアウトによって異なります。

ホバー レイアウトの形式を設定する

ホバー レイアウトでは、プロジェクトがリンクのリストとして表示され、アイキャッチ画像がホバーで表示されます。訪問者はリンクをクリックしてプロジェクトを開きます。セクション スタイルの [形式] タブのオプションは、選択したホバー レイアウトによって異なります。ホバー レイアウトでは、プロジェクトのアイキャッチ画像の上に半透明のオーバーレイが表示されます。これを増やしたり、削除したりすることはできません。

プロジェクトのタイトル テキスト

各プロジェクトのタイトルは、レイアウトに応じて、メイン ポートフォリオ ページのアイキャッチ画像の下に表示されるか、アイキャッチ画像の上に重なって表示されるか、リンクのリストとして表示されます。プロジェクトの設定でタイトル テキストを編集できます。タイトル テキストは、サイト全体のフォントと色のスタイルに従います。

タイトルのフォント

プロジェクト タイトルのフォントのスタイルを設定する方法は次の通りです。

1. ページの編集中に、サイト スタイルを開いて [フォント] をクリックします。
2. [見出し] をクリックします。
3. フォント ファミリーを選択し、他のスタイル設定を変更します。
4. [サイズ] で、対応する見出しスライダーを使用してタイトルのサイズを調整します。

使用するスライダーは、ポートフォリオ ページのレイアウトによって異なります。

• グリッド: シンプル - 見出し4
• グリッド: オーバーレイ - 見出し3
• ホバー レイアウト - 見出し1

見出しの形式を変更すると、その形式が適用されているサイト上のすべてのテキストが変更されます。タイトル テキストのフォントとサイズを個別にスタイル設定するには、[スタイルの割り当て] をクリックし、レイアウトに合った [タイトル] 微調整オプションを見つけて、スタイルとサイズを [カスタム] に変更します。

変更を加えた後、[保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了] をクリックしてから [保存] をクリックしてエディターを閉じます。

タイトルの色

プロジェクト タイトルの色のスタイルを設定する方法は次の通りです。

1. ページの編集中に、サイト スタイルを開いて [色] をクリックします。
2. ポートフォリオ セクションのカラー テーマの鉛筆アイコンをクリックします。
3. 下にスクロールして、レイアウトに合った [ポートフォリオ] セクションを見つけます。
4. [プロジェクト タイトル] 微調整オプションを使用して色を変更します。各ポートフォリオ レイアウトには、独自の [プロジェクト タイトル] 微調整オプションがあります。
5. [保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了] をクリックしてから [保存] をクリックしてエディターを閉じます。

区切り文字

インライン リンクを使用するホバー レイアウトでは、「区切り文字」や句読点を追加してプロジェクトのリンクを視覚的に区切ることができます。

区切り文字を選択または非表示にする方法は以下の通りです。

1. ポートフォリオ ページで [編集] をクリックします。
2. ポートフォリオ セクションにカーソルを合わせ、鉛筆アイコンをクリックします。
3. [形式] タブで、[リンク形式] を [インライン] に設定します。
4. 下にスクロールして [区切り文字] をクリックし、いずれかのオプションを選択するか、[なし] を選択して非表示にします。
5. [保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了] をクリックしてから [保存] をクリックしてエディターを閉じます。

プロジェクト

プロジェクトはページ セクションから作成されるため、スタイル設定オプションは追加するセクションによって異なります。ブロック セクション、ギャラリー セクション、または自動レイアウトを追加できます。

セクションにカーソルを合わせると表示される鉛筆アイコンをクリックして、任意のセクションのスタイルを設定します。詳細については、「スタイルを変更する」を参照してください。

プロジェクトのページ分割

ポートフォリオ内の次および前のサブページへのリンクは、各プロジェクトの下部に表示されます。すべてのポートフォリオ ページは、異なるレイアウトを使用している場合でも、同じページ区切りスタイルを共有します。

ページ分割のフォント

ページ分割のフォントのスタイルを設定する方法は以下の通りです。

1. ページの編集中に、サイト スタイルを開いて [フォント] をクリックします。
2. [見出し] をクリックします。
3. フォント ファミリーを選択し、他のスタイル設定を変更します。
4. [サイズ] の [見出し3] スライダーを使用してタイトルのサイズを調整します。

見出しの形式を変更すると、その形式が適用されているサイト上のすべてのテキストが変更されます。タイトル テキストのフォントとサイズを個別にスタイル設定するには、[スタイルの割り当て] をクリックし、[ポートフォリオ: アイテム] で [ページ分割] 微調整オプションを見つけてスタイルとサイズを [カスタム] に変更します。

変更を加えた後、[保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了] をクリックしてから [保存] をクリックしてエディターを閉じます。

ページ分割の色

ページ分割の色は、各プロジェクトの下部セクションのカラー テーマに従います。プロジェクトの下部セクションで異なるカラー テーマを使用している場合、ページ分割の色はプロジェクトによって異なる場合があります。

ページ分割の色をスタイル設定する方法は以下の通りです。

1. ページの編集中に、サイト スタイルを開いて [色] をクリックします。
2. ポートフォリオ セクションのカラー テーマの鉛筆アイコンをクリックします。
3. 下にスクロールして [ポートフォリオ: アイテム] 微調整オプションを見つけます。
4. タイトル テキストは [プロジェクトのページ分割のタイトル] 微調整オプションで変更し、ページ分割のアイコンは [プロジェクトのページ分割のアイコン] 微調整オプションで変更します。
5. [保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了] をクリックしてから [保存] をクリックしてエディターを閉じます。

同じカラー パレットを使用しているすべてのセクションに変更が適用されます。

フォントと色

ポートフォリオ ページとプロジェクトの色とフォントは、サイト全体の [フォント] および [色] 微調整オプションの設定に従います。セクション スタイル エディターで、ポートフォリオ ページ セクションとプロジェクトのセクションのカラー テーマを変更することもできます。

ポートフォリオのカラー テーマでは、レイアウトに合った [ポートフォリオ] の色微調整オプションをご使用ください。各プロジェクトの最後のセクションのカラー テーマで、[ポートフォリオ: アイテム] 微調整オプションを使用して、各プロジェクトの下部にあるページ分割のスタイルを設定します。これは、下部セクションで使用されているカラー テーマに応じて、プロジェクト間で異なる場合があります。

モバイル

モバイル端末やタブレットにおいて、ポートフォリオ レイアウトは、大きなブラウザーで表示される列数やリンク形式に関係なく、縦1列にスタックされて表示されます。

ホバー効果はほとんどのモバイル ブラウザーではサポートされていないため、[グリッド :オーバーレイ] レイアウトを使用してタイトルを [ホバーの後] に表示するように設定している場合、モバイル端末の訪問者にはタイトルが表示されない場合があります。

[グリッド: オーバーレイ] レイアウトのすべてのデバイスにタイトルを表示させる方法は以下の通りです。

1. ポートフォリオ ページで [編集] をクリックし、ポートフォリオ セクションにカーソルを合わせて、鉛筆アイコンをクリックします。
2. [形式] タブで、[テキストを表示] ドロップダウン メニューから [ホバーの前] を選択します。
3. [保存] をクリックして変更を保存し、そのまま編集を続けるか、[終了] をクリックしてから [保存] をクリックしてエディターを閉じます。