FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

区切り線について

区切り線について

太郎1
訪問者
1 0 0

1. カスタマイズされたLiquid→カスタムCSSで区切り線のコードを入れたいのですが、うまくいきません。どなたかコピペできるコードを教えていただけないでしょうか...区切り線を入れる方法があれば、これ以外の方法でも構いません。

 

2. フッターに区切り線が入っているのですが、これを消す方法をご存知の方はいらっしゃいますか...?

 

3. ブログ記事の見出しの文字を小・中・大・特大・4Lより小さくする方法をご存知のかたはいますか?

 

使用しているテンプレートはDawnになります。

どうぞよろしくお願いいたします。

 

2.区切り線.png

1件の返信1

bluetree
Shopify Partner
23 3 17

@太郎1 

 

1. いくつか方法がありますが、一番シンプルな方法はクラスに対してborderつける方法かと思われます🐦

以下は上下に区切りをつけたサンプルコードです。あとは単純にhr要素を記述するとかでしょうか。

 

<div class="custom-liquid">
    <p>テキスト</p>
</div>
.custom-liquid {
  border-top: 0.1rem solid;
  border-bottom: 0.1rem solid;
}

 

bluetree_0-1733797605967.png

 


2. 一番簡単な方法はフッタークラスに適用されているborder-topを無効化することです。
テーマのカスタマイズのカスタムCSSで以下記述することで消すことができます。
ここではフッター自体とフッターの下部コンテンツに対しても消すようにしました。

 

.footer,
.footer__content-bottom {
  border-top: none !important;
}

bluetree_0-1733813143467.png

 

 

 

 

 

3. こちらもテーマのカスタマイズのカスタムCSSで以下記述することで任意のサイズに設定可能です。
em, rem, pxの単位選定やレスポンシブ設定はご自身のサイトのコンセプトに合わせてください。

 

.article-template__title {
  font-size: 1em;
}

 

 

回答にズレがある、ここがもっと知りたいなどあれば再度コメントいただけますと幸いです。
あおき