こんにちは、makeshopのサポート担当です。
いつもmakeshopをご利用いただきありがとうございます。
今回は、クリエイターモードで「フリーページにもヘッダーとフッターを表示させたい」を表示する方法をご紹介します！
こんなお悩みありませんか？
・LPを作りたいけど、フリーページ作成画面がまっ白で、何を書いたらいいのかわからない・・・。
・フリーページのソースを書いてみたけど、ヘッダーやフッターが表示されない。
・ほかのページと同じデザインにしたいのに、CSSをどこに書いたらいいのかわからない・・・。
フリーページにもヘッダーとフッターを表示させたい
設定方法
ヘッダー、フッターのソースをほかのページと同じように書くことで、同じように表示されます。
下記の手順で試してみましょう！
【ソース例】
【1】ヘッダー、（サイドナビ、）フッターのあるページのソースを全部コピーする
トップページはソースが長いので、ソースが比較的短い「プライバシーポリシー」などのページをコピーしてみましょう。
例）デザインテンプレート【Compete】の場合
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!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
|
1 |
<span class="breadcrumb-item">プライバシーポリシー</span> |
↓パンくずを変更します。
|
1 |
<span class="breadcrumb-item">ポイント2倍キャンペーン！</span> |
|
1 |
<h2 class="guide-title">プライバシーポリシー<span>個人情報保護方針</span></h2> |
↓タイトルを変更します。
|
1 |
<h2 class="guide-title">ポイント2倍キャンペーン！</h2> |
|
1 2 3 |
<div class="policy-box"> <{$policy.content}> </div> |
↓ページのHTMLを作成します。
|
1 2 3 4 |
<div class="campaign-box"> <p>ポイント2倍！</p> ★この位置にページのソースを記述します★ </div> |
【3】CSSを追加します。
レイアウトに必要なCSSは
【ショップデザイン】>【クリエイターモード】>【全ページ共通】
内の【CSS】に記述するか、
または、
CSSファイルをファイルサーバーにアップロードし
の前に
|
1 |
<link rel="stylesheet" href="アップロードURLパス/○○.css"> |
を記述してページに読み込ませてください。
完了
ヘッダーやフッターのあるフリーページが追加できました！
・ソースの作成・修正方法、最適なサイズなどの作り方についてはサポート対象外です。
いかがでしたでしょうか。
クリエイターモードで「フリーページにもヘッダーとフッターを表示させたい」際にぜひお役立てください。
次回もお楽しみに！それではまた！
