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

**URL:** <https://community.shopify.com/t/topic/29347>\
**Category:** 技術的なQ＆A\
**Created:** [December 24, 2020, 4:57pm UTC](https://community.shopify.com/t/topic/29347 "2020-12-24T16:57:24Z")\
**Posts on this page:** 4\
**Page:** 1

## AI-generated summary

Debutテーマで、ヘッダーの検索・会員ボタンをheader.liquid側でコメントアウトしたところ、透過PNGのヘッダーロゴ背面に薄い背景色が表示される問題が相談された。ロゴ画像自体ではなく、CSSの読み込みアニメーションが影響している可能性が指摘された。

- 原因候補: `[data-image-loading-animation]` による `background-color` と `animation`
- 補足: 背景色は `settings.color_text` と連動しており、テーマ設定の文字色由来の薄い色になっている可能性
- 提案された対処: `a.site-header__logo-image { background-color: transparent; animation: none; }` などでCSSを上書き

あわせて、Liquidの`if`文の途中でコメントアウトを閉じる書き方は安全でないため、コメント位置の見直しも助言された。

最終的には、該当アイコンをHTML編集ではなくCSSで `display: none;` にして非表示化したところ、ロゴ背面の色は出なくなった。問題は解消済み。

<div class="post-metadata">

**Author:** ![hrn321](https://avatars.discourse-cdn.com/v4/letter/h/f0a364/32.png) [@hrn321](https://community.shopify.com/u/hrn321)\
**Post date:** [December 24, 2020, 4:57pm UTC](https://community.shopify.com/t/topic/29347/1 "2020-12-24T16:57:24Z")

</div>

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

現在マーチャントのサイト修正をしています。  
テーマは『Debut』を使用中です。

ヘッダーロゴの部分に背景色が出ています。  
テーマの見出しとリンクの色から連動しているようです。

 ![2020-12-25_01h37_17.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/b/d/bd77b113331e2021ba84079b4f936334e208e29e.png)

ヘッダー部分の検索・会員ボタンを削除したく、header.liquedから該当部分をコメントアウトした際に、ロゴの背景色がでてきました。  
該当コード下記になります。

こちら背景色の透過もしくはヘッダーと同じ白色に合わせる方法ありますでしょうか。

ご教授頂ければ幸いです。

宜しくお願い致します。

```markup

        

          {% endif %}

          
            {% include 'icon-cart' %}
            {{ 'layout.cart.title' | t }}
            

              {{ cart.item_count }}
              {{ 'layout.cart.items_count' | t: count: cart.item_count }}
            

          

          {% unless linklists[section.settings.main_linklist] == blank %}
            
          {% endunless %}
        

      

```

---

<div class="post-metadata">

**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\
**Post date:** [December 25, 2020, 8:58am UTC](https://community.shopify.com/t/topic/29347/2 "2020-12-25T08:58:58Z")

</div>

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

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

うっすらと見えるだけなので自信はありませんが、上記であれば以下のCSSが影響していると思われます。(バージョンによって違いがあるかもしれません)

```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と連動しています。

```css
--global-color-image-loader-primary: {{ settings.color_text | color_modify: 'alpha', 0.06 }}

```

上記を踏まえまして、最も簡単な修正方法としてはCSSの上書きかと思います。一例としては以下のような記述です。  
※animationの結果として色が変化しているためanimationを無効化するだけで良いのですが、一応背景色自体も変更する記述です。

```css
a.site-header__logo-image{
    background-color: transparent;
    animation: none;
}

```

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

■追記

ご質問の趣旨と違うのですが、HTMLのコメントアウト終わりの位置を変更された方が良いかもしれません。

```markup
　　{% endif %} -->
{% endif %}

```

上記ではifの途中に間にコメントアウト終わりがあるので、ifが終わった後の位置の方が安全だと思います。

```markup
　　{% endif %}
{% endif %} -->

```

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

---

<div class="post-metadata">

**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\
**Post date:** [December 26, 2020, 4:40am UTC](https://community.shopify.com/t/topic/29347/3 "2020-12-26T04:40:01Z")

</div>

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

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

うっすらと見えるだけなので自信はありませんが、上記であれば以下のCSSが影響していると思われます。(バージョンによって違いがあるかもしれません)

```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と連動しています。

```css
--global-color-image-loader-primary: {{ settings.color_text | color_modify: 'alpha', 0.06 }}

```

上記を踏まえまして、最も簡単な修正方法としてはCSSの上書きかと思いますので一例として以下記載します。

```css
a.site-header__logo-image{
    background-color: transparent;
    animation-name: none
}

```

animationの結果として色が変化しているようなのでそこを無効化するだけでも良さそうですが、一応背景色自体も変更する記述です。

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

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

---

<div class="post-metadata">

**Author:** ![hrn321](https://avatars.discourse-cdn.com/v4/letter/h/f0a364/32.png) [@hrn321](https://community.shopify.com/u/hrn321)\
**Post date:** [January 9, 2021, 12:35am UTC](https://community.shopify.com/t/topic/29347/4 "2021-01-09T00:35:59Z")

</div>

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

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

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