FROM CACHE - jp_header

CSSマーカー線を引きたい

解決済
nash7
観光客
4 0 1

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

自社サイトを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 class="marker">マーカーひきたい文章</span>

 

1 件の受理された解決策

ベストソリューション
Jizo_Inagaki
Shopify Partner
610 248 566

成功

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

Config内 "settings_data.json" でHTML編集

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

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

https://community.shopify.com/c/%E7%B7%8F%E5%90%88%E7%9A%84%E3%81%AA%E3%83%87%E3%82%A3%E3%82%B9%E3%8...

 

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。

元の投稿で解決策を見る

6件の返信6
Jizo_Inagaki
Shopify Partner
610 248 566

成功

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

Config内 "settings_data.json" でHTML編集

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

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

https://community.shopify.com/c/%E7%B7%8F%E5%90%88%E7%9A%84%E3%81%AA%E3%83%87%E3%82%A3%E3%82%B9%E3%8...

 

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
nash7
観光客
4 0 1

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

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

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

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

 

Jizo_Inagaki
Shopify Partner
610 248 566

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

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

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

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
nash7
観光客
4 0 1

どなたかのnoteに

 

HTML の記述について

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

 

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

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

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

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

 

Jizo_Inagaki
Shopify Partner
610 248 566

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

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

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

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

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

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。
nash7
観光客
4 0 1

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

 

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

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