Forum Stats

  • 3,727,843 Users
  • 2,245,474 Discussions
  • 7,853,064 Comments

Discussions

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.