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

日本語 ディスカッション 技術的なQ＆A

Topic 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. メディアクエリでモバイルとデスクトップの表示を変更可能

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

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

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

2

@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

(キュー田辺)

3

田辺様

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

以下の通りになります。

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

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

テーマ：“Dawn”

バージョン：11.0.0

4

@ayu_masu 様

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

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

コード編集

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

{%- 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 -%}

↓

{%- 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に下記を入力します。

.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
screenshot_20231006_01.png3360×1930 755 KB

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

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

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

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

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

ご参考まで。

(キュー田辺)

1 Like
5

田辺様

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

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

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

1 Like