こんにちは、makeshopのサポート担当です。
いつもmakeshopをご利用いただきありがとうございます。

今回は、クリエイターモードで「フリーページにもヘッダーとフッターを表示させたい」を表示する方法をご紹介します！

こんなお悩みありませんか？

・LPを作りたいけど、フリーページ作成画面がまっ白で、何を書いたらいいのかわからない・・・。
・フリーページのソースを書いてみたけど、ヘッダーやフッターが表示されない。
・ほかのページと同じデザインにしたいのに、CSSをどこに書いたらいいのかわからない・・・。

フリーページにもヘッダーとフッターを表示させたい

設定方法

ヘッダー、フッターのソースをほかのページと同じように書くことで、同じように表示されます。
下記の手順で試してみましょう！

【ソース例】

【1】ヘッダー、（サイドナビ、）フッターのあるページのソースを全部コピーする

トップページはソースが長いので、ソースが比較的短い「プライバシーポリシー」などのページをコピーしてみましょう。

例）デザインテンプレート【Compete】の場合

<!doctype html>
<html lang="ja" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title><{$page.title}></title>
<meta name="description" content="<{$page.description}>">
<link rel="canonical" href="<{$page.canonical_url}>">
<meta property="og:type" content="website">
<meta property="og:title" content="<{$page.title}>">
<meta property="og:description" content="<{$page.description}>">
<meta property="og:site_name" content="<{$shop.name}>">
<meta name="twitter:card" content="summary_large_image">
<link rel="shortcut icon" type="image/ico" href="<{$shop.favicon_url}>">
<link href="<{$page.css}>" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<{$makeshop.head}>
</head>

<body>
<{$makeshop.body_top}>
    <{$module.header}>

    <div class="contents">

        <div class="breadcrumb">
            <span class="breadcrumb-item"><a href="<{$url.top}>">ホーム</a></span>
            <span class="breadcrumb-item">プライバシーポリシー</span>
        </div>

        <div class="container">

            <{$module.side}>

            <main class="main">
                <section class="contents-area">
                    <div class="category-title">
                        <h2 class="guide-title">プライバシーポリシー<span>個人情報保護方針</span></h2>
                    </div>

                    <div class="policy-box">
                    <{$policy.content}>
                    </div>
                </section>
            </main>
        </div>
    </div>

    <{$module.footer}>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="<{$page.javascript}>"></script>
<{$makeshop.body_bottom}>
</body>
</html>

ソースをコピーして、フリーページのソース欄に貼り付け、保存してください。

【2】フリーページとして編集する

保存したHTMLの、パンくず、タイトルを編集します。
▼HTML

・パンくずを変更します。

<span class="breadcrumb-item">プライバシーポリシー</span>

↓

<span class="breadcrumb-item">ポイント2倍キャンペーン！</span>

・タイトルを変更します。

<h2 class="guide-title">プライバシーポリシー<span>個人情報保護方針</span></h2>

↓

<h2 class="guide-title">ポイント2倍キャンペーン！</h2>

・ページ内容のHTMLを作成します。

<div class="policy-box">
  <{$policy.content}>
</div>

↓

<div class="campaign-box">
  <p>ポイント2倍！</p>
　★この位置にページのソースを記述します★
</div>

【3】CSSを追加します。

レイアウトに必要なCSSは
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通

の「CSS」欄に記述するか、または、CSSファイルをファイルサーバーにアップロードし

</head>の前に

<link rel="stylesheet" href="アップロードURLパス/○○.css">

を記述してページに読み込ませてください。

完了

ヘッダーやフッターのあるフリーページが追加できました！

・【Complete】以外のデザインテンプレートでも、同じ手順で作成することができます。
・ソースの作成・修正方法、最適なサイズなどの作り方についてはサポート対象外です。

いかがでしたでしょうか。
クリエイターモードで「フリーページにもヘッダーとフッターを表示させたい」際にぜひお役立てください。

次回もお楽しみに！それではまた！