FROM CACHE - jp_header

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

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

こどもふくminminmo
Shopify Partner
7 0 0

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

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

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

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

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

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

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

 

<div data-section-type="footer">
{% if section.blocks != blank %}
<div class="wide-container section-footer__row-container" role="navigation" aria-label="{{ 'layout.footer.navigation_aria_label' | t | escape }}">
<div class="section-footer__row section-footer__row--blocks" data-num-blocks="{{ section.blocks.size }}">
{% for block in section.blocks %}
{% if block.type == 'menu' %}
<div class="section-footer__row__col section-footer__menu-block" {{ block.shopify_attributes }}>
{% if block.settings.title != blank %}
{%- assign title_word_count = block.settings.title | split: ' ' | size -%}
<h6 class="section-footer__title{% if title_word_count < 4 %} no-wrap{% endif %}">
{{- block.settings.title | escape -}}
</h6>
{% endif %}

{% if block.settings.menu != blank %}
<ul class="section-footer__menu-block__menu">
{% for link in linklists[block.settings.menu].links %}
<li>
<a data-cc-animate-click href="{{ link.url }}" {% if link.title.size < 25 %}class="no-wrap"{% endif %}>
{{- link.title -}}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</div>

{% elsif block.type == 'text' %}
<div class="section-footer__row__col section-footer__text-block {% if block.settings.text != blank %}section-footer__text-block--with-text{% endif %}">
{% if block.settings.title != blank %}
{%- assign title_word_count = block.settings.title | split: ' ' | size -%}
<h6 class="section-footer__title{% if title_word_count < 4 %} no-wrap{% endif %}">
{{- block.settings.title | escape -}}
</h6>
{% endif %}

{% if block.settings.text != blank %}
<div class="section-footer__text">
{{- block.settings.text -}}
</div>
{% endif %}

{% if block.settings.image != blank %}
<div class="section-footer__text-block__image">
{%- capture double_image_width -%}{{ block.settings.image_width | times: 2 }}x{%- endcapture -%}
<div class="rimage-outer-wrapper" style="width: {{ block.settings.image_width }}px">
<div class="rimage-wrapper lazyload--placeholder" style="padding-top:{{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%">
<img class="rimage__image lazyload fade-in" data-src="{{ block.settings.image | img_url: double_image_width }}" alt="{{ shop.name | escape }}" />
</div>
</div>
</div>
{% endif %}

{% if block.settings.show_social_icons != blank %}
<div class="section-footer__text-block__social">
{% 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 %}
</div>
{% endif %}
</div>

{% elsif block.type == 'newsletter' %}
<div class="section-footer__row__col section-footer__newsletter-block">
{% if block.settings.title != blank %}
{%- assign title_word_count = block.settings.title | split: ' ' | size -%}
<h6 class="section-footer__title{% if title_word_count < 4 %} no-wrap{% endif %}">
{{- block.settings.title | escape -}}
</h6>
{% endif %}

{% if block.settings.text != blank %}
<div class="section-footer__text">
{{ block.settings.text }}
</div>
{% endif %}

<div class="signup-form">
{% form 'customer', id: 'footer_newsletter_signup' %}
{% if form.posted_successfully? %}
<p class="section-footer__newsletter-block__message signup-form__response">{{ 'layout.signup.post_success' | t }}</p>
{% else %}
{% if form.errors %}
{% for field in form.errors %}
<p class="section-footer__newsletter-block__message--error signup-form__response">
{{ field | capitalize }} - {{ form.errors.messages[field] }}
</p>
{% endfor %}
{% endif %}
<input type="hidden" name="contact[tags]" value="prospect,newsletter"/>
<p>
<input type="email"
placeholder="{{ 'layout.signup.placeholder' | t }}"
class="signup-form__email"
value=""
name="contact[email]"
aria-label="{{ 'layout.signup.input_label' | t | escape }}" />
</p>
<button class="button no-hover signup-form__button" type="submit" aria-label="{{ 'layout.signup.submit' | t }}">
{% render 'svg-rarrow-long' %}
</button>
{% endif %}
{% endform %}
</div>

{% if block.settings.show_social_icons_newsletter != blank %}
<div class="section-footer__text-block__social">
{% 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 %}
</div>
{% endif %}
</div>
{% endif %}

{% endfor %}
</div>
</div>
{% 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 -%}
<div class="wide-container section-footer__row-container {% if showing_localization %}section-footer__row-container--with-localization{% endif %}">
<div class="section-footer__row section-footer__row-lower">
<div class="section-footer__row__col">
{% if section.settings.show_payment_icons %}
<div class="section-footer__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 %}
<img class="section-footer__payment-icon payment-icon--custom"
src="{{ section.settings.custom_payment_icon | img_url: '120x' }}"
alt="{{ section.settings.custom_payment_icon.alt }}"
width="{{ section.settings.custom_payment_icon.width }}"
height="{{ section.settings.custom_payment_icon.height }}"
/>
{% endif %}
</div>

{% endif %}
{% if section.settings.lower_menu != blank %}
<div class="section-footer__lower-menu">
<ul class="section-footer__lower-menu__list">
{% for link in linklists[section.settings.lower_menu].links %}
<li>
<a data-cc-animate-click href="{{ link.url }}">
{{- link.title -}}
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</div>
<div class="section-footer__row__col">
{% if section.settings.show_language_selector or section.settings.show_country_selector %}
<div class="section-footer__localization">
{% render 'localization', input_prefix: 'footer' %}
</div>
{% endif %}

<div class="copyright">
<span class="copy">&copy; {{ "now" | date: "%Y" }} <a data-cc-animate-click href="{{ routes.root_url }}">{{ shop.name }}</a>.</span>

{{ aa }}

</div>
</div>
</div>
</div>
</div>


{% 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](https://help.shopify.com/manual/payments)"
},
{
"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.](/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.](/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": "<p>Use this text area to tell your customers about your brand and vision. You can change it in the theme editor.</p>"
},
{
"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": "<p>A short sentence describing what someone will receive when signing up to newsletters.</p>"
},
{
"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](/admin/customers?query=&accepts_marketing=1)"
}
]
}
]
}
{% endschema %}

1件の返信1

Qcoltd
Shopify Partner
1076 442 436

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

Qcoltd_0-1688984574443.png

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

Qcoltd_1-1688984574506.png

 

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

.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としていますが、サイトに合わせ調整ください。


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

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/