区切り線について

Topic summary

ユーザーが3つのカスタマイズに関する質問を投稿:

1. カスタムLiquid/CSSでの区切り線追加

  • 回答者がシンプルな実装方法を提示
  • クラスにborder-topborder-bottomを適用する方法
  • または<hr>要素を直接記述する方法
  • サンプルコードとスクリーンショット付きで具体的に説明

2. フッターの区切り線を削除

  • footer.footer__content-bottomクラスに対してborder-top: none !important;を適用
  • テーマのカスタムCSSに記述することで削除可能
  • フッター本体と下部コンテンツ両方の区切り線を消す方法を提示

3. ブログ記事見出しの文字サイズ調整

  • .article-template__titlefont-sizeを指定
  • rem、em、pxなど任意の単位で設定可能
  • サイト全体のコンセプトやレスポンシブ設定に合わせて調整を推奨

使用テンプレート: Dawn

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
  1. カスタマイズされたLiquid→カスタムCSSで区切り線のコードを入れたいのですが、うまくいきません。どなたかコピペできるコードを教えていただけないでしょうか…区切り線を入れる方法があれば、これ以外の方法でも構いません。

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

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

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

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

@_6_6

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

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


    

テキスト

.custom-liquid {
  border-top: 0.1rem solid;
  border-bottom: 0.1rem solid;
}

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

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

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

1 Like