イメージ・カルーセルの実装

開発者ポータル のホーム・ページをカスタマイズして、カルーセルにイメージを表示することができます。 イメージ・カルーセルは、 開発者ポータル のホーム・ページに、お客様の仕様に合わせてカスタマイズされた継続的なスライド・ショーを提供します。

1. カルーセルの 「イメージ」 のコンテンツ・タイプを作成します。
   1. 構造 > コンテンツの種類 > コンテンツタイプを追加する をクリックしてください。
   2. 「名前」 フィールドにコンテンツ・タイプの名前を入力します。
      例: スライド・ショーの画像。
   3. オプション: コンテンツ・タイプの説明を 「説明」 フィールドに指定します。
      例: スライド・ショーに表示する画像。
   4. 新しく作成したコンテンツ・タイプの 「フィールドの保存と管理 (Save and manage fields)」 をクリックします。
   5. 「フィールドの追加」をクリックします。
   6. 「新規フィールドの追加」で 「イメージ」 を選択し、フィールドのラベルを入力します。
      例えば、 「スライド・イメージ」などです。
   7. 「保存して続行」をクリックします。
      新しいフィールドの「フィールドの設定 (Field settings)」ページが表示されます。
   8. 「デフォルト・イメージ」 セクションで、 「ファイルの選択」 をクリックして、他のイメージが見つからない場合にスライド・ショーのデフォルト・イメージとして使用するイメージを割り当てます。
   9. オプション: 「代替テキスト」 フィールドと 「タイトル」 フィールドに入力します。
   10. 「フィールド設定の保存」をクリックします。
   11. 新しく作成したコンテンツ・タイプ 「スライド・ショー・ピクチャー (Slide show picture)」の 「フィールドの管理 (Manage fields)」 タブで、以下を削除します。Body「操作」 ドロップダウン・メニューの 「削除」 をクリックします。 もう一度削除をクリックして確認します。
2. カルーセルに表示するイメージをアップロードします。
   1. [コンテンツ] > [コンテンツの追加] をクリックし、手順 1 で追加したコンテンツ タイプをクリックします。
   2. 「タイトル」 フィールドにイメージのタイトルを入力します。
      例えば、灯台のイメージがある場合、内容に灯台とラベルを付けることができます。
   3. 「スライド・イメージ (Slide image)」 の下の 「ファイルの選択 (Choose file)」 をクリックし、スライド・ショーのイメージを選択します。 「代替テキスト (Alternative text)」フィールドに、イメージをロードできないときに使用するテキストを入力します。
   4. 「保存」をクリックします。
   5. サブステップ 2.a を 2.d まで繰り返して、カルーセルのスライドの内容に問題がないことを確認します。
3. カルーセルのビューを作成します。
   1. [構造] > [ビュー] > [新しいビューの追加] をクリックします。
   2. 完全な ビュー名。
      例: スライド・ショー。
   3. 「ブロック設定」 セクションで 「ブロックの作成」 チェック・ボックスを選択します。
   4. 表示形式として 「Slick カルーセル」 を選択します。
   5. カルーセルのスライド数を 「ブロック当たりの項目数 (Items per block)」 フィールドに入力し、 「保存して編集 (Save and edit)」をクリックします。
      スライド・ショー・ビューの「編集」ページが表示されます。
   6. ビューのタイトルをクリックし、テキスト・フィールドに <none> と入力します。 「適用」をクリックします。
   7. 「フィールド」 セクションで 「追加」をクリックし、 スライド・イメージのチェック・ボックスを選択して、 「フィールドの追加と構成」をクリックします。
   8. 「ラベルの作成」 のチェック・ボックスが選択されていないことを確認し、 「適用」をクリックします。
   9. FIELDSセクションで、 [コンテンツ] > [タイトル] > [削除] をクリックします。
   10. 「フォーマット」 セクションで、Slick カルーセルの 「設定」 をクリックし、「スキン・メイン」を 「デフォルト」に設定します。
   11. 「CAPTION FIELDS」 セクションまでスクロールダウンし、 「コンテンツ: スライド・イメージ」 チェック・ボックスと 「メイン・オプション・セットのオーバーライド」 チェック・ボックスを選択します。
   12. 「オーバーライド可能オプション」 セクションで、 「オートプレイ」チェック・ボックス、 「ドット」チェック・ボックス、および 「ドラッグ可能」 チェック・ボックスを選択します。
   13. 「適用」をクリックします。
   14. [フィルター条件] セクションで、 [コンテンツ: 公開済み] > [削除] をクリックします。
   15. 「保存」 をクリックして、スライド・ショー・ビューを保存します。
4. カルーセルをホストするようにホーム・ページを構成します。
   1. 「構造」をクリックしてから、 「ページ」をクリックします。
   2. 「ようこそ」 ページの 「編集」 をクリックしてから、 「パネル」 セクションで 「コンテンツ」 をクリックします。
   3. 現在のウェルカム・バナーを削除するには、 「ウェルカム・バナー」の 「操作」 列の下にある下矢印をクリックし、 「削除」を選択します。 もう一度削除をクリックして確認します。
   4. カルーセルを追加するには、 「新規ブロックの追加」 をクリックして、ステップ 3で作成したスライド・ショー・ビューを選択します。 「表示タイトル」 を選択解除して、 「ブロックの追加」をクリックします。
   5. 「更新して保存」をクリックします。