ページ管理でLPを作成する場合（CSSのリセットやmp4ファイルの扱い）

CSSのリセット

外部で作成したLPページをecforceに組み込む際、
ecfoeceのシステムがデフォルトで読み込んでくるcss等の影響で、
ecfoeceに組み込んだ際に微妙に崩れたり、フォントが置き換わったりすることがあります。

そのため、不要なCSSの削除や、ヘッダーフッターなどを非表示にするためのコードを作成してます。
ec_force/shop/snippets/_ykl_lp_head_file_reset.html.liquid

<script>
    // 既存のcss削除
    (function() {
    var targets = [
        'ec_force/assets/util.css',
        'ec_force/assets/bundle.css',
        'ec_force/assets/theme.css',
        'common/css/bscstm.1.2.css',
        'common/css/common.css',
        'common/css/sub.css'
    ];

    document.querySelectorAll('link[rel="stylesheet"]').forEach(function(el) {
        var href = el.getAttribute('href') || '';
        if (targets.some(function(t) { return href.indexOf(t) !== -1; })) {
        el.parentNode.removeChild(el);
        }
    });
    })();
</script>
<style>
    .header, #service-guide, .footer, #tm_chat_iframe{
        display: none!important;
    }
</style>

コードの反映

上記コードをページに反映するには、
「テーマ管理＞アクション＞コードの修正」から「_head.html.liquid」の編集に進み、
ページ管理で作成したURLを下記のコード部分に追加。

if文の条件を「or url_path == ‘相対パスのURL’」で繋いでいけば追加可能

mp4ファイルの扱い

ecforceのメディア領域には動画ファイルをアップロードする事ができません。
※オプション契約で利用可能になるが、2026年5月時点では未契約

そのため、動画を利用するのであれば別のサーバーにアップし、絶対パスで読み込む必要があります。
ヤクルト様の場合、キノスラのAWSアカウントでS3に動画をアップして対応するようにしてます。

キノスラのAWSアカウントは、トラストログインの下記アプリ名称でログイン可能です。
■アプリ名
CYN 本 AWS 本番

また二段階認証を設定しているため、
会社の赤iPhoneでGoogle Authenticatorを開き、
「Amason Web Services:cnsr_aws」に表示されているコードを入力してください。

2026年5月時点ではなぜか、chromeだとAWSにログインできませんでした。
chromeでログインできない場合、edgeなどの他ブラウザを試してください。

S3は容量と通信料での課金となります。
今後、動画の使用が増えてきて料金が目に見えて増額していくようであれば
請求について青山さんと相談するようにしてください。