こんにちは、makeshopデザイン質問掲示板担当です。
いつもmakeshopをご利用いただきありがとうございます。

クリエイターモードのフリーページ編集画面に、ベーシックモードで作成した独自ページのソースコードを取り込める「独自ページ取り込み機能（フリーページ）」が追加されました。
今回は、この機能の使い方と、取り込んだあとに確認していただきたいポイントをご紹介します。

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

・ベーシックモードで作り込んだ独自ページを、クリエイターモードでも使いたい
・独自ページを一から作り直すのは大変…
・取り込んだら、ヘッダーやメニューが表示されなくなった
・取り込んだページのレイアウトが崩れてしまった

独自ページ取り込み機能（フリーページ）とは

ベーシックモードの独自ページのエディタ内に記述されているソースコードとページ名を、クリエイターモードのフリーページへそのまま取り込める機能です。
PC独自ページ・スマホ独自ページのどちらも取り込むことができます。

ただし、取り込まれるのは「ページ名」と「エディタ内のソースコード」だけです。
管理画面で設定していた項目は取り込まれませんので、ご注意ください。

たとえば、独自ページタイプで「左側メニューを含む」を設定していても、左側メニューのソースコードは取り込まれません。
クリエイターモードのフリーページには、ヘッダーやフッターを出力するかどうかを選ぶ設定項目がありません。ヘッダー・フッターなどが必要な場合は、フリーページのソースコードにご自身で記述を追加していただく必要があります。（方法は後半でご紹介します）

独自ページを取り込む手順

（１）取り込む独自ページを選ぶ

フリーページ編集画面の「独自ページ取り込み」で「PC」または「スマホ」を選び、プルダウンから取り込みたい独自ページを選択します。
※初期状態では「PC」が選択されています。
※独自ページが1件もない場合は、「独自ページ取り込み」の項目は表示されません。

（２）「取り込む」ボタンを押す

確認メッセージが表示されます。メッセージには、独自ページで設定していた内容（ページ制限など）が表示されますので、取り込み後の作業のためにメモしておきましょう。

（３）「OK」を押す

確認メッセージの「OK」を押すと、入力欄に独自ページのページ名とソースコードが反映されます。

（４）ページURL・ステータスを指定して「保存」ボタンを押す

ページURLを入力し、ステータス（公開・非公開）を指定します。プレビューで表示を確認し、「保存」ボタンを押すと、取り込んだ内容がフリーページとして保存されます。

取り込み時の注意事項

<{$makeshop.head}>
<{$makeshop.body_top}>
<{$makeshop.body_bottom}>

（変更前）
<a href="javascript:void(0)" data-id="<{$search_form.search_url}>">検索</a>

（変更後）
<a href="<{$search_form.search_url}>">検索</a>

取り込んだあとに確認したいこと

取り込まれるのはエディタ内のソースコードだけなので、ベーシックモードで管理画面の設定によって表示していたものは、フリーページ側で記述を補う必要があります。

ヘッダー・メニューはソースコードに記述して表示する

ベーシックモードの独自ページで表示していたヘッダーや各メニューは、クリエイターモードでは次のタグをフリーページ内に記述することで表示できます。
ここでは、クリエイターモードの代表的なデザインセット「Complete」「Pulsefit」を例に解説します。

ヘッダー（<head>）の記述がない場合は、SEOのためにも追記を

独自ページのソースコードが本文部分だけの場合、取り込んだフリーページには<head>タグの記述がありません。
<head>内のページタイトル（<title>）や説明文（meta description）は、検索結果に表示される情報です。また、デザインのCSSを読み込む記述もここに入ります（次の項目でご紹介します）。
表示を整えるためにも、SEOの観点からも、<head>の記述は追加しておくことをおすすめします。
<head>の具体的な記述例は、「デザインセット別：ヘッダー・メニューを追加する方法」でご紹介していますので、あわせて参考にしてください。

フリーページにCSSを適用するには

フリーページには、ほかのページのような専用の「CSS」欄がありません。また、何も記述しない状態では、全ページ共通「CSS」欄の内容も読み込まれません。
ヘッダーやメニューのタグを記述しても、CSSが読み込まれていないと見た目が整わないため、次のいずれかの方法でCSSを適用してください。

方法1：全ページ共通「CSS」欄の内容を読み込む

フリーページの<head>～</head>内に、次の記述を追加します。デザインセットのヘッダー・メニューなどの見た目は全ページ共通「CSS」欄に入っているので、まずはこの記述が必要です。

<link rel="stylesheet" href="<{$page.css}>">

フリーページ用に追加したいCSSも、全ページ共通「CSS」欄に書いておけば、この記述で読み込まれます。

方法2：フリーページのエディタ内に直接記述する

そのフリーページだけに使うCSSは、<head>～</head>内に<style>タグで直接記述することもできます。

<style type="text/css">
/* このフリーページだけに適用するCSS */
</style>

方法3：CSSファイルを読み込む

CSSファイルをファイルサーバーにアップロードし、<head>～</head>内で読み込むこともできます。

<link rel="stylesheet" href="https://gigaplus.makeshop.jp/[ショップID]/フォルダ名/○○.css">

会員専用ページは条件文で作れます

「ページ制限」の設定は取り込まれませんが、会員専用ページは、ログインしているかどうかの条件文をフリーページ内に記述することで作成できます。

<{if $member.is_logged_in}>
<!-- ログインしている場合に表示 -->
★取り込んだソースコード★
<{else}>
<!-- ログインしていない場合に表示 -->
会員様限定のページです。ログインしてください。
<a href="<{$url.login}>">ログインする</a>
<{/if}>

デザインセット別：ヘッダー・メニューを追加する方法

ここからは、「Complete」「Pulsefit」それぞれで、フリーページにヘッダー・メニューを追加する方法を解説します。
ソースコードの編集に慣れていない方でも作業しやすいように、取り込んだソースコードの「上」と「下」に、用意したソースコードを貼り付けるだけの手順にしています。

まずは、取り込んだ独自ページのパターンを確認しましょう

ベーシックモードで独自ページをどのように設定していたかによって、おすすめの作業が変わります。
作業を始める前に、「独自ページタイプ」と「ページ制限」の2つを確認しておきましょう。（取り込み時の確認メッセージにも表示されます）

STEP A　独自ページタイプを確認する

STEP B　ページ制限を確認する（PC・スマホ共通）

作業の流れ

STEP1　独自ページを取り込む

「独自ページを取り込む手順」のとおりに「取り込む」→「OK」を押すと、エディタ内に独自ページのソースコードが反映されます。
この時点では、まだ「保存」を押さなくても大丈夫です。

STEP2　「上部分」を、エディタのいちばん上に貼り付ける

エディタ内の1行目の先頭にカーソルを置き、デザインセットに合わせた「上部分」のソースコードをコピーして貼り付けます。

STEP3　「下部分」を、エディタのいちばん下に貼り付ける

エディタ内の最後の行の末尾にカーソルを置き、改行してから「下部分」のソースコードをコピーして貼り付けます。

STEP4　「ページ名」を書き換えて保存する

「上部分」の中にある「ページ名」という文字（2か所）を、ページの内容に合わせて書き換え、「保存」を押します。
保存したら、PC・スマホの両方でページの表示を確認しましょう。

Completeの場合

上部分（エディタのいちばん上に貼り付け）

<!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">ページ名</h2>
                    </div>

<!-- ▼ここから下が、取り込んだソースコードです -->

下部分（エディタのいちばん下に貼り付け）

<!-- ▲ここから上が、取り込んだソースコードです -->

                </section>
            </main>
        </div>
    </div>

    <{$module.footer}><!-- 下段メニュー -->

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

Pulsefitの場合

上部分（エディタのいちばん上に貼り付け）

<!doctype html>
<html lang="ja">
<head>
    <{$module.head}>
    <style type="text/css">
    .freepage-contents {
      margin: 100px auto 80px;
      max-width: 880px;
      padding: 0 24px;
    }
    </style>
</head>

<body>
<{$makeshop.body_top}>
    <header>
        <{$module.header}><!-- 上段メニュー -->
    </header>

    <main>
        <section class="freepage-contents">
            <div class="section-heading center">
                <h2>ページ名</h2>
            </div>

<!-- ▼ここから下が、取り込んだソースコードです -->

下部分（エディタのいちばん下に貼り付け）

<!-- ▲ここから上が、取り込んだソースコードです -->

        </section>
    </main>

    <footer>
        <{$module.footer}><!-- 下段メニュー -->
    </footer>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="<{$page.javascript}>"></script>
    <script src="https://unpkg.com/swiper@12.2.0/swiper-bundle.min.js"></script>
    <{$makeshop.body_bottom}>
</body>
</html>

ページタイトル・説明文の注意点

上部分の<head>内にある <{$page.title}>（ページタイトル）と <{$page.description}>（説明文）は、SEO設定の状況によって表示される内容が変わります。

ショップ構築 / 設定 / SEO・SNS・マーケティング / SEO設定

「個別設定を適用する」の場合は、上部分の<head>～</head>内を次のように書き換えてください。

<title>〇〇〇〇〇</title>
<meta name="description" content="〇〇〇〇〇">

※〇〇〇〇〇に、そのページのタイトル・説明文を記述してください。

レイアウトが崩れたときの考え方

独自ページ取り込み機能は、独自ページのソースコードをそのまま取り込みます。
独自ページはベーシックモードのデザインに合わせて作られているため、クリエイターモードのデザインと組み合わせると、レイアウト崩れが起きる場合があります。
ショップ様ごとにデザインが異なるため修正方法も一つではありませんが、崩れの原因はおおむね次のパターンに分けられます。表示を確認するときの目安にしてください。

① CSSが読み込まれていない

ヘッダーやメニューが縦に並んでしまう、文字や画像が装飾のない状態で表示される、という場合は、CSSが読み込まれていない可能性があります。フリーページは、何も記述しない状態ではCSSが読み込まれません。
→ <head>内に <link rel=”stylesheet” href=”<{$page.css}>”> があるか確認してください。

② 横幅が固定されている

ベーシックモードでは、本文の横幅を960pxなどで固定して作られていることが多くあります。クリエイターモードのデザインは本文エリアの幅が異なり、スマホ表示にも対応しているため、横にはみ出したり、スマホで横スクロールが出たりします。
→ width の固定値を max-width: 100%; にする、画像に max-width: 100%; height: auto; を指定する、といった調整が目安です。

③ ベーシックモードのCSSで装飾していた

独自ページ内のクラス名に対する装飾を、ベーシックモードのCSSに書いていた場合、そのCSSは取り込まれないため装飾が外れます。
→ 必要な記述を、全ページ共通「CSS」欄またはフリーページのエディタ内（<style>タグ）に移してください。

④ クリエイターモードのCSSの影響を受けている

全ページ共通「CSS」欄を読み込むと、デザインセットのCSSが独自ページの部分にも適用されます。デザインセットのCSSには、見出しや余白、リストの点などを初期化するCSSが含まれています。そのため、見出しの大きさや行間、箇条書きの見た目が変わることがあります。
→ 変わってしまった部分だけ、フリーページ用のクラス名を付けて指定し直してください。

⑤ 本文がヘッダーに隠れている

画面上部に固定されるヘッダーのデザインでは、本文の上部が隠れることがあります。
→ 本文を囲む要素に上の余白（margin-top）をとってください。

⑥ 表示されないタグや文字が残っている

ベーシックモード用の独自タグのうち、自動で置き換えられないものは正しく表示されません。
→ 取り込み後にプレビューで表示を確認し、正しく表示されない部分はクリエイターモード用のタグに書き換えてください。特にスマホ独自ページの変数タグは、自動で置き換わらない場合が多くあります。スマホ独自ページの検索ボタンは、取り込み時の注意事項の方法で書き換えが必要です。

まとめ

・独自ページ取り込み機能（フリーページ）で取り込まれるのは「ページ名」と「エディタ内のソースコード」だけ
・ヘッダー・上段メニュー・下段メニュー・左側メニューは、フリーページ内に記述して表示する
・SEOのためにも、<head>の記述は追加しておくのがおすすめ
・会員専用ページは、ログインの条件文で作成できる
・フリーページには専用の「CSS」欄がないため、<{$page.css}>の読み込みやエディタ内への記述でCSSを適用する
・レイアウトが崩れたら、「CSSの読み込み」「横幅」「固定ヘッダー」などのポイントから確認する

いかがでしたでしょうか。
ベーシックモードで作り込んだ独自ページを、クリエイターモードでもぜひ活用してください。

それではまた！