既存のWebサイトをOracle Content Management(OCM)に移行してみよう(2)

目次

[7. ページの追加](#ページの追加)

[8. OCM スロット(Slots)の追加](#ocm-スロットslotsの追加)

[9. パンくずリスト(Breadcrumbs)の追加](#パンくずリストbreadcrumbsの追加)

[10. 動的ナビゲーション・メニューの生成](#動的ナビゲーション・メニューの生成)

[11. デジタル・アセットの登録](#デジタル・アセットの登録)


# ページの追加

ここでは、既存サイトの構造に基づいて、各ページを作成します。そして、ページ・オプションを設定します。

## ページの追加

1.  編集画面で左側のナビゲーションから「ページ」を選択します。
2.  「ページの追加」をクリックし、新規ページを作成します。
![5770a01ba3493337b184540bbda38ccd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/f6340ebf-f6b5-169f-db9a-b7dc81cab738.png)

3.  「ページ名」に「**Post**」を入力し、「**オーバーライド**」スイッチをオンにします。「**ページURL**」に「**post.html**」を入力し、「**ページ・レイアウト**」に「**post.html**」を選択します。
![b7c4e40441de20def5a7dd98f936d39a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/e94a2706-f5f0-56a8-2cec-cf8b0fa5d6da.png)

4.  次の表を参照して、「**Aboutページ**」及び「**Contactページ**」を追加します。

    | ページ                 | ページ名 | ページURL    | ページレイアウト |
    |------------------------|----------|--------------|------------------|
    | Home  <br /> \***修正不要**    | Home     | index.html    | index.html       |
    | About <br /> \***追加作成**   | About    | about.html   | index.html       |
    | Post <br /> \***追加作成**    | Post     | post.html    | post.html        |
    | Contact <br /> \***追加作成** | Contact  | contact.html | index.html       |
![3a5be45baef34fb76e4c9ae28bdfae5a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/140ce036-4fd6-e028-d718-3a96cc2769fd.png)
5.  ほかのページはすべて削除します。
![6f2521f626534f4df767645631944564.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/a7496430-64e2-7301-39f2-542d89e607dd.png)
6.  「Post」ページのページ・オプションを開き、「ナビゲーションからページを非表示」と「詳細ページ」のチェックをオンにします。
![4244825fd6429aa4b184734d00e1b68f.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/ea1fdcc8-d74d-9e31-b4b4-5ea8d64fa864.png)
7.  オリジナルサイトの構造と同じように他のページを作成します。最終的に、下記の図のようなページ構造となっていることを確認します。
![b29808d862b0b4c1b045486a8dbef2c7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/977f105e-1471-90be-37f6-10e3ad869fd5.png)
8.  「保存」をクリックします。
![a4008fe083e99eff0436e307262abbae.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/db483d01-c430-e5ae-2161-20326f23eb56.png)

# OCM スロット(Slots)の追加

ここでは、ページレイアウトのコンテンツ領域のオリジナルのHTMLコードの代わりにOCMスロット(OCM Slots)を使用するように変更します。

OCMスロットとは、ページ上にOCMが提供するコンポーネントを追加できる場所です。 OCMスロットは、レイアウトファイル内の\<div\>要素で、class属性に値 "scs-slot"を持ちます。複数の\<div\>要素は、 "scs-slot"クラス属性を割り当てることでスロットとして指定できます。各スロットには一意のid属性が必要です。クラス属性値が "scs-responsive"であるスロットは、ブラウザーのビューポートが解像度を変更すると内容が更新されます。

オリジナルサイトのHTMLページにOCMスロットを追加するためのさまざまなオプションがあります。

A.  ページ全体の内容を含む\<div class = "container"\>要素を1つのスロットとして定義する

B.  ページのグリッドにコンテンツの行を含む各\<div class = "row"\>要素をスロットに変換する

C.  ページのグリッドにコンテンツの列を含む各\<div\>要素をスロットに変換する

エンドユーザが複数のOCMコンポーネントをスロットに追加できるようにするには、上記のオプション(A)または(B)を使用する必要があります。その場合は、「scs-responsive」属性と組み合わせて「scs-slot」属性を使用する必要があります。

例： \<div id="row-slot" class="scs-slot scs-responsive row"\>

オプション(C)を使用すると、元のページの構造に近いOCMページレイアウトを作成できます。たとえば、次のようなOCMスロットのグリッドを作成できます。

```HTML
<div class="container">
    <div class="row">
        <div id="grid-title" class="scs-slot col-lg-12"></div>
        <div id="grid-col1" class="scs-slot col-md-4"></div>
        <div id="grid-col2" class="scs-slot col-md-4"></div>
        <div id="grid-col3" class="scs-slot col-md-4"></div>
    </div>
</div>
```

この配置は、通常、スロットごとに1つのOCMコンポーネントを配置します。 この場合は「scs-responsive」属性を使用する必要はありません。

各スロットは、追加できるOCMのコンポーネントを制限することができます。詳細については、ドキュメントの「**Restrict Components in Slots**」を参照してください。

**Building Sites with Oracle Content Management \> Restrict Components in Slots**

[*https://docs.oracle.com/en/cloud/paas/content-cloud/creating-experiences/restrict-components-slots.html*](https://docs.oracle.com/en/cloud/paas/content-cloud/creating-experiences/restrict-components-slots.html)

## index.htmlの編集

1.  **DemoSiteTheme/layouts/index.html**をエディタで開きます。
![e9f43777cd4b35dc675af1301215ba68.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/cd2ecc9c-1c2c-3084-5cc0-9ce98ab150c4.png)

2.  Main ContentのHTMLコードを、下記の様に修正します。  
    \<変更前\>

    ```HTML
    <!-- Main Content -->
    <div class="container px-4 px-lg-5">
        <div class="row gx-4 gx-lg-5 justify-content-center">
            <div class="col-md-10 col-lg-8 col-xl-7">
            <中略>
            </div>
        </div>
    </div>
    ```

    \<変更後\>

    ```HTML
    <!-- Main Content -->
    <div class="container px-4 px-lg-5" >
        <div class="row gx-4 gx-lg-5 justify-content-center">
            <div class="col-md-10 col-lg-8 col-xl-7 scs-slot"  id="articleCont"></div>
        </div>    
    </div>
    ```

3.  NavigationのHTMLコードを、下記の様に修正します。  
    \<変更前\>

    ```HTML
    <!-- Navigation-->
    <nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
        <div class="container px-4 px-lg-5">
            <a class="navbar-brand" href="index.html">Start Bootstrap</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                Menu
                <i class="fas fa-bars"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ms-auto py-4 py-lg-0">
                    <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="index.html">Home</a></li>
                    <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="about.html">About</a></li>
                    <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="post.html">Sample Post</a></li>
                    <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="contact.html">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>
    ```

    \<変更後\>

    ```HTML
    <!-- Navigation -->
    <div class="scs-slot" id="navbarCont"></div>
    ```

4.  Page HeaderのHTMLコードを、下記の様に修正します。  
    \<変更前\>

    ```HTML
    <!-- Page Header -->
    <header class="masthead" style="background-image: url('_scs_theme_root_/assets/img/home-bg.jpg')">
        <div class="container position-relative px-4 px-lg-5">
            <div class="row gx-4 gx-lg-5 justify-content-center">
                <div class="col-md-10 col-lg-8 col-xl-7">
                    <div class="site-heading">
                        <h1>Clean Blog</h1>
                        <span class="subheading">A Blog Theme by Start Bootstrap</span>
                    </div>
                </div>
            </div>
        </div>
    </header>
    ```

    \<変更後\>

    ```HTML
    <!-- Page Header -->
    <header class="masthead bg-index" id="bgEle">
        <div class="container position-relative px-4 px-lg-5">
            <div class="row gx-4 gx-lg-5 justify-content-center">
                <div class="col-md-10 col-lg-8 col-xl-7">
                    <div class="site-heading scs-slot" id="mainCont"></div>
                </div>
            </div>
        </div>
    </header>
    ```

5.  index.html ファイルを保存します。
6.  **DemoSiteTheme/assets/css/custom.css**を新規作成します。下記コードを追加します。

    ```CSS
    /* mainCont */
    header.masthead .site-heading *{
        color: #fff;
    }
    header.masthead .page-heading h4, header.masthead .site-heading h4 {
        font-size: 24px;
        font-weight: 300;
        line-height: 1.1;
        display: block;
        margin: 20px 0 0;
        font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
    }
    header.masthead .scs-title-text,header.masthead .scs-paragraph-text,header.masthead .scs-component-content * {
        overflow: visible;
    }
    header.bg-index{
        background-image: url("../img/home-bg.jpg");
    }

    ```

7.  **DemoSiteTheme/assets/css/custom.css**ファイルを保存します。
8.  **DemoSiteTheme/layouts/index.html**をエディタで開きます。新規作成されたcustom.cssを\</head>タグの前に追加します。

    ```HTML
    <link href="_scs_theme_root_/assets/css/custom.css" rel="stylesheet">
    ```

9.  **DemoSiteTheme/layouts/index.html**ファイルを保存します。
10.  編集したファイルがOCM上に同期されていることを確認します。

## post.htmlの編集

1.  **DemoSiteTheme/layouts/post.html**をエディタで開きます。
![8bb0d9ff1d7c1c3abaaa4c14a83e158f.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/6816437a-e157-8e8b-0004-be07f94338a3.png)

2.  Page Header とPost ContentのHTMLコードを、下記の様に修正します。  
    \<変更前\>

    ```HTML
    <!-- Page Header-->
    <header class="masthead" style="background-image: url('_scs_theme_root_/assets/img/post-bg.jpg')">
        <div class="container position-relative px-4 px-lg-5">
            <div class="row gx-4 gx-lg-5 justify-content-center">
                <div class="col-md-10 col-lg-8 col-xl-7">
                    <div class="post-heading">
                        <h1>Man must explore, and this is exploration at its greatest</h1>
                        <h2 class="subheading">Problems look mighty small from 150 miles up</h2>
                        <span class="meta">
                            Posted by
                            <a href="#!">Start Bootstrap</a>
                            on August 24, 2023
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- Post Content-->
    <article class="mb-4">
        <div class="container px-4 px-lg-5">
            <div class="row gx-4 gx-lg-5 justify-content-center">
                <div class="col-md-10 col-lg-8 col-xl-7">
                    <中略>
                </div>
            </div>
        </div>
    </article>
    ```

    \<変更後\>

    ```HTML
    <div class="scs-slot"  id="articleCont"></div>
    ```

3.  NavigationのHTMLコードを、下記の様に修正します。  
    \<変更前\>

    ```HTML
    <!-- Navigation-->
    <nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
        <div class="container px-4 px-lg-5">
            <a class="navbar-brand" href="index.html">Start Bootstrap</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                Menu
                <i class="fas fa-bars"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ms-auto py-4 py-lg-0">
                    <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="index.html">Home</a></li>
                    <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="about.html">About</a></li>
                    <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="post.html">Sample Post</a></li>
                    <li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="contact.html">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>
    ```

    \<変更後\>

    ```HTML
    <!-- Navigation -->
    <div class="scs-slot" id="navbarCont"></div>
    ```

4.  post.html ファイルを保存します。編集したファイルがOCM上に同期されていることを確認します。

## 【確認】変更内容を確認する

1.  **「DemoSite**」の編集画面に戻り、F5を押してブラウザーをリフレッシュします。
2.  「Home」ページにスロットが表示されることを確認します。
![515c3546cc2e543fcac43ff55773f4d7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/0b29ea11-f84e-7e3f-a02f-ae070e1f6763.png)

3.  「Post」ページにスロットが表示されることを確認します。
![6bc2833fe979f39e1036c2094644f786.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/7f06ecfd-786e-b9c7-74bd-de5758f2641c.png)

# パンくずリスト(Breadcrumbs)の追加

ここでは、SCS Render APIを使用して、動的にパンくずリストを生成するコードを追加します。

## post.htmlの編集

1.  デスクトップに同期した**DemoSiteTheme/layouts/post.html**をエディタで開きます。
2.  Post Contentの後ろに下記のようにコードを追加します。  
    \<変更前\>

    ```HTML
    <!-- Navigation -->
    <div class="scs-slot" id="navbarCont"></div>

    <div class="scs-slot"  id="articleCont"></div>
    ```

    \<変更後\>

    ```HTML
    <!-- Navigation -->
    <div class="scs-slot" id="navbarCont"></div>
    
    <div class="scs-slot"  id="articleCont"></div>

    <!-- Page Heading/Breadcrumbs --> 
    <div class="row"> 
        <div id="breadcrumb" class="col-lg-12">
            <!-- page breadcrumbs goes in here -->
        </div>
    </div>
    ```

3.  require.jsの直前に、下記のようにコードを追加します。  
    \<変更前\>

    ```HTML
        <script data-main="/_sitescloud/renderer/renderer.js" src="/_sitescloud/renderer/require.js"></script>
        <!--$SCS_PAGE_FOOTER-->
        <!--$SCS_SITE_FOOTER-->

        <!-- Avoid FOUC issue in FF with async loading of style sheets -->
        <style> body { opacity: 1; }</style>
    </body>
    ```

    \<変更後\>

    ```HTML
        <script type="text/javascript" src="_scs_theme_root_/assets/js/breadcrumb.js"></script>
        <script data-main="/_sitescloud/renderer/renderer.js" src="/_sitescloud/renderer/require.js"></script>
        <!--$SCS_PAGE_FOOTER-->
        <!--$SCS_SITE_FOOTER-->

        <!-- Avoid FOUC issue in FF with async loading of style sheets -->
        <style> body { opacity: 1; }</style>
    </body>
    ```

    ※注意：このガイドで利用している**DemoSiteTheme/layouts/post.html**には既にbootstrap.bundle.min.jsをインポートしたため、ここでは、再度インポートする必要がありません。このjsがない場合、ここで次のように追加します。

    ```HTML
    <script type="text/javascript" src="_scs_theme_root_/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    ```

4.  post.html ファイルを保存します。編集したファイルがOCM上に同期されていることを確認します。
   
5.  **DemoSiteTheme/assets/js**フォルダ内に**breadcrumb.js**を新規作成し、テキストエディタで開き、下記コードを追加します。

    ```JAVASCRIPT
    // render breadcrumbs...
    function renderBreadcrumbs() {

        var breadcrumb = $('#breadcrumb');

        // generate title using page name and page title...
        var id = SCS.navigationCurr,
            header = document.createElement('h1');

        // generate [age breadcrumb...
        var path = document.createElement('ol');
        $(path).addClass("clearfix location-inside");
        if (id == SCS.navigationRoot) {
            // Home page...
            var bcItem = document.createElement('li');
            $(bcItem).addClass("active");
            $(bcItem).text(SCS.structureMap[id].name);
            $(path).append(bcItem);
        } else {
            // one of sub-pages...
            var ids = getParnetIds(id),
                bcItem, bcLink, linkData;
            for (var i = ids.length - 1; i >= 0; i--) {
                bcItem = document.createElement('li');
                if (ids[i] == id) {
                    $(bcItem).addClass("active");
                    $(bcItem).text(SCS.structureMap[ids[i]].name);
                } else {
                    bcLink = document.createElement('a');
                    linkData = SCSRenderAPI.getPageLinkData(ids[i]) || {};
                    if (linkData.href) {
                        $(bcLink).attr("href", linkData.href);
                    }
                    $(bcLink).text(SCS.structureMap[ids[i]].name);
                    $(bcItem).append(bcLink);
                    $(bcItem).append(" <span>&gt;</span> ");
                }
                $(path).append(bcItem);
            }
        }
        $(breadcrumb).append(path);
    }

    // returns array of parent page id's...
    function getParnetIds(nodeId) {
        var ids = [],
            i = 0;
        ids[i] = nodeId;
        while (nodeId != SCS.navigationRoot) {
            nodeId = SCS.structureMap[nodeId].parentId;
            i = i + 1;
            ids[i] = nodeId;
        }

        return ids;
    }

    // must wait for the script to be ready...
    if (document.addEventListener) {
        document.addEventListener('scsrenderstart', renderBreadcrumbs, false);
    } else if (document.attachEvent) {
        document.documentElement.scsrenderstart = 0;
        document.documentElement.attachEvent('onpropertychange', function(event) {
            if (event && (event.propertyName == "scsrenderstart")) {
                renderBreadcrumbs();
            }
        });
    }

    ```

6.  **breadcrumb.js**ファイルを保存します。編集したファイルがOCM上に同期されていることを確認します。
7.  **DemoSiteTheme/assets/css/custom.css**に下記コードを追加します。

    ```CSS
    /* breadcrumb */
    #breadcrumb ol {
        list-style-type: none;
    }

    #breadcrumb ol li {
        display:inline;
    }
    ```

8.  **DemoSiteTheme/assets/css/custom.css**ファイルを保存します。
9.  **DemoSiteTheme/layouts/post.html**をエディタで開きます。custom.cssを\</head>タグの前に追加します。

    ```HTML
    <link href="_scs_theme_root_/assets/css/custom.css" rel="stylesheet">
    ```

10.  **DemoSiteTheme/layouts/post.html**ファイルを保存します。


## 【確認】変更内容を確認する

1.  「DemoSite」の編集画面に戻り、F5で画面をリフレッシュします。
   
2.  「Post」ページにパンくずリストが表示されていることを確認します。  
![8bce4abda8de11673f5d2c8a04647703.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/ebc39a3c-3b21-5fcf-64ba-3960376830e1.png)
　
# 動的ナビゲーション・メニューの生成

ここでは、既存コンポーネントから、ページレイアウトファイルの静的ナビゲーション・メニューを、動的にレンダリングされるメニューに置き換えます。

## コンポーネントの追加

1.  WebブラウザからOCMにアクセスし、左サイド・ナビゲーションから「開発者」に切り替え、「すべてのコンポーネントの表示」をクリックします。
![4afe44619dcc9ac985d8a23b258e8951.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/86170f9f-4b43-a477-29d5-07401bf011e3.png)

2.  「**NavMenu**」を選択し、「コピー」をクリックします。
![be736018cfa9a6d38fd151d5361747ab.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/f652fa64-9586-92f5-8c1e-3ecec2f0ea66.png)

3.  コンポーネントの名前として「DemoNavMenu」と入力し、「コピー」をクリックします。
![35c7211dc195b446f606e51d7c760a34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/7043e336-a218-d9eb-ade9-59173086d173.png)

4.  コンポーネント「DemoNavMenu」が正常にコピーされていることを確認します。
![a8490b177bd1f7baea1ead056da84a0b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/1323c143-7dbc-ba5f-e11c-82b9e4126604.png)


## components.jsonの編集

1.  デスクトップに同期した**DemoSiteTheme/components.json**をエディタで開きます。
![c4916f010e862f6ee96d7f19c468837c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/acde084f-11ad-33c2-b74c-46ec79b70114.png)

2.  下記のようにコードを追加します。  
    \<変更前\>

    ```JSON
    [{
        "name": "Starter",
        "list": [
            {
                "type": "component",
                "id": "StarterComponent",
                "themed": true
            },
            {
                "type": "component",
                "id": "StarterFooter",
                "themed": true
            }
        ]
    }]
    ```

    \<変更後\>

    ```JSON
    [{
        "name": "Starter",
        "list": [
            {
                "type": "component",
                "id": "StarterComponent",
                "themed": true
            },
            {
                "type": "component",
                "id": "StarterFooter",
                "themed": true
            },
            {
                "type": "component",
                "id": "DemoNavMenu",
                "themed": true
            }
        ]
    }]
    ```

3.  components.jsonファイルを保存します。編集したファイルがOCM上に同期されていることを確認します。

## 【確認】変更内容を確認する

1.  「DemoSite」の編集画面に戻り、F5で画面をリフレッシュします。
2.  「Home」ページを開きます。
3.  左側のナビゲーションから「コンポーネント」に切り替えます。
4.  カスタム・コンポーネントの一覧から「DemoNavMenu」を一番上のスロットにドラッグ＆ドロップします。 
![6f746d6cfa4c492f877fe31356edc9a2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/01cc9c67-b168-c568-6642-bfead107489f.png)

5.  「保存」をクリックします。
![a4008fe083e99eff0436e307262abbae.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/60c1d76b-9a65-244f-1c0f-51859bbcca1e.png)

6.  ナビゲーション・メニューが表示されていることを確認します。  
![6face7346fc2493f1acebbf94e6540e1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/9b4cbf84-a067-6e2f-4f76-0e0ac1daff03.png)

## DemoNavMenuをデスクトップに同期する

1.  ローカルPC上の同期マネージャを開き、「オプション」アイコンをクリックし、「クラウドから同期化するフォルダの選択」をクリックして、事前に登録したアカウントを選択します。
![cfd28191019386bfa6c31196d2ba4074.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/d821c27e-384a-0af5-f628-50d4c0b9df64.png)

2.  「サイト・アセット」をクリックします。  
![abf2653458b27a12280e0792b43fbb22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/dd27acba-d0bf-3f6d-868e-b1e31f36748d.png)

3.  「**DemoNavMenu**」を選択し、「完了」をクリックします。  
![105d6f0d65fa50365521f59b75ba6d92.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/b4e935e2-7025-da58-d499-47d7110a727c.png)

4.  デスクトップ上のショートカットをダブルクリックします。  
![cd1f21c032b061680904509acda1cb29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/3b1fca47-b947-8bf0-686e-d92c9023c459.png)

5.  **DemoNavMenu**が同期されていることを確認します。  
![a5a7b6dc6f3592c9f1eb95829dc42232.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/74a10d7e-03b4-cd61-b652-a4c1377c1222.png)

## navMenu.cssの編集

1.  デスクトップに同期した**DemoNavMenu/assets/css/navMenu.css**をエディタで開きます。
   
2.  すべての内容をコメントアウトします。
3.  navMenu.cssファイルを保存します。
4.  **DemoSiteTheme/assets/css/custom.css**に下記コードを追加します。

    ```CSS
    /*NavMenu*/
    #navbarCont .scs-component-content{
        display: block;
    }
    ```

5.  **custom.css**ファイルを保存します。編集したファイルがOCM上に同期されていることを確認します。


## template.htmlの編集

1.  **DemoNavMenu/assets/template.html**のHTMLコードを、下記の様に修正します。
   
    \<変更前\>
    ```HTML
    <nav class="navbar navbar-expand-md">
        <button class="navbar-toggler ml-auto collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-expanded="false">
            <span class="navbar-toggler-icon"></span>
        </button>


        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto" data-bind="foreach: navMenus">
                <li data-bind="css: classes">
                    <a class="nav-link dropdown-toggle" data-bind="attr: {href: destination, target: target}, text: name"></a>
                    <!-- ko if: submenus().length > 0 -->
                    <ul class="dropdown-menu" data-bind="template: {name: 'submenu-template', foreach: submenus}"></ul>
                    <!-- /ko -->
                </li>
            </ul>
        </div>
    </nav>
    ```

    \<変更後\>
    ```HTML
    <nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
        <div class="container px-4 px-lg-5">
            <button class="navbar-toggler ml-auto collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-expanded="false">
                <span class="navbar-toggler-icon"></span>
            </button>


            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ms-auto py-4 py-lg-0" data-bind="foreach: navMenus">
                    <li data-bind="css: classes">
                        <a class="nav-link px-lg-3 py-3 py-lg-4" data-bind="attr: {href: destination, target: target}, text: name"></a>
                        <!-- ko if: submenus().length > 0 -->
                        <ul class="dropdown-menu" data-bind="template: {name: 'submenu-template', foreach: submenus}"></ul>
                        <!-- /ko -->
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    ```

2. template.html ファイルを保存します。編集したファイルがOCM上に同期されることを確認します。

## 【確認】変更内容を確認する

1.  「DemoSite」の編集画面に戻り、F5で画面をリフレッシュします。
   
2.  「Home」ページにナビメニューが次の図のように表示されていることを確認します。  
![0ad70e56a85412d0eb5aee4ad1b20958.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/8b703089-2fc5-7643-05c8-f581d78ad07f.png)

#　デジタル・アセットの登録

ここでは、リポジトリに画像ファイルをアップロードします。

## デジタル・アセットの登録

1.  WebブラウザからOCMにアクセスし、左サイド・ナビゲーションから「**アセット**」に切り替えます。
2.  フィルタ・パネルより、「**Demo Repository**」を選択します。（リポジトリが１つしかない場合は、自動的に選択されます。）
![95fb323f672ad5ab9a0e097995f0129c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/6eeec5b0-6437-7c6b-c284-c289d6a0282b.png)
3.  右上の「追加」→「このコンピュータから追加」をクリックします。
![4d13ee19f2ba025d84993e095050e2a3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/56d7822d-d60d-7cbd-9749-d2c54e3cea56.png)
4.  デスクトップ**DemoSiteTheme/assets/img**よりスロットに使用する画像ファイルを選択します。  
![13a27a9e082c29ccb44f2c83f0eda09b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/e80261ea-dbc8-bc69-3b38-09e225ce655c.png)
5.  「完了」をクリックします。  
![78d1b13dc90c23d64bc97d25d88ade39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/96f467fa-b774-2c54-bf3b-0c5052fdf9c1.png)
6.  画像がリポジトリにアップロードされていることを確認します。  
![195f3b8fe5132f77028160b0fe1c0400.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597244/0cc15551-d6f6-8a08-3a6e-218291528d30.png)

[その3に続きます](https://qiita.com/shinwata/private/a86594a5083907f750ec)