# 区切り線について

**URL:** <https://community.shopify.com/t/topic/355639>\
**Category:** サンプルコード集（アプリ・テーマ）\
**Tags:** optimization\
**Created:** [September 6, 2024, 7:54am UTC](https://community.shopify.com/t/topic/355639 "2024-09-06T07:54:50Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated summary

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

**1. カスタムLiquid/CSSでの区切り線追加**
- 回答者がシンプルな実装方法を提示
- クラスに`border-top`と`border-bottom`を適用する方法
- または`<hr>`要素を直接記述する方法
- サンプルコードとスクリーンショット付きで具体的に説明

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

**3. ブログ記事見出しの文字サイズ調整**
- `.article-template__title`に`font-size`を指定
- rem、em、pxなど任意の単位で設定可能
- サイト全体のコンセプトやレスポンシブ設定に合わせて調整を推奨

使用テンプレート: Dawn

<div class="post-metadata">

**Author:** ![\_6\_6](https://avatars.discourse-cdn.com/v4/letter/_/90ced4/32.png) [@\_6\_6](https://community.shopify.com/u/_6_6)\
**Post date:** [September 6, 2024, 7:54am UTC](https://community.shopify.com/t/topic/355639/1 "2024-09-06T07:54:50Z")

</div>

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

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

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

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

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

 ![2.区切り線.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/4/2/42454f1ce4af4cf581efb7890d52a479e6a8271e.png)

---

<div class="post-metadata">

**Author:** ![bluetree](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/bluetree/32/163780_2.png) [@bluetree](https://community.shopify.com/u/bluetree)\
**Post date:** [December 10, 2024, 6:46am UTC](https://community.shopify.com/t/topic/355639/2 "2024-12-10T06:46:57Z")

</div>

@_6_6

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

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

```markup

    

テキスト

```

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

```

 ![bluetree_0-1733797605967.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/4/0/3/403cac7ce48d64473fcf5ccc55e816d973a19dac.png)

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

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

```

 ![bluetree_0-1733813143467.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/1/6/163a9fbb29b571a82f1079e5e7c61c9b81d511f6.png)

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

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

```

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