# メニューとフッターに「line」アイコンの設置方法について

**URL:** <https://community.shopify.com/t/line/212590>\
**Category:** 技術的なQ＆A\
**Tags:** css\
**Created:** [May 1, 2023, 6:38am UTC](https://community.shopify.com/t/line/212590 "2023-05-01T06:38:05Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

Dawnテーマでメニュー（ドロワー）とフッターにLINEアイコンを追加する方法についての質問と回答。

**提供された解決策:**
- ファイルをアップロードし、`header.liquid`と`footer.liquid`にHTMLコードを追加
- PC版ではサーチアイコンの左、スマホ版ではメニュー内ログインボタン上に配置
- フッターではSNSアイコンと同じ位置に表示
- カスタムCSSでアイコンサイズと配置を調整（レスポンシブ対応含む）

**発生した問題:**
Dawn 13.0.1で実装を試みたユーザーが、カスタムCSSを追加した際に「オンラインストアのエディタセッションを公開できません」というエラーが発生。アイコンの位置とサイズを変更したコードを使用しており、解決策を求めている状況。

**現在の状態:**
具体的なエラー解決方法は未回答のまま。コードスニペットと画像による詳細な手順が提供されているが、バージョンや設定による互換性の問題が残されている。

<div class="post-metadata">

**Author:** ![merrow](https://avatars.discourse-cdn.com/v4/letter/m/9fc348/32.png) [@merrow](https://community.shopify.com/u/merrow)\
**Post date:** [May 1, 2023, 6:38am UTC](https://community.shopify.com/t/line/212590/1 "2023-05-01T06:38:05Z")

</div>

テーマ「Dawn」で制作しています。

メニュー（ドロワー）とフッターに「LINE」のアイコンを追加したいと考えています。

追加する方法をご教授頂ければと思います。

よろしくお願いいたします。

---

<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:** [May 2, 2023, 6:35am UTC](https://community.shopify.com/t/line/212590/2 "2023-05-02T06:35:11Z")

</div>

ご質問いただいている、LINEアイコンを追加したい件ですが、設置されたい位置やアイコンのサイズがわかりかねますので、下記条件前提で表示する方法を説明させていただきます。

**アイコン** ：正方形

**ヘッダー** ：PCではサーチアイコンの左、スマホではメニュー内ログインボタン上

**フッター** ：共通でSNSアイコンが表示される位置

**設定手順**

\*\*１.\*\*管理画面 \> コンテンツ \> ファイルから使用するアイコンをアップロード

\*\*２.\*\*管理画面 \> オンラインストア \> テーマ \> カスタマイズボタンの横にある「…」 \> コードを編集をクリック

\*\*３.\*\*コード編集画面の「ファイルを検索」エリアに、『header.liquid』と入力しソートされたファイルを開きます。

\*\*４.\*\*header.liquid内で下記コードを探し、  
『

』  
次の行に下記コードを追加

```markup

  

```

 ![スクリーンショット 2023-05-02 14.09.21.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/b/e/bea73614590a70482147dc0be559eedf01f78ba0.png)

\*\*５.\*\*header.liquid内で下記コードを探し、  
『

』  
前の行に下記コードを追加

```markup

  

```

 ![スクリーンショット 2023-05-02 14.15.34.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/7/4/e/74ebaaa69db5b54e4af7af1bd419b67712ade685.png)

\*\*６.\*\*コード編集画面の「ファイルを検索」エリアに、『social-icons.liquid』と入力しソートされたファイルを開きます。

\*\*７.\*\*social-icons.liquid内で、下記コードを探し、  
『

』  
次の表に下記コードを追加

```markup
- 

```

 ![スクリーンショット 2023-05-02 15.15.02.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/1/6/1667bbce163dc315a776eab76750d1542317164a.png)

\*\*８.\*\*管理画面 \> オンラインストア \> カスタマイズボタンをクリック

\*\*９.\*\*左側テーマ設定をクリック

\*\*１０.\*\*カスタムCSSを選択し、下記CSSを追加し保存

```markup
.line_icon {
  display: block;
  width: 4.4rem;
  height: 4.4rem;
}
@media screen and (min-width: 750px)
  .line_icon {
    width: 2.2rem;
    height: 2.2rem;
    margin: 1.1rem;
  }
}
@media screen and (max-width: 749px) {
  .line_icon {
    width: 2.2rem;
    height: 2.2rem;
    margin: 1.1rem;
  }
}
.menu-drawer__icon {
  padding: 2.2rem 3.2rem;
}

```

 ![Qcoltd_3-1683008525559.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/9/3/1/931ce5df2cb8b733e5c1d399d04f89db00e310ee.png)

**表示例**

**PCヘッダー**

 ![Qcoltd_4-1683008525559.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/f/6/f65d0e26e35425ddbae637d325f02fc302900c08.png)

**スマホヘッダー**

 ![Qcoltd_5-1683008525559.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/5/0/509ebe40681e9228bea51b8d4445264bbdb114f2.png)

**PCフッター**

 ![Qcoltd_6-1683008525559.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/a/0/a04868c68fc8427cbd480abe7ccbc9be831f8efb.png)

**スマホフッター**

 ![Qcoltd_7-1683008525559.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/a/9/a94aec98a89502068a2b1ca98843971a245eba8a.png)

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

---

<div class="post-metadata">

**Author:** ![hwa-japan](https://avatars.discourse-cdn.com/v4/letter/h/8c91f0/32.png) [@hwa-japan](https://community.shopify.com/u/hwa-japan)\
**Post date:** [April 10, 2024, 7:27am UTC](https://community.shopify.com/t/line/212590/3 "2024-04-10T07:27:13Z")

</div>

初めまして、dawn(13.0.1)のメインテーマを複製して作成してます。

上記内容の10.のカスタムCSSを実行致しますと、

「オンラインストアのエディタセッションを公開できません」

というエラーが出てくるようになりました。（最初は出てこなかった）下記の解決策以外に何か方法ありますでしょうか？

[https://community.shopify.com/post/2048419](https://community.shopify.com/post/2048419)

また、以下の内容を変更しております。

1.\*\*５.\*\*header.liquid内で下記コードを探し、『

』前の行に下記コードを追加

の場所が発見出来なかったため、未入力です。

2.フッターにデフォルトで入ってるインスタグラムアイコンをヘッダーにも追加したかったのでインスタグラムの内容を追加。

3.リンク内容の記述がなかったのでリンクタグ追加

4.\*\*10.\*\*の追加CSS内容でアイコンの大きさと位置の変更

コードは下記の通りです。

よろしくお願い致します。

CSS

.line\_icon {

display: block;

width: 2.4rem;

height: 4.4rem;

}

@media screen and (min-width: 750px)

.line\_icon {

width: 2.2rem;

height: 2.2rem;

margin: 1.1rem;

}

}

@media screen and (max-width: 749px) {

.line\_icon {

width: 2.2rem;

height: 2.2rem;

margin: 1.1rem;

}

}

.menu-drawer\_\_icon {

padding: 2.2rem 3.2rem;

}

 

![]()

 

 

\<img class=“instagram\_icon" src=“アイコンurl”\>

 
-  

![]()