# アイコンとテキストを横並びにしたいです

**URL:** <https://community.shopify.com/t/topic/255899>\
**Category:** 技術的なQ＆A\
**Tags:** css\
**Created:** [October 3, 2023, 3:51am UTC](https://community.shopify.com/t/topic/255899 "2023-10-03T03:51:49Z")\
**Posts on this page:** 5\
**Page:** 1

## AI-generated summary

ユーザーがShopifyテーマ「Dawn」（バージョン0.0.11）で、リッチテキストの見出しテキストの前にアイコンを横並びに配置する方法を質問しています。

**提案された解決策：**
- カスタムCSSのみでは対応できないため、コード編集が必要
- `rich-text.liquid`ファイルの編集が必要
- CSS `::before`疑似要素を使用してアイコンを追加

**実装手順：**
1. セクション > `rich-text.liquid`の3行目のスタイルブロックにCSSコードを追加
2. テーマカスタマイザー画面のカスタムCSSにも追加のコードを入力
3. Shopifyにアップロードした画像を`background-image`で指定
4. `width`と`height`で画像サイズを調整可能
5. メディアクエリでモバイルとデスクトップの表示を変更可能

質問者は提案された解決策を参考に進めることを表明し、感謝の意を示しています。

<div class="post-metadata">

**Author:** ![ayu\_masu](https://avatars.discourse-cdn.com/v4/letter/a/c0e974/32.png) [@ayu\_masu](https://community.shopify.com/u/ayu_masu)\
**Post date:** [October 3, 2023, 3:51am UTC](https://community.shopify.com/t/topic/255899/1 "2023-10-03T03:51:49Z")

</div>

テンプレート内、リッチテキストの見出しのテキストの前にアイコン（pngデータ）を配置して横並びにさせたいです。宜しくお願いいたします。

---

<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:** [October 4, 2023, 9:58am UTC](https://community.shopify.com/t/topic/255899/2 "2023-10-04T09:58:50Z")

</div>

@ayu_masu 様

よろしければテーマの名称とバージョンをお教えください。

テーマの名称とバージョンの確認方法は下記のページを参考にしていただければと思います。

[https://techlab.q-co.jp/articles/128/#%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E5%90%8D%E7%A7%B0%E3%81%A8%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%82%92%E8%A8%98%E8%BC%89%E3%81%99%E3%82%8B](https://techlab.q-co.jp/articles/128/#%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E5%90%8D%E7%A7%B0%E3%81%A8%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%82%92%E8%A8%98%E8%BC%89%E3%81%99%E3%82%8B)

(キュー田辺)

---

<div class="post-metadata">

**Author:** ![ayu\_masu](https://avatars.discourse-cdn.com/v4/letter/a/c0e974/32.png) [@ayu\_masu](https://community.shopify.com/u/ayu_masu)\
**Post date:** [October 4, 2023, 10:48pm UTC](https://community.shopify.com/t/topic/255899/3 "2023-10-04T22:48:28Z")

</div>

田辺様

お返事ありがとうございます。

以下の通りになります。

ご指南いただけますと幸いです。

宜しくお願いいたします。

テーマ：“Dawn”

バージョン：11.0.0

---

<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:** [October 6, 2023, 8:51am UTC](https://community.shopify.com/t/topic/255899/4 "2023-10-06T08:51:40Z")

</div>

@ayu_masu 様

返信遅くなり申し訳ございません。

可能であれば、カスタムCSSで全て済ませたかったのですが、カスタムCSSがcontentプロパティを許可していないため、少しだけコード編集が必要になります。

**コード編集**

セクション \> rich-text.liquidの3業目を下記のように変更します。

```markup
{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

```

↓

```markup
{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }

  .rich-text__heading::before {
    content: "";
  }
{%- endstyle -%}

```

続いて、

テーマカスタマイズ画面にて、リッチテキストセクションのカスタムCSSに下記を入力します。

```markup
.rich-text__heading::before {
  background-image: url("https://cdn.shopify.com/s/files/1/0778/7151/3888/files/shopify_icon_146101.png");
  background-size: contain;
  display: inline-block;
  height: 30px;
  width: 30px;
}

```

 ![screenshot_20231006_01.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/3/e/3e38a5e9e2575070272c7d3c24012f519cec6c92.png)

上記、CSSについて補足です。

background-image に、Shopifyにアップロードした画像を指定してください。

Shopifyのコンテンツ \> ファイルからアップロードした画像のみ指定できます。

大きさは、widthとheightをご調整ください。

デスクトップとモバイルで大きさを変更したい場合は、media queryを活用ください。

ご参考まで。

(キュー田辺)

---

<div class="post-metadata">

**Author:** ![ayu\_masu](https://avatars.discourse-cdn.com/v4/letter/a/c0e974/32.png) [@ayu\_masu](https://community.shopify.com/u/ayu_masu)\
**Post date:** [October 8, 2023, 12:01pm UTC](https://community.shopify.com/t/topic/255899/5 "2023-10-08T12:01:51Z")

</div>

田辺様

お忙しい中、ご丁寧にご返信くださいまして誠にありがとうございました。

頂きました内容を参考に、進めて参りたいと思います。

心よりの感謝を申し上げます。