カスタマイズ可能なレイアウトの画像、テキスト、ボタンのセットを使用して、チームやさまざまなプロジェクトを紹介します。

自動レイアウトを使用して、コンテンツのセットを列と行、カルーセル、またはスライドショーに表示します。新しいコンテンツを自動レイアウトに追加すると、選択した設定に基づいて自動的に再配置されます。これにより、注目の商品画像、最近のプロジェクト、現在のチーム メンバー、お客様の声、過去のクライアントなど、定期的に更新するコンテンツに最適な自動レイアウトが可能になります。

このガイドでは、テキストと画像を組み合わせた自動レイアウトに焦点を当てています。同様のレイアウトで主に画像を表示する場合は、代わりにギャラリー セクションを使用します。同様のレイアウトを手動で作成するには、ブロック セクションを使用します。

このガイドはバージョン7.1用です。バージョン7.0で同様の効果を得るには、ブロックがある列と行を作成します。

動画を見る

自動レイアウト セクションを追加

テキストと画像を含む自動レイアウト セクションを追加する方法は次のとおりです。

1. ページ上で [編集] をクリックし、[セクションを追加] をクリックします。
2. [チーム]、[サービス]、または [お客様の声] をクリックします。
3. 右上隅にiアイコンの付いたレイアウトを探し、目的のレイアウトをクリックします。

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

• 画像を紹介する自動レイアウトを追加するには、代わりにギャラリー セクションを追加する手順に従ってください。
• 右上隅にiアイコンがないセクションをクリックすると、ブロック セクションが追加されます。この場合、このガイドの残りの手順は適用されません。ブロック セクションのレイアウトは同様にすることができますが、手動で配置する必要があります。
• 自動レイアウトは他のカテゴリにも表示されますが、[チーム]、[サービス]、[お客様の声] のオプションが最も多くなります。トピックがサイトで求められる内容ではない場合でも、すべてのデモ コンテンツを独自のコンテンツに置き換えます。

表示するエレメントを設定する

セクションとアイテムの表示方法を選択する方法は次のとおりです。

1. セクションにカーソルを合わせ、[コンテンツを編集] をクリックします。
2. [エレメント] タブで、各オプションのトグルをオンまたはオフに切り替えます。

セクション全体については、次のトグルを使用します。

• タイトル - セクションの上部にテキスト タイトルを表示する
• ボタン - セクションの下部にボタン リンクを表示する

アイテムの表示方法を変更するには、次のトグルを使用します。

• 画像を表示 - 各アイテムに画像を表示する
• タイトルを表示 - 各アイテムにタイトルテキストを表示する
• 本文を表示 - 各アイテムに本文を表示する
• ボタンを表示 - 各アイテムにボタンリンクを表示する

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

• これらのオプションは、そのセクションのすべてのアイテムに適用されます。セクション内のアイテムごとに異なる設定を適用することはできません。
• トグルをオフにすると、[コンテンツ] タブの対応するオプションが非表示になります。たとえば、[タイトルを表示] トグルをオフにすると、[タイトル] フィールドはアイテム エディターに表示されません。

アイテムの追加または編集を行う

各自動レイアウトにはデモ用のアイテムが含まれています。これらのアイテムのコンテンツを独自のコンテンツに置き換えることができます。また、削除して新しいアイテムを追加し、最初からやり直すこともできます。

アイテムを追加または編集する方法は以下のとおりです。

1. セクションの上にマウスを置き、[コンテンツを編集] をクリックしてから、[コンテンツ] をクリックします。
2. [アイテム] リストで、アイテムをクリックしてそのコンテンツを編集するか、[追加] をクリックして新しいアイテムを追加します。
3. アイテムを並べ替えるには、[::] アイコンをクリックしてアイテムのタイトルの右にドラッグします。
4. アイテムを削除するには、アイテムの右側にあるゴミ箱アイコンをクリックします。

各アイテムには、画像、タイトル、説明、ボタンを含めることができます。アイテムをクリックしたときにこれらのオプションのいずれかが表示されない場合は、[エレメント] タブでそれらのオプションが有効になっていることを確認してください。

アイテムにタイトルを付けない場合、「Item 1」や「Item 2」のように、自動レイアウトでの順序に基づいてエディターに既定のタイトルが表示されます。既定のタイトルは訪問者には表示されません。アイテムにタイトルを付けるには、アイテムをクリックし、[タイトル] フィールドにタイトルを入力します。

ヒント: 自動レイアウトにすべてのアイテムとそのエレメントを手動で追加します。サイト上の既存のコレクションのコレクション アイテムを表示する場合は、代わりに概要ブロックを使用してください。

セクションのタイトルとボタンを編集する

[コンテンツ] タブでは、セクション全体のタイトルとボタンを編集することもできます。タイトルがセクションの上部に表示され、ボタンが下部に表示されます。これらの追加と編集を行う方法は次のとおりです。

1. [エレメント] タブで、[タイトル] と [ボタン] のトグルがオンになっていることを確認します。
2. [コンテンツ] タブで、[タイトル] をクリックしてテキストを追加し、配置を変更します。
3. ボタンのテキストを編集し、リンクを設定し、ボタンのサイズと配置を変更するには、[ボタン] をクリックします。

これらのエレメントのいずれかを非表示にするには、[エレメント] タブで無効にします。

自動レイアウトのデザインを変更する

セクションのレイアウトを変更する方法は以下のとおりです。

1. セクションにカーソルを合わせて [コンテンツを編集] をクリックし、[デザイン] をクリックします。
2. レイアウトを変更するには、上部のドロップダウン メニューをクリックします。

次の3つのレイアウトから選択できます。

• シンプルなリスト - 左から右へ一列にアイテムとそのエレメントを表示します。設定とアイテムの数によっては、レイアウトで最初の行の下にさらに多くの行が作成される場合があります。
• バナー スライドショー - 一度にアイテムを1つずつ表示し、画像の上にエレメントを重ねます。画像はセクションの背景として機能します。訪問者は、コントロールをクリックしてアイテムをスクロールします。
• カルーセル - アイテムとそのエレメントを左から右へ一列に、回転するカルーセルで表示します。訪問者は、コントロールをクリックしてスクロールすると、アイテムをさらに表示できます。

各レイアウトには独自のデザイン設定があり、さらにカスタマイズすることができます。たとえば、シンプルなリストやカルーセルのレイアウトでは、画像を円としてトリミングできます。[スタイル] をクリックすると、テキスト サイズの変更や各アイテムのカード背景の追加などの詳細設定ができます。[サイズと間隔] をクリックすると、パディングと間隔の設定ができます。たとえば、コンテンツの幅の設定、エレメントの間隔の変更、画像の配置の調整などができます。[スタイル] タブと [サイズと間隔] タブのオプションは、レイアウトによって異なります。

レイアウトを変更すると、セクションでは以前に選択したレイアウトに設定が保存されるため、必要に応じていつでも戻ることができます。

注: これらのオプションからギャラリー レイアウトに変更することはできません。代わりに、ギャラリー セクションを作成します。

テキストのサイズ

リスト セクションのレイアウトを選択した後、[デザイン] タブで下にスクロールし、[スタイル] をクリックしてフォント サイズを選択します。タイトルと説明を一括して変更するプリセット サイズから選択するか、[...] をクリックしてアイテムのタイトルと説明のカスタム サイズを個別に設定できます。レイアウトとその現在の設定によっては、他のオプションが表示される場合があります。

セクションの高さ

自動レイアウト セクションの高さは、テキストが最も多いアイテムによって設定されます。そのため、スライドショーのバナーとカルーセル レイアウトでは、セクションのアイテムの上または下に余分なパディングが生じ、テキストが少なくなる場合があります。シンプルなリスト レイアウトでは、行の高さについても同じことが起こる場合があります。

セクションの高さとパディングを最大限に制御できるように、各アイテムにはほぼ同じ量のテキストが入るようにすることをおすすめします。

セクションの仕切り

自動レイアウトの下辺と次のセクションの間に視覚的なインジケーターを追加するには、セクションの仕切りを有効にします。

1. 自動レイアウトの上にカーソルを合わせ、[セクションを編集] をクリックします。
2. [フォーマット] で、[仕切り] トグルをオンに切り替えます。
3. 図形、ストローク、色、太さなど、仕切りの設定を行います。

セクションの仕切りの詳細については、「ページ セクション」をご覧ください。

モバイルでの自動レイアウト デザイン

一部のデザイン オプションは、コンピューターとモバイルで異なる場合があります。たとえば、バナー スライドショーやカルーセル レイアウトでは、ナビゲーション矢印を表示すると、訪問者がアイテムをクリックできるようになります。ナビゲーション矢印を無効にすると、コンピューター上の訪問者はクリックとドラッグによりアイテムをスクロールしますが、モバイル端末では常に矢印が表示され、訪問者にすべてのアイテムが表示されるようになります。

自動レイアウトの色を変更する

自動レイアウト セクションの色を変更するには、[サイト スタイル] を開いて [色] をクリックします。セクションのカラー テーマを選択し、該当するリスト セクション タイプ ( [シンプル]、[カルーセル]、もしくは [バナー] ) で微調整オプションを使用します。

自動レイアウトのフォントとボタンのスタイルを設定する

自動レイアウトは、サイト スタイルのグローバル フォントおよびボタンのスタイル設定に従います。

フォント

自動レイアウトのテキストは、サイト スタイルの [フォント] パネルにあるサイトのグローバル フォント設定に従います。アイテムのタイトルは [見出し]、アイテムの本文のテキストは [段落] に従って表示されます。自動レイアウトにセクション タイトルを使用する場合は、[スタイルの割り当て] をクリックし、[リスト セクション] の [タイトル] をクリックすると、他のフォント設定とは独立してスタイルを設定できます。

文字サイズは自動レイアウト設定で設定します。

ボタン

サイト スタイルの [ボタン] パネルでボタンのフォント、色、形状をスタイル設定します。アイテム ボタンとセクション ボタンは、[プライマリ] スタイルの設定に従います。外観と操作性を一貫させるために、これらの設定はサイト全体のほとんどのボタンに適用されることに注意してください。

自動レイアウト ボタンのサイズを設定するには、次の手順に従います。

1. セクションにカーソルを合わせ、[コンテンツを編集] をクリックします。
2. [デザイン] で [スタイル] を選択します。
3. [テキストのサイズ] で [...] をクリックします。
4. サイズを変更するには、[アイテム ボタン] スライダーを使用します。

自動レイアウトとギャラリー セクション

自動レイアウトとギャラリー セクションはどちらも、コンテンツを自動的に整理して、カスタマイズ可能なレイアウトにしますが、機能は異なります。自動レイアウトをギャラリー セクションに変更したり、その逆に変更したりすることはできません。基本的な違いは次のとおりです。

• 自動レイアウトでは、さまざまな組み合わせの画像、大量のテキスト、ボタン リンクを表示できます。チーム メンバー、過去のクライアント、または最近のプロジェクトを紹介するのに最適です。
• ギャラリー セクションでは画像のみが強調表示されるため、アーティストのポートフォリオや写真サイトに適しています。ギャラリー セクションの画像にはテキストを追加できますが、短いキャプションのみです。

2つのセクションの違いについて詳しく知り、どちらがニーズに最適かを判断するには、以下の表をご参照ください。

機能	自動レイアウト	ギャラリー セクション
画像を自動トリミングする	シンプルなリスト レイアウト カルーセル レイアウト	なし
スライドショーを自動再生する	なし	スライドショー: シンプルなレイアウト スライドショー: フル レイアウト
ボタン	あり	なし
表示をテキストのみにする	あり	なし
画像クリックスルーURL	なし	あり
レイアウト	シンプルなリスト バナー スライドショー カルーセル	グリッド: シンプル、ストリップ、メーソンリー スライドショー: シンプル、フル、リール
ライトボックス	なし	グリッド レイアウト
画像にテキストをオーバーレイする	バナー スライドショー レイアウト	なし
セクションのタイトル	あり	なし
動画	なし	なし