- 3,714,738 Users
- 2,242,615 Discussions
- 7,845,038 Comments
Forum Stats
Discussions
2. サイトの編集（Oracle Content and Experience のサイト機能を使ってみよう）
Satoshi Nakane-Oracle
Posts: 32 Employee
目次に戻る: Oracle Content and Experience のサイト機能を使ってみよう
この文書は OCE のサイト作成機能を利用し、Web サイトのページ構成を編集します。またそれぞれのページで表示するコンテンツを編集します
2. サイトの編集
サイトを編集します。今回は、下記のようなページ構成のサイトを作成します
ホーム
+--製品資料（製品資料のダウンロードページ：新規作成）
+--Private Policy（既存ページのまま）
2.1 サイト編集画面の起動
- sampleStandardSite を選択し、「開く」をクリックします
- サイトの編集画面（Site Builder）が表示されます。「ベース・サイト▼」をクリックし、「新規更新の作成」を選択します
- 「新規更新の名前の指定」に update と入力し、「OK」をクリックします
- 「update」に切り替わっていることを確認します。表示側にあるスイッチを「編集」モードに切り替えます
- サイトが編集モードに切り替わります。編集側にあるスイッチを「表示」モードに切り替えます。サイトの表示モードに戻ります
サイト編集のプロセスは、次の通りです。
- 新規更新の作成: ベースサイトのコピーが「更新」として作成されます。「更新」は複数作成できます
- サイトの編集: ベースサイトからコピーされた「更新」を編集します
- サイトの保存: ベースサイトからコピーされた「更新」の編集内容を保存します（「更新」の上書き保存）
- サイトのコミット: ベースサイトからコピーし、編集された更新を、ベースサイトにコピー（上書き保存）します
2.2 サイトのページ構成の編集
- サイトを「編集」モードに切り替えます
- 左サイドバーの「ページ」をクリックします
- 「Home」が選択されていることを確認し、「ページの追加」をクリックします
- 以下を入力し、「閉じる」をクリックします
- ページ・タイプ: Webページ
- ページ名: 製品資料
- ページURL: product
- オーバーライド: 選択する
- ページ・レイアウト: index.html を選択
- モバイル・ページ・レイアウト: 「デスクトップと同じ」を選択
- 「製品資料」ページを、Home ページと Developing Template の間にドラッグ&ドロップで移動します
- 今回のチュートリアルで利用しないページ（Developing Templates、Detail Page）を削除します。
Developing Template をクリックします - 「ゴミ箱」アイコンをクリックします。続けて「OK」をクリックします
- 同じ手順で、Detail Page ページも削除します
- 最終的には、以下のページ構成となります。サイト上のナビゲーションメニューもページ構成の通りに表示されます
- 「保存」をクリックします
2.3 Home ページの編集
- Home ページをクリックします
- ページ上に「タイトル」コンポーネントと「段落」コンポーネントが配置され、それぞれにサンプルのテキストが入力されています。
サンプルテキストを削除し、適切な文言に変更します。以下は変更例です- タイトル: 社内向け製品情報提供サイトへようこそ！
- 段落: この社内サイトは、営業部門の皆さまに対して、最新の製品情報を提供します…（以降省略）
タイトルも段落も WYSIWYG エディタで編集でき、文字の装飾やスタイルの変更、URLの挿入、画像や表の挿入などが可能です。それぞれのコンポーネントの利用方法は、下記ドキュメントもあわせてご確認くださいタイトル/Titles: https://docs.oracle.com/en/cloud/paas/content-cloud/creating-experiences/titles.html段落/Paragraphs: https://docs.oracle.com/en/cloud/paas/content-cloud/creating-experiences/paragraphs.html
- 左サイドバーの「セクション・レイアウト」をクリックします
- 段落コンポーネントの下にセクション・レイアウトの「2列」を、ドラッグ&ドロップで配置します
セクション・レイアウトは、コンポーネントの配置を自動的に調整します。「2列」以外にも、「3列」「スライダ」「タブ」などのパターンが提供されています。詳細は、下記ドキュメントのSection Layout を合わせてご確認くださいセクション・レイアウト/Section Layout: https://docs.oracle.com/en/cloud/paas/content-cloud/creating-experiences/understand-layouts.html
- 配置したセクション・レイアウト「2列」の緑色のメニューをクリックし、「設定」をクリックします
- 「カスタム設定」をクリックします
- 以下を入力し、「< 戻る」をクリックします
- 最初の列の幅(%): 50
- 2番目の列の幅(%): 50
- レスポンシブ・ブレーク・ポイント: 768
- レスポンシブ動作: 2番目の列を最初の列の下に移動
- 右上の「 X 」をクリックし、設定画面を閉じます
- セクション・レイアウトの「最初の列」にコンポーネントを配置します
- 左サイドバーの「コンポーネント」→「シード」をクリックします
- 「イメージ」コンポーネントを、セクション・レイアウトの「最初の列」にドラッグ＆ドロップします
- 「最初の列」に配置した「イメージ」コンポーネントの下に「タイトル」コンポーネントをドラッグ＆ドロップします。その下に「段落」コンポーネントを、さらにその下に「ボタン」コンポーネント配置します
- 「イメージ」コンポーネントをクリックします
- 緑色ののメニューをクリックし、「設定」をクリックします
- 「選択」をクリックします
- ドキュメント・フォルダが開きます。フォルダから任意の画像を選択し、「OK」をクリックします
フォルダに必要な画像がない場合、この画面上の「アップロード」をクリックし、ローカル環境の画像ファイルをフォルダにアップロードし、それを選択することができます
- 「タイトル」「代替テキスト」「キャプション」に「製品資料のダウンロード」と入力します
- 右上の「 X 」をクリックし、イメージ設定を閉じます
イメージコンポーネントは、画像をページ上に配置する場合に利用します。スタンダードサイトの場合、ドキュメント・フォルダから画像を選択します。下記ドキュメントも合わせてご確認くださいイメージ/Images: https://docs.oracle.com/en/cloud/paas/content-cloud/creating-experiences/images.html
- 「タイトル」コンポーネントをクリックし、「製品資料のダウンロード」と入力します
- 「段落」コンポーネントをクリックし、任意のテキストを入力します
- 「ボタン」コンポーネントをクリックし、緑色の「ボタン」のメニューをクリックし、「設定」選択します
- 「ラベル」と「タイトル」に「製品資料ページへ」と入力します。さらに、「位置合わせ」で「中央」を選択します
- 「リンク」タブをクリックします
- 「リンク・タイプの選択」から「サイト・ページ」を選択します。続けて「ページ」より「製品資料」を選択します
- 右上の「 X 」をクリックし、ボタン設定を閉じます
「ボタン」コンポーネントは、サイト・ページのリンクだけでなく、外部 Web サイトへのリンクや、ファイルのダウンロードやプレビューなども指定できます。詳しい利用方法は、下記ドキュメントを合わせてご確認くださいボタン/Button: https://docs.oracle.com/en/cloud/paas/content-cloud/creating-experiences/buttons.html
- 左サイドバーの「コンポーネント」→「シード」をクリックします
- 同じ手順を繰り返し、「セクション・レイアウト」の「第2列」に Privacy Policy ページの紹介とリンクを作成します。作成イメージは以下の通りです
- 「保存」をクリックします。以上で、Home ページの編集は終了です
2.4 製品資料ページの編集
2.4.1 フォルダに製品資料を登録する
- 左ナビゲーションより「ドキュメント」をクリックします。「作成」をクリックし、「サイト作成チュートリアル」フォルダを作成します
- 「サイト作成チュートリアル」フォルダの下に、「製品カテゴリA」と「製品カテゴリB」のフォルダを作成します
- 「製品カテゴリA」と「製品カテゴリB」のフォルダに、Web サイト上に掲載する資料をアップロードします。
ここでは、それぞれのフォルダに、2つのPowerPoint資料をアップロードしてあります
2.4.2 製品ページの編集
- サイト編集画面を開き、「製品資料」ページを編集モードで開きます。ページには、ロゴもナビゲーションもありません
ページ上の真ん中に「＋」がある点線の長方形は「スロット」です。サイト作成者は、スロットの領域内にコンポーネントを配置し、ページを編集します。なお、スロットは、テンプレートの開発時に、開発者が定義します
- ページの左上の logocontainer スロットに、コンポーネント→シード→「タイトル」コンポーネントを配置します
- タイトルコンポーネントに「Starter Template」と入力し、文字の色を白(White)にします
- サイトナビゲーションを表示するためのカスタムコンポーネントを配置します。
左サイドバーの「シード」をクリックし、「カスタム」を選択します
- ページ右上の navMenu スロットに、「NavMenu」コンポーネントを配置します。
この際、コンポーネントの検索ボックスに nav と入力すると、NavMenu コンポーネントが見つけやすくなります
- サイトナビゲーションが表示されます
- slot-content スロットに、コンポーネントを配置します
- 左サイドバーの「カスタム」を「シード」に切り替えます
- ページ中央の slot-content スロットに「タイトル」コンポーネントを 配置し、「製品資料ページ」と入力します
- 「セクション・レイアウト」より「2列」を、「タイトル」コンポーネントの下に配置します
- 「2列」のメニュー→「設定」→「カスタム設定」を開き、以下の通りの設定します
- 最初の列の幅(%): 50
- 2番目の列の幅(%): 50
- レスポンシブ・ブレーク・ポイント: 768
- レスポンシブ動作: 2番目の列を最初の列の下に移動
- 「2列」の設定メニューを閉じます
- 「セクション・レイアウト」の「最初の列」に「タイトル」コンポーネントを配置し、「製品カテゴリA」と入力します
- タイトルコンポーネントの設定メニュー→「設定」→「スタイル」を選択します
- 「カスタマイズ」を選択し、背景色とフォントの色を、それぞれ以下の通りに変更します
- 「タイトル」コンポーネントの設定メニューを閉じます。背景色と文字の色が変更されていることを確認します
- 「最初の列」の「タイトル」コンポーネントの下に「ファイル・リスト」コンポーネントを配置します
ファイル・リストコンポーネントは、選択したフォルダに保管されるファイルを一覧表示します。フォルダ・リストコンポーネントと組み合わせて利用することで、複数フォルダに含まれるファイル一覧を表示できます。詳細は、下記ドキュメントをあわせてご確認ください
ファイル・リスト/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- 「ファイル・リスト」の設定メニュー→「設定」→「カスタム設定」をクリックします
- 「選択」をクリックします
- フォルダの選択画面が表示されます。前の手順で作成した「製品カテゴリA」を選択し、「OK」をクリックします
- フォルダ権限の選択で「サイト・ビジターのアクセス：ダウンロード実行者」を選択します
- 表示オプションを以下の通りに選択します
- 「カスタム設定」を閉じます。続けて、「ファイル・リストの設定」を閉じます
- 「ファイル・リスト」の設定メニュー→「設定」→「カスタム設定」をクリックします
- 表示モードに切り替えます
- 「製品カテゴリA」フォルダ内の資料が一覧表示されます。ダウンロード・アイコンをクリックすると、資料がダウンロードされることを確認します
- 編集モードに切り替えます。
同じ手順を繰り返し、セクション・レイアウトの「第2列」を編集します。今回は「ファイル・リスト」コンポーネントで「製品カテゴリB」フォルダを選択します
- 表示モードに切り替えます。それぞれのフォルダに格納された資料のダウンロードできることを確認します
- 編集内容を「保存」します
2.5 編集内容のコミット
- 「コミット」をクリックします
- 確認のダイアログを確認し、「コミット」をクリックします
- 編集内容がベース・サイトに上書き保存されます
- サイト編集画面を閉じます
以上で、この章の作業は終了です
Tagged: