Cssマーカー線を引きたい

初心者で大変申し訳ありませんが質問です、、

自社サイトをdebutで作っています。HOME画面内の文章に、CSSでマーカー線をひきたい箇所がありますが、

下記の手順でできません。どのようにしたらできますでしょうか。。

  1. Asset内に “style.css” を作成。
  2. 上記のシート内に /* マーカー線・オレンジ */ .marker22{ background:linear-gradient(transparent 75%, #ffbf7f 75%); font-weight:bold; }
  3. Config内 “settings_data.json” でHTML編集 → マーカーひきたい文章

spanタグのクラス名とCSSのクラス名を揃えれば良いかと思います。
現在は marker と marker22 になっているので揃っていません。

Config内 “settings_data.json” でHTML編集

上記のような方法は初めて目にしましたので、揃えた場合でもCSSが当たるのかどうかは不明ですが。

恐らく類似と思われる質問を参考用に記載します。

https://community.shopify.com/post/998371

2 Likes

Jizoさん、ありがとうございます!!

失礼しました、質問文2.のところ 正marker 誤marker22 で、揃えてる状態だったのですが

できず・・spanタグの編集はどちらからしたらよいものかと。。

初心者すぎて恐れいります。。

把握しかねているのですが「Config内 “settings_data.json” でHTML編集」という方法を書かれたのはnash7さんなので、私に方法を聞かれましてもなんとも…。

theme kitを使うか、「テーマ」で該当のテーマの「コードの編集」を使うかになるのではと思いますが。

こちらの方法はどこでご覧になられたのでしょうか?

どなたかのnoteに

HTML の記述について

TOPページ 「オンラインストア > テーマ > カスタマイズ」から「セクションを追加」から「コンテンツをカスタムする」を追加します。

とあったのですが、追加するところが探せなかったので

ここかな?と思ったところを試しに触ってみたまででした。。

ちょっとここはやはり下手に初心者の自分がいじるのはやめておこうかと思いました、

ありがとうございました。

状況をお教えいただきありがとうございます。

この部分は本来部分的な任意の装飾はできないので、そこをどうにかしようとすると初心者の方では難しいと思いますから、確かに避けられた方がよいかと思います。

ただ要件的につかえるセクションなのかわかりませんが、以下の「コンテンツをカスタムする」であれば、単純な内容ならHTMLとCSSを少し学んでいただければ対応可能かもしれません。

https://help.shopify.com/ja/manual/online-store/themes/os/themes-by-shopify/supply/sections#part-338ae903be655981

HTMLやCSSは少しでも使えるようになりますと自由度がかなり上がりますので、よろしければお試しください。

2 Likes

なるほど、カスタムHTMLブロックなるものがあるのですね。

HTMLとCSSを駆け足で勉強しただけで、やりながら手探りでどうにかしてみようと思いましたがやはり一朝一夕ではいかないですね、もっとじっくり研究してからいろいろと試してみようかと思いました^^;

おいそがしいところお付き合いいただきありがとうございました :glowing_star:

1 Like