FROM CACHE - jp_header

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

COLA-KUN
Shopify Partner
18 0 2

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

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

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

3件の返信3
AraiTakayuki
Shopify Partner
69 31 71

テーマDAWNですね。

collection-list.liquid

にhtml部分はございます。

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

COLA-KUN
Shopify Partner
18 0 2

ありがとうございます。

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

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

takeoube
Shopify Partner
15 0 4

<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の場合)