ヘッダーロゴの背景色を透過したいです

[hrn321]

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

現在マーチャントのサイト修正をしています。
テーマは『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>

[Jizo_Inagaki]

スクリーンショットを拝見しましたが、ロゴはテキストではなく以下の画像を設定している状態ということでよろしいでしょうか？

• 白い矢印を左下に配置した透過背景のロゴ画像で、背景色が薄いピンク色で表示されている

うっすらと見えるだけなので自信はありませんが、上記であれば以下の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 %} -->

すでに直されておられましたら申し訳ありません。

[Jizo_Inagaki · Accepted solution]

スクリーンショットを拝見しましたが、ロゴはテキストではなく以下の画像を設定している状態ということでよろしいでしょうか？

• 白い矢印を左下に配置した透過背景のロゴ画像で、背景色が薄いピンク色で表示されている

うっすらと見えるだけなので自信はありませんが、上記であれば以下の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の結果として色が変化しているようなのでそこを無効化するだけでも良さそうですが、一応背景色自体も変更する記述です。

以上ですが効果がなかったり、管理画面から設定を変更する方法がある、または画像ではなくテキストを設定している、などの場合は申し訳ありません。

※不正投稿のエラーが出たのでモデレータに連絡しましたが、一応再投稿しました。

[hrn321]

返信遅くなり申し訳ございません。
ご回答誠にありがとうございます。

今回アイコンに対して、display:noneをかけることでHTMLからではく、CSSからアイコンを消すことができました。
その結果ロゴの後ろにでていた背景色が出てこなくなりました。

この度はご回答ありがとうございました。