EC-CUBE4にLPページ作成

[作業環境](#作業環境)
[レイアウト作成](#レイアウト作成)
[ページ作成](#ページ作成)
[ブロック作成](#ブロック作成)
[レイアウト設定](#レイアウト設定)
[ブラウザで確認](#ブラウザで確認)

#作業環境

`EC-CUBE 4.0.5`
`php 7.2.24`
`MariaDB 10.5.13`

#レイアウト作成

`管理画面　＞　コンテンツ管理　＞　レイアウト管理`
「新規作成」

レイアウト名：LP01
端末種別：PC
「登録」


#ページ作成

`管理画面　＞　コンテンツ管理　＞　ページ管理`
「新規作成」
ページ名：LP01
URL：`https://example.com/user_data/` lp01
コード：

```
{#
This file is part of EC-CUBE

Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.

http://www.ec-cube.co.jp/

For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% extends 'default_frame.twig' %}

{% set body_class = 'front_page' %}

{% block stylesheet %}
    <style>
        .slick-slider {
            margin-bottom: 30px;
        }

        .slick-dots {
            position: absolute;
            bottom: -45px;
            display: block;
            width: 100%;
            padding: 0;
            list-style: none;
            text-align: center;
        }

        .slick-dots li {
            position: relative;
            display: inline-block;
            width: 20px;
            height: 20px;
            margin: 0 5px;
            padding: 0;

            cursor: pointer;
        }

        .slick-dots li button {
            font-size: 0;
            line-height: 0;
            display: block;
            width: 20px;
            height: 20px;
            padding: 5px;
            cursor: pointer;
            color: transparent;
            border: 0;
            outline: none;
            background: transparent;
        }

        .slick-dots li button:hover,
        .slick-dots li button:focus {
            outline: none;
        }

        .slick-dots li button:hover:before,
        .slick-dots li button:focus:before {
            opacity: 1;
        }

        .slick-dots li button:before {
            content: " ";
            line-height: 20px;
            position: absolute;
            top: 0;
            left: 0;
            width: 12px;
            height: 12px;
            text-align: center;
            opacity: .25;
            background-color: black;
            border-radius: 50%;

        }

        .slick-dots li.slick-active button:before {
            opacity: .75;
            background-color: black;
        }

        .slick-dots li button.thumbnail img {
            width: 0;
            height: 0;
        }
    </style>
{% endblock %}

{% block javascript %}
    <script>
        $(function() {
            $('.main_visual').slick({
                dots: true,
                arrows: false,
                autoplay: true,
                speed: 300
            });
        });
    </script>
{% endblock javascript %}

{% block main %}
    
    
{% endblock %}
```

レイアウト設定：PC「LP01」

「登録」

#ブロック作成

`管理画面　＞　コンテンツ管理　＞　ブロック管理`

「新規作成」

ブロック名：LP用トップブロック01
ファイル名：lp_top_01
コード：

```
<div id="lp-img"> 
<h1>
<picture>

<!-- 縦画像 -->
<source media="(max-width: 991px)" srcset="＜画像リンク＞" alt="＜画像の説明＞">
<!-- 横画像 -->
<img src="＜画像リンク＞"  alt="＜画像の説明＞">

</picture>
</h1>
</div>
```
「登録」

#レイアウト設定

`管理画面　＞　コンテンツ管理　＞　レイアウト管理`

「LP01」選択

未使用ブロックから「LP用トップブロック01」をドラッグ＆ドロップ

「登録」

#ブラウザで確認

`https://example.com/user_data_lp01`