Liquid、JavaScriptなどに関する質問
お世話になっております。
現在マーチャントのサイト修正をしています。
テーマは『Debut』を使用中です。
ヘッダーロゴの部分に背景色が出ています。
テーマの見出しとリンクの色から連動しているようです。
ヘッダー部分の検索・会員ボタンを削除したく、header.liquedから該当部分をコメントアウトした際に、ロゴの背景色がでてきました。
該当コード下記になります。
こちら背景色の透過もしくはヘッダーと同じ白色に合わせる方法ありますでしょうか。
ご教授頂ければ幸いです。
宜しくお願い致します。
<div class="grid__item {% if section.settings.align_logo == 'left' %}medium-up--one-quarter{% else %}medium-up--one-third medium-up--push-one-third{% endif %} text-right site-header__icons{% if shop.customer_accounts_enabled %} site-header__icons--plus{% endif %}">
<div class="site-header__icons-wrapper">
<!-- <button type="button" class="btn--link site-header__icon site-header__search-toggle js-drawer-open-top" data-predictive-search-open-drawer>
{% include 'icon-search' %}
<span class="icon__fallback-text">{{ 'layout.navigation.search' | t }}</span>
</button>
{% if shop.customer_accounts_enabled %}
{% if customer %}
<a href="{{ routes.account_url }}" class="site-header__icon site-header__account">
{% include 'icon-login' %}
<span class="icon__fallback-text">{{ 'layout.customer.account' | t }}</span>
</a>
{% else %}
<a href="{{ routes.account_login_url }}" class="site-header__icon site-header__account">
{% include 'icon-login' %}
<span class="icon__fallback-text">{{ 'layout.customer.log_in' | t }}</span>
</a>
{% endif %} -->
{% endif %}
<a href="{{ routes.cart_url }}" class="site-header__icon site-header__cart">
{% include 'icon-cart' %}
<span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
<div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %} critical-hidden" data-cart-count-bubble>
<span data-cart-count>{{ cart.item_count }}</span>
<span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span>
</div>
</a>
{% unless linklists[section.settings.main_linklist] == blank %}
<button type="button" class="btn--link site-header__icon site-header__menu js-mobile-nav-toggle mobile-nav--open" aria-controls="MobileNav" aria-expanded="false" aria-label="{{ 'layout.navigation.menu' | t }}">
{% include 'icon-hamburger' %}
{% include 'icon-close' %}
</button>
{% endunless %}
</div>
</div>
解決済! ベストソリューションを見る。
成功
スクリーンショットを拝見しましたが、ロゴはテキストではなく以下の画像を設定している状態ということでよろしいでしょうか?
うっすらと見えるだけなので自信はありませんが、上記であれば以下のCSSが影響していると思われます。(バージョンによって違いがあるかもしれません)
[data-image-loading-animation] {
background-color: var(--global-color-image-loader-primary);
-moz-animation: image-loader 2s 400ms infinite;
-o-animation: image-loader 2s 400ms infinite;
-webkit-animation: image-loader 2s 400ms infinite;
animation: image-loader 2s 400ms infinite; }
global-color-image-loader-primaryは以下のように設定されており、color_textと連動しています。
--global-color-image-loader-primary: {{ settings.color_text | color_modify: 'alpha', 0.06 }}
上記を踏まえまして、最も簡単な修正方法としてはCSSの上書きかと思いますので一例として以下記載します。
a.site-header__logo-image{
background-color: transparent;
animation-name: none
}
animationの結果として色が変化しているようなのでそこを無効化するだけでも良さそうですが、一応背景色自体も変更する記述です。
以上ですが効果がなかったり、管理画面から設定を変更する方法がある、または画像ではなくテキストを設定している、などの場合は申し訳ありません。
※不正投稿のエラーが出たのでモデレータに連絡しましたが、一応再投稿しました。
スクリーンショットを拝見しましたが、ロゴはテキストではなく以下の画像を設定している状態ということでよろしいでしょうか?
うっすらと見えるだけなので自信はありませんが、上記であれば以下のCSSが影響していると思われます。(バージョンによって違いがあるかもしれません)
[data-image-loading-animation] {
background-color: var(--global-color-image-loader-primary);
-moz-animation: image-loader 2s 400ms infinite;
-o-animation: image-loader 2s 400ms infinite;
-webkit-animation: image-loader 2s 400ms infinite;
animation: image-loader 2s 400ms infinite; }
global-color-image-loader-primaryは以下のように設定されており、color_textと連動しています。
--global-color-image-loader-primary: {{ settings.color_text | color_modify: 'alpha', 0.06 }}
上記を踏まえまして、最も簡単な修正方法としてはCSSの上書きかと思います。一例としては以下のような記述です。
※animationの結果として色が変化しているためanimationを無効化するだけで良いのですが、一応背景色自体も変更する記述です。
a.site-header__logo-image{
background-color: transparent;
animation: none;
}
以上ですが、もしも管理画面から設定を変更する方法がある、または画像ではなくテキストを設定しているなどの場合は申し訳ありません。
■追記
ご質問の趣旨と違うのですが、HTMLのコメントアウト終わりの位置を変更された方が良いかもしれません。
{% endif %} -->
{% endif %}
上記ではifの途中に間にコメントアウト終わりがあるので、ifが終わった後の位置の方が安全だと思います。
{% endif %}
{% endif %} -->
すでに直されておられましたら申し訳ありません。
成功
スクリーンショットを拝見しましたが、ロゴはテキストではなく以下の画像を設定している状態ということでよろしいでしょうか?
うっすらと見えるだけなので自信はありませんが、上記であれば以下のCSSが影響していると思われます。(バージョンによって違いがあるかもしれません)
[data-image-loading-animation] {
background-color: var(--global-color-image-loader-primary);
-moz-animation: image-loader 2s 400ms infinite;
-o-animation: image-loader 2s 400ms infinite;
-webkit-animation: image-loader 2s 400ms infinite;
animation: image-loader 2s 400ms infinite; }
global-color-image-loader-primaryは以下のように設定されており、color_textと連動しています。
--global-color-image-loader-primary: {{ settings.color_text | color_modify: 'alpha', 0.06 }}
上記を踏まえまして、最も簡単な修正方法としてはCSSの上書きかと思いますので一例として以下記載します。
a.site-header__logo-image{
background-color: transparent;
animation-name: none
}
animationの結果として色が変化しているようなのでそこを無効化するだけでも良さそうですが、一応背景色自体も変更する記述です。
以上ですが効果がなかったり、管理画面から設定を変更する方法がある、または画像ではなくテキストを設定している、などの場合は申し訳ありません。
※不正投稿のエラーが出たのでモデレータに連絡しましたが、一応再投稿しました。
返信遅くなり申し訳ございません。
ご回答誠にありがとうございます。
今回アイコンに対して、display:noneをかけることでHTMLからではく、CSSからアイコンを消すことができました。
その結果ロゴの後ろにでていた背景色が出てこなくなりました。
この度はご回答ありがとうございました。
東京都渋谷区代々木で30年以上、プランニングとグラフィックデザイン制作を営んでいる株式会社キュー。自社のアパレル事業やWeb制作・開発事業なども展開し、社員数が100名と小規模なが...
By rinaflora Sep 17, 2023お客様の検索はもちろん、消費行動によってセグメント管理することで、より効果的なマーケティングを行うことができます。今回は、便利な検索機能やセグメントの作成方法をご紹介!
By Alex06 Sep 3, 2023Shopifyでは多数の言語のサポートと、選択肢が提供されていることをご存知でしょうか?新しく導入されたサポートインボックスの詳細や、ヘルプセンターよりチャットを開始する方法など...
By Mirai Aug 20, 2023