# フッターメニューの高さ変更について

**URL:** <https://community.shopify.com/t/topic/231208>\
**Category:** サンプルコード集（アプリ・テーマ）\
**Tags:** theme-check\
**Created:** [July 9, 2023, 3:27pm UTC](https://community.shopify.com/t/topic/231208 "2023-07-09T15:27:22Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

**課題:**
Showcaseテーマのフッターメニューの高さを縮小したい。フッターにはSNSアイコンのみを表示する予定で、不要な余白を削除したいという要望。

**提案された解決策:**
- カスタムCSSを追加することで高さ調整が可能
- 管理画面のオンラインストア→カスタマイズ画面→カスタムCSSに追加
- 提供されたCSSコードには以下が含まれる:
  - スマートフォン用の調整（`@media (min-width: 768px)`まで）
  - PC用の調整（`@media (min-width: 768px)`以下）
  - padding-top/bottom を20pxに設定
  - margin-bottomを0pxに設定

**添付資料:**
調整前後の見た目を示す画像が2枚提供されている。

**ステータス:**
具体的なCSSコードが提示され、サイトに合わせて調整可能との案内がされている。

<div class="post-metadata">

**Author:** ![\_minminmo](https://avatars.discourse-cdn.com/v4/letter/_/b9e5f3/32.png) [@\_minminmo](https://community.shopify.com/u/_minminmo)\
**Post date:** [July 9, 2023, 3:27pm UTC](https://community.shopify.com/t/topic/231208/1 "2023-07-09T15:27:22Z")

</div>

お世話になっております。

フッターメニューの高さ変更についてアドバイスお願いします。

フッターにはSNSのアイコンのみ表記したいので

不要な高さをなくし高さを小さくしたいと思っています。

テーマは有料テーマのShowcaseです。

下記にてテーマ編集→footer.liquidを貼ります。

何卒、よろしくお願いいたします。

{% if section.blocks != blank %}

{% for block in section.blocks %} {% if block.type == 'menu' %}
{% if block.settings.title != blank %} {%- assign title\_word\_count = block.settings.title | split: ' ' | size -%}
###### {{- block.settings.title | escape -}}
{% endif %}

{% if block.settings.menu != blank %}

{% for link in linklists[block.settings.menu].links %}- {{- link.title -}}
{% endfor %}
{% endif %}

{% elsif block.type == ‘text’ %}

{% if block.settings.title != blank %} {%- assign title\_word\_count = block.settings.title | split: ' ' | size -%}
###### {{- block.settings.title | escape -}}
{% endif %}

{% if block.settings.text != blank %}

{{- block.settings.text -}}
{% endif %}

{% if block.settings.image != blank %}

{%- capture double\_image\_width -%}{{ block.settings.image\_width | times: 2 }}x{%- endcapture -%}

 ![{{ shop.name | escape }}]()

{% endif %}

{% if block.settings.show\_social\_icons != blank %}

{% capture icon\_size %}{% if settings.soc\_icons\_double %}x46{% else %}x30{% endif %}{% endcapture %} {% render 'social-icons', icon\_setting: settings.social\_custom\_icon\_footer, icon\_size: icon\_size %}
{% endif %}

{% elsif block.type == ‘newsletter’ %}

{% if block.settings.title != blank %} {%- assign title\_word\_count = block.settings.title | split: ' ' | size -%}
###### {{- block.settings.title | escape -}}
{% endif %}

{% if block.settings.text != blank %}

{{ block.settings.text }}
{% endif %}
{% form 'customer', id: 'footer\_newsletter\_signup' %} {% if form.posted\_successfully? %}

{{ 'layout.signup.post\_success' | t }}

{% else %} {% if form.errors %} {% for field in form.errors %}

{{ field | capitalize }} - {{ form.errors.messages[field] }}

{% endfor %} {% endif %}

{% render 'svg-rarrow-long' %} {% endif %} {% endform %}

{% if block.settings.show\_social\_icons\_newsletter != blank %}

{% capture icon\_size %}{% if settings.soc\_icons\_double %}x46{% else %}x30{% endif %}{% endcapture %} {% render 'social-icons', icon\_setting: settings.social\_custom\_icon\_footer, icon\_size: icon\_size %}
{% endif %}
{% endif %}

{% endfor %}

{% endif %}

{%- assign showing\_localization = false -%}  
{%- if section.settings.show\_language\_selector and localization.available\_languages.size \> 1 -%}{%- assign showing\_localization = true -%}{%- endif -%}  
{%- if section.settings.show\_country\_selector and localization.available\_countries.size \> 1 -%}{%- assign showing\_localization = true -%}{%- endif -%}

{% if section.settings.show\_payment\_icons %}
{% for type in shop.enabled\_payment\_types %} {{ type | payment\_type\_svg\_tag: class: 'section-footer\_\_payment-icon' }} {% endfor %}

{% if section.settings.custom\_payment\_icon %}  
 ![{{ section.settings.custom_payment_icon.alt }}]()  
{% endif %}

{% endif %}  
{% if section.settings.lower\_menu != blank %}

{% for link in linklists[section.settings.lower\_menu].links %}- {{- link.title -}}
{% endfor %}

{% endif %}

{% if section.settings.show\_language\_selector or section.settings.show\_country\_selector %}
{% render 'localization', input\_prefix: 'footer' %}
{% endif %}
© {{ "now" | date: "%Y" }} {{ shop.name }}.

{{ aa }}

{% schema %}  
{  
“name”: “Footer”,  
“class”: “section-footer”,  
“max\_blocks”: 4,  
“settings”: [  
{  
“type”: “link\_list”,  
“id”: “lower\_menu”,  
“label”: “Lower footer menu”,  
“info”: “This menu won’t show dropdown items.”  
},  
{  
“type”: “header”,  
“content”: “Payment methods”  
},  
{  
“type”: “checkbox”,  
“id”: “show\_payment\_icons”,  
“label”: “Show payment icons”,  
“default”: true,  
“info”: “Payment icons are pulled directly from Shopify based on your payment settings”  
},  
{  
“type”: “image\_picker”,  
“id”: “custom\_payment\_icon”,  
“label”: “Custom payment icon”,  
“info”: “40 x 25px recommended”  
},  
{  
“type”: “header”,  
“content”: “Country/Region Selector”,  
“info”: “To add a country/region, go to your [payment settings.](https://community.shopify.com/admin/settings/payments)”  
},  
{  
“type”: “checkbox”,  
“id”: “show\_country\_selector”,  
“label”: “Enable country/region selector”,  
“default”: true  
},  
{  
“type”: “header”,  
“content”: “Language Selector”,  
“info”: “To add a language, go to your [language settings.](https://community.shopify.com/admin/settings/languages)”  
},  
{  
“type”: “checkbox”,  
“id”: “show\_language\_selector”,  
“label”: “Enable language selector”,  
“default”: true  
}  
],  
“blocks”: [  
{  
“type”: “menu”,  
“name”: “Links”,  
“settings”: [  
{  
“type”: “text”,  
“id”: “title”,  
“label”: “Heading”,  
“default”: “Quick links”  
},  
{  
“type”: “link\_list”,  
“id”: “menu”,  
“label”: “Menu”,  
“info”: “This menu won’t show dropdown items.”,  
“default”: “footer”  
}  
]  
},  
{  
“type”: “text”,  
“name”: “Text/Social”,  
“settings”: [  
{  
“type”: “text”,  
“id”: “title”,  
“label”: “Heading”,  
“default”: “Talk about your store”  
},  
{  
“type”: “richtext”,  
“id”: “text”,  
“label”: “Text”,  
“default”: “

Use this text area to tell your customers about your brand and vision. You can change it in the theme editor.

”  
},  
{  
“type”: “image\_picker”,  
“id”: “image”,  
“label”: “Image”  
},  
{  
“type”: “range”,  
“id”: “image\_width”,  
“min”: 30,  
“max”: 200,  
“step”: 5,  
“unit”: “px”,  
“label”: “Footer image width”,  
“default”: 100  
},  
{  
“type”: “checkbox”,  
“id”: “show\_social\_icons”,  
“label”: “Show social media links”,  
“default”: true,  
“info”: “Add your social media links in Theme Settings \> Social media”  
}  
]  
},  
{  
“type”: “newsletter”,  
“limit”: 1,  
“name”: “Newsletter”,  
“settings”: [  
{  
“type”: “text”,  
“id”: “title”,  
“label”: “Heading”,  
“default”: “Newsletter”  
},  
{  
“type”: “richtext”,  
“id”: “text”,  
“label”: “Text”,  
“default”: “

A short sentence describing what someone will receive when signing up to newsletters.

”  
},  
{  
“type”: “checkbox”,  
“id”: “show\_social\_icons\_newsletter”,  
“label”: “Show social media links”,  
“default”: false,  
“info”: “Add your social media links in Theme Settings \> Social media”  
},  
{  
“type”: “paragraph”,  
“content”: “Customers who subscribe will have their email address added to the ‘accepts marketing’ [customer list](https://community.shopify.com/admin/customers?query=&accepts_marketing=1)”  
}  
]  
}  
]  
}  
{% endschema %}

---

<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:** [July 10, 2023, 10:25am UTC](https://community.shopify.com/t/topic/231208/2 "2023-07-10T10:25:59Z")

</div>

ご質問いただいた内容についてですが、SNSアイコンのみとのことでしたので、下記添付画像の様な見た目と推測し回答させていただきます。

 ![Qcoltd_0-1688984574443.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/f/d/fdb6d1053319fe678b91c47b2aa857e55b345d44.png)

高さの調整はCSSを追加することで下記添付画像のように調整することが可能かと思います。

 ![Qcoltd_1-1688984574506.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/f/8/8/f88bb0a272dedf0acd3362073ae99d967b6c8b16.jpeg)

追加するCSSは管理画面のオンラインストアからカスタマイズ画面を開いていただき、左側ハケのアイコンをクリックし、カスタムCSSに以下のCSSを追加ください。  
CSSは上段から@media (min-width: 768px) までがスマートフォン用の調整箇所、  
@media (min-width: 768px) 以下がPC用の調整箇所となります。

```markup
.section-footer .section-footer__row--blocks {
  padding-top: 20px;
  padding-bottom: 0px;
}
.section-footer .section-footer __row__ col {
  padding: 0;
}
.section-footer .section-footer__row-lower {
  padding-top: 20px;
  padding-bottom: 20px;
}
@media (min-width: 768px) {
  .section-footer .section-footer__row--blocks {
    padding-top: 20px;
  }
  .section-footer .section-footer __row--blocks .section-footer__ row__col {
    margin-bottom: 0px;
  }
  .section-footer .section-footer__row-lower {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

```

スマートフォン、PCとも空き幅は20pxとしていますが、サイトに合わせ調整ください。

ご参考まで  
(キュー小坂)