# 特定のページのみヘッダー・フッターを非表示にする方法と左右の余白を0にする方法

**URL:** <https://community.shopify.com/t/topic/187571>\
**Category:** Shopify テーマ\
**Created:** [January 30, 2023, 3:38am UTC](https://community.shopify.com/t/topic/187571 "2023-01-30T03:38:04Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

DawnテーマでLP用のpage.lp.jsonテンプレートだけヘッダー/フッターを非表示にし、スマホ表示時の左右余白を0にしたいという相談。

対応1（ヘッダー/フッター非表示）:
- layoutでheader/footerのセクション呼び出しを、template != 'page.lp' の条件で囲むよう提案。条件文字列はハンドル名lpではなくテンプレート名page.lpを使用。

対応2（スマホ左右余白0）:
- sections/main-page.liquid の .section-{{ section.id }}-padding を定義するstyle内で、template == 'page.lp' のときだけ padding-left/right: 0 を追加。
- 添付スクリーンショット（赤枠）で示された余白が対象であることを確認。

注意点:
- スマホで画面端まで要素があると誤タップの恐れがあり、余白を残す選択も検討すべき。
- 提示コードは十分な検証は未実施との但し書き。

結果/ステータス:
- 提案どおりの実装で2点とも解決。スレッドは解決済み。

<div class="post-metadata">

**Author:** ![tasq](https://avatars.discourse-cdn.com/v4/letter/t/ccd318/32.png) [@tasq](https://community.shopify.com/u/tasq)\
**Post date:** [January 30, 2023, 3:38am UTC](https://community.shopify.com/t/topic/187571/1 "2023-01-30T03:38:04Z")

</div>

お世話になります。

現在、Dawnというテーマを使用し、サイトを作成しています。  
Shopifyのページにて縦長の画像主体のLPを作りたいと考えております。

現在、テーマのテンプレートに「page.lp.json」というテンプレートを作成したのですが、以下の2点で躓いている状況です。

１．page.lp.jsonというテンプレートのみヘッダーとフッターを非表示

似た質問を見つけてハンドル名を「lp」にして試してみたのですが、非表示にはなりませんでした。

[https://community.shopify.com/post/1340226](https://community.shopify.com/post/1340226)

２．スマホで見た時に左右に余白ができてしまうのを0にしたい

スマホで見た時は左右の余白を0にしたいと考えております。

またテンプレートは初期の状態で以下のようなコードになっています。

```auto
{
  "sections": {
    "main": {
      "type": "main-page",
      "settings": {
        "padding_top": 28,
        "padding_bottom": 28
      }
    }
  },
  "order": [
    "main"
  ]
}

```

おわかりになる方がいらっしゃいましたら、ご教示いただけますと幸いです。  
何卒よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [January 30, 2023, 12:55pm UTC](https://community.shopify.com/t/topic/187571/2 "2023-01-30T12:55:49Z")

</div>

> １．page.lp.jsonというテンプレートのみヘッダーとフッターを非表示

参考にされている投稿のやり方でうまくいくかと思います。

しかし、質問者様の状況ですと、

ifの条件に使用する文字列はlpではなく、page.lpになりそうです。

下記のようになります。

```markup
{% if template != 'page.lp' %}
    {% section 'header' %}
    {% endif %}

~中略~

    {% if template != 'page.lp' %}
    {% section 'footer' %}
    {% endif %}

```

> ２．スマホで見た時に左右に余白ができてしまうのを0にしたい

余白というのは下図の赤枠の部分で合っていますでしょうか？

 ![screenshot_20230130_01.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/2/6/26e96dbba1d5722742bcbc66aad1b82a24fd5452.png)

合っているようでしたら、

セクション \> main-page.liquid

から下記の記述を探していただき、

```markup
{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

```

下記のようにされると良さそうです。

```markup
{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
    {% if template == 'page.lp' %}
    padding-right: 0;
    padding-left: 0;
    {% endif %}
  }

```

しかし、

余白というのが、上図の赤枠の部分であるなら、

その余白は無くさないほうがいいかもしれません。

スマートフォン表示において、

画面の端までコンテンツがあると、

リンクボタンなどのミスクリックなど、

ユーザーが意図しない操作をしてしまう原因になるためです。

なお、

上記いずれのコードも十分な検証はできておりませんので、

あくまで、ご参考まで。

(キュー田辺)

---

<div class="post-metadata">

**Author:** ![tasq](https://avatars.discourse-cdn.com/v4/letter/t/ccd318/32.png) [@tasq](https://community.shopify.com/u/tasq)\
**Post date:** [January 31, 2023, 6:48am UTC](https://community.shopify.com/t/topic/187571/3 "2023-01-31T06:48:35Z")

</div>

ご回答いただきましてありがとうございます。  
2つともうまくいきました。

今回は非常に丁寧にご回答いただきありがとうございました。

また機会がございましたら、よろしくお願いいたします。