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

テンプレートで追加したセクションのタイトルを左寄せから中央に変更したい。

テンプレートで追加したセクションのタイトルを左寄せから中央に変更したい。

COLA-KUN
Shopify Partner
20 0 4

テンプレートで追加したセクションのタイトルを左寄せから中央に変更したいのですが、

コード編集の何処を変更すれば実現できますでしょうか?

スクリーンショット 2021-09-03 0.30.52.png

3件の返信3

AraiTakayuki
Shopify Partner
69 32 73

テーマDAWNですね。

collection-list.liquid

にhtml部分はございます。

そこ編集すればできますのでお試しください。

COLA-KUN
Shopify Partner
20 0 4

ありがとうございます。

コード編集が上手くいかずで、具体的に何処の部分になるかご教授頂けますと幸いです。

何卒、宜しくお願い致します。

takeoube
Shopify Partner
15 0 5

<div class="title-wrapper-with-link">
    <h2 class="title">タイトル</h2>
</div>

↑これの.title-wrapper-with-linkにjustify-content: center;をつければ中央にきます。

ファイルとしてはAssets>base.cssの884行目ですが、既存のcssを編集すると思わぬレイアウト崩れを起こしたりもするので

あらたにcssファイルを作成し

@media screen and (min-width: 750px) {

.title-wrapper-with-link {
justify-content: center;
}

}

を書くといいと思います。

その際、作成したcssを読み込ませる必要も出てきますので

Layout>theme.liquidの111行目

{{ 'base.css' | asset_url | stylesheet_tag }}

の下に

{{ '任意で作成したCSSファイル名.css' | asset_url | stylesheet_tag }}

を足す必要があります。

 

以上で可能かと思います。

細かい○行目はバージョンで変わってくるかもしれないので見つからなければ検索などしてください。

しかし、これはHTMLやCSSの知識が必要ですのでもし不安であればわかる人に依頼してください。

 

補足:

何のCSSの何行目に書いてあるスタイルが適用されている、というのは

対象を右クリック>検証で確認できます(Google Chromeの場合)