Forum Stats

  • 3,714,738 Users
  • 2,242,615 Discussions
  • 7,845,038 Comments

Discussions

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Categories

2. サイトの編集(Oracle Content and Experience のサイト機能を使ってみよう)

Satoshi Nakane-Oracle
Satoshi Nakane-Oracle Posts: 32 Employee
edited June 2020 in Social Groups

目次に戻る: Oracle Content and Experience のサイト機能を使ってみよう

この文書は OCE のサイト作成機能を利用し、Web サイトのページ構成を編集します。またそれぞれのページで表示するコンテンツを編集します

image

2. サイトの編集

サイトを編集します。今回は、下記のようなページ構成のサイトを作成します

ホーム
  +--製品資料(製品資料のダウンロードページ:新規作成)
  +--Private Policy(既存ページのまま)

2.1 サイト編集画面の起動

  1. sampleStandardSite を選択し、「開く」をクリックします
    site009.jpg

  2. サイトの編集画面(Site Builder)が表示されます。「ベース・サイト▼」をクリックし、「新規更新の作成」を選択します
    site010.jpg

  3. 新規更新の名前の指定」に update と入力し、「OK」をクリックします
    site011.jpg

  4. 「update」に切り替わっていることを確認します。表示側にあるスイッチを「編集」モードに切り替えます
    site012.jpg

  5. サイトが編集モードに切り替わります。編集側にあるスイッチを「表示」モードに切り替えます。サイトの表示モードに戻ります
    site013.jpg

サイト編集のプロセスは、次の通りです。
site001.jpg
  • 新規更新の作成: ベースサイトのコピーが「更新」として作成されます。「更新」は複数作成できます
  • サイトの編集: ベースサイトからコピーされた「更新」を編集します
  • サイトの保存: ベースサイトからコピーされた「更新」の編集内容を保存します(「更新」の上書き保存)
  • サイトのコミット: ベースサイトからコピーし、編集された更新を、ベースサイトにコピー(上書き保存)します

2.2 サイトのページ構成の編集

  1. サイトを「編集」モードに切り替えます
  2. 左サイドバーの「ページ」をクリックします
  3. Home」が選択されていることを確認し、「ページの追加」をクリックします
    site014.jpg

  4. 以下を入力し、「閉じる」をクリックします
    • ページ・タイプ: Webページ
    • ページ名: 製品資料
    • ページURL: product
    • オーバーライド: 選択する
    • ページ・レイアウト: index.html を選択
    • モバイル・ページ・レイアウト: 「デスクトップと同じ」を選択
      site015.jpg

  5. 製品資料」ページを、Home ページと Developing Template の間にドラッグ&ドロップで移動します
    site016.jpg
  6. 今回のチュートリアルで利用しないページ(Developing Templates、Detail Page)を削除します。
    Developing Template をクリックします
  7. ゴミ箱」アイコンをクリックします。続けて「OK」をクリックします
    site017.jpg

  8. 同じ手順で、Detail Page ページも削除します

  9. 最終的には、以下のページ構成となります。サイト上のナビゲーションメニューもページ構成の通りに表示されます
    site018.jpg

  10. 保存」をクリックします
    site019.jpg

2.3 Home ページの編集

  1. Home ページをクリックします
  2. ページ上に「タイトル」コンポーネントと「段落」コンポーネントが配置され、それぞれにサンプルのテキストが入力されています。
    サンプルテキストを削除し、適切な文言に変更します。以下は変更例です
  3. 左サイドバーの「セクション・レイアウト」をクリックします
  4. 段落コンポーネントの下にセクション・レイアウトの「2列」を、ドラッグ&ドロップで配置します
    site021.jpg
    セクション・レイアウトは、コンポーネントの配置を自動的に調整します。「2列」以外にも、「3列」「スライダ」「タブ」などのパターンが提供されています。詳細は、下記ドキュメントのSection Layout を合わせてご確認くださいセクション・レイアウト/Section Layout: https://docs.oracle.com/en/cloud/paas/content-cloud/creating-experiences/understand-layouts.html

  5. 配置したセクション・レイアウト「2列」の緑色のメニューをクリックし、「設定」をクリックします
    site033.jpg
  6. カスタム設定」をクリックします
    site034.jpg
  7. 以下を入力し、「< 戻る」をクリックします
    • 最初の列の幅(%): 50
    • 2番目の列の幅(%): 50
    • レスポンシブ・ブレーク・ポイント: 768
    • レスポンシブ動作: 2番目の列を最初の列の下に移動
      site035.jpg
  8. 右上の「 X 」をクリックし、設定画面を閉じます

  9. セクション・レイアウトの「最初の列」にコンポーネントを配置します
    1. 左サイドバーの「コンポーネント」→「シード」をクリックします
      site022.jpg

    2. イメージ」コンポーネントを、セクション・レイアウトの「最初の列」にドラッグ&ドロップします
      site023.jpg

    3. 「最初の列」に配置した「イメージ」コンポーネントの下に「タイトル」コンポーネントをドラッグ&ドロップします。その下に「段落」コンポーネントを、さらにその下に「ボタン」コンポーネント配置します
      site024.jpg

    4. イメージ」コンポーネントをクリックします
    5. 緑色ののメニューをクリックし、「設定」をクリックします
      site025.jpg

    6. 選択」をクリックします
      site026.jpg

    7. ドキュメント・フォルダが開きます。フォルダから任意の画像を選択し、「OK」をクリックします
      site027.jpg
      フォルダに必要な画像がない場合、この画面上の「アップロード」をクリックし、ローカル環境の画像ファイルをフォルダにアップロードし、それを選択することができます
    8. タイトル」「代替テキスト」「キャプション」に「製品資料のダウンロード」と入力します
    9. 右上の「 X 」をクリックし、イメージ設定を閉じます
      site028.jpg
      イメージコンポーネントは、画像をページ上に配置する場合に利用します。スタンダードサイトの場合、ドキュメント・フォルダから画像を選択します。下記ドキュメントも合わせてご確認くださいイメージ/Images: https://docs.oracle.com/en/cloud/paas/content-cloud/creating-experiences/images.html

    10. タイトル」コンポーネントをクリックし、「製品資料のダウンロード」と入力します
    11. 段落」コンポーネントをクリックし、任意のテキストを入力します
      site029.jpg

    12. 「ボタン」コンポーネントをクリックし、緑色の「ボタン」のメニューをクリックし、「設定」選択します
    13. ラベル」と「タイトル」に「製品資料ページへ」と入力します。さらに、「位置合わせ」で「中央」を選択します
    14. リンク」タブをクリックします
      site030.jpg

    15. リンク・タイプの選択」から「サイト・ページ」を選択します。続けて「ページ」より「製品資料」を選択します
    16. 右上の「 X 」をクリックし、ボタン設定を閉じます
      site028.jpg
      「ボタン」コンポーネントは、サイト・ページのリンクだけでなく、外部 Web サイトへのリンクや、ファイルのダウンロードやプレビューなども指定できます。詳しい利用方法は、下記ドキュメントを合わせてご確認くださいボタン/Button: https://docs.oracle.com/en/cloud/paas/content-cloud/creating-experiences/buttons.html
  10. 同じ手順を繰り返し、「セクション・レイアウト」の「第2列」に Privacy Policy ページの紹介とリンクを作成します。作成イメージは以下の通りです
    site032.jpg

  11. 保存」をクリックします。以上で、Home ページの編集は終了です

2.4 製品資料ページの編集

2.4.1 フォルダに製品資料を登録する

  1. 左ナビゲーションより「ドキュメント」をクリックします。「作成」をクリックし、「サイト作成チュートリアル」フォルダを作成します
    site036.jpg

  2. 「サイト作成チュートリアル」フォルダの下に、「製品カテゴリA」と「製品カテゴリB」のフォルダを作成します
    site037.jpg

  3. 「製品カテゴリA」と「製品カテゴリB」のフォルダに、Web サイト上に掲載する資料をアップロードします。
    ここでは、それぞれのフォルダに、2つのPowerPoint資料をアップロードしてあります
    site059.png

2.4.2 製品ページの編集

  1. サイト編集画面を開き、「製品資料」ページを編集モードで開きます。ページには、ロゴもナビゲーションもありません
    site040.jpg
    ページ上の真ん中に「+」がある点線の長方形は「スロット」です。サイト作成者は、スロットの領域内にコンポーネントを配置し、ページを編集します。なお、スロットは、テンプレートの開発時に、開発者が定義します
  2. ページの左上の logocontainer スロットに、コンポーネント→シード→「タイトル」コンポーネントを配置します
    site041.jpg

  3. タイトルコンポーネントに「Starter Template」と入力し、文字の色を白(White)にします
    site042.jpg
  4. サイトナビゲーションを表示するためのカスタムコンポーネントを配置します。
    左サイドバーの「シード」をクリックし、「カスタム」を選択します
    site043.jpg

  5. ページ右上の navMenu スロットに、「NavMenu」コンポーネントを配置します。
    この際、コンポーネントの検索ボックスに nav と入力すると、NavMenu コンポーネントが見つけやすくなります
    site044.jpg

  6. サイトナビゲーションが表示されます
    site045.jpg

  7. slot-content スロットに、コンポーネントを配置します
    1. 左サイドバーの「カスタム」を「シード」に切り替えます
    2. ページ中央の slot-content スロットに「タイトル」コンポーネントを 配置し、「製品資料ページ」と入力します
      site046.jpg

    3. セクション・レイアウト」より「2列」を、「タイトル」コンポーネントの下に配置します
      site047.jpg

    4. 「2列」のメニュー→「設定」→「カスタム設定」を開き、以下の通りの設定します
      • 最初の列の幅(%): 50
      • 2番目の列の幅(%): 50
      • レスポンシブ・ブレーク・ポイント: 768
      • レスポンシブ動作: 2番目の列を最初の列の下に移動
        site035.jpg

    5. 「2列」の設定メニューを閉じます
    6. 「セクション・レイアウト」の「最初の列」に「タイトル」コンポーネントを配置し、「製品カテゴリA」と入力します
      site048.jpg

    7. タイトルコンポーネントの設定メニュー→「設定」→「スタイル」を選択します
    8. カスタマイズ」を選択し、背景色フォントの色を、それぞれ以下の通りに変更します
      site049.jpg
    9. 「タイトル」コンポーネントの設定メニューを閉じます。背景色と文字の色が変更されていることを確認します
    10. 「最初の列」の「タイトル」コンポーネントの下に「ファイル・リスト」コンポーネントを配置します
      site050.jpg
      ファイル・リストコンポーネントは、選択したフォルダに保管されるファイルを一覧表示します。フォルダ・リストコンポーネントと組み合わせて利用することで、複数フォルダに含まれるファイル一覧を表示できます。詳細は、下記ドキュメントをあわせてご確認ください
      ファイル・リスト/File Lists: https://docs.oracle.com/en/cloud/paas/content-cloud/creating-experiences/file-lists.html
      フォルダ・リスト/Folder Lists: https://docs.oracle.com/en/cloud/paas/content-cloud/creating-experiences/folder-lists.html
      1. 「ファイル・リスト」の設定メニュー→「設定」→「カスタム設定」をクリックします
        site051.jpg

      2. 選択」をクリックします
        site052.jpg

      3. フォルダの選択画面が表示されます。前の手順で作成した「製品カテゴリA」を選択し、「OK」をクリックします
        site053.jpg

      4. フォルダ権限の選択で「サイト・ビジターのアクセス:ダウンロード実行者」を選択します
      5. 表示オプションを以下の通りに選択します
        site054.jpg

      6. 「カスタム設定」を閉じます。続けて、「ファイル・リストの設定」を閉じます

    11. 表示モードに切り替えます
    12. 「製品カテゴリA」フォルダ内の資料が一覧表示されます。ダウンロード・アイコンをクリックすると、資料がダウンロードされることを確認します
      site055.jpg

    13. 編集モードに切り替えます。
      同じ手順を繰り返し、セクション・レイアウトの「第2列」を編集します。今回は「ファイル・リスト」コンポーネントで「製品カテゴリB」フォルダを選択します
      site056.jpg

  8. 表示モードに切り替えます。それぞれのフォルダに格納された資料のダウンロードできることを確認します

  9. 編集内容を「保存」します

2.5 編集内容のコミット

  1. コミット」をクリックします
    site057.jpg

  2. 確認のダイアログを確認し、「コミット」をクリックします
  3. 編集内容がベース・サイトに上書き保存されます
  4. サイト編集画面を閉じます

以上で、この章の作業は終了です

目次に戻る: Oracle Content and Experience のサイト機能を使ってみよう

Sign In or Register to comment.