Shopifyのテーマレイアウトやヘッダーデザインをカスタマイズしたい方必見。CSSの「grid-template」を使えば、ロゴ・メニュー・アイコンの配置を柔軟に調整可能。初心者にもわかりやすく解説します。
近年、ノーコードで手軽にECサイトを立ち上げられるサービスとして人気を集めているのがShopifyです。
特にヘッダー部分はデフォルト設定のまま利用されるケースも多いですが、「メニューを右寄せにしたい」「電話番号を表示したい」といった要望が出ると、どうしても調整が必要になります。
PC版のヘッダーにおける要素配置を整える際に役立つのが、CSSのレイアウト関連プロパティである「grid-template」。本記事では、このプロパティを使った位置調整の基本についてご紹介します。
ノーコードならではのカスタマイズの難しさ
Shopifyは「完成されている」と言っても過言ではないほど、テーマエディタを使ってノーコードでストアを構築できる点が魅力。しかし、その裏側では多くのオプションが用意されているため、HTMLやLiquidのテーマテンプレートは非常に複雑な構成になっています。
そのため、ちょっとした調整でも戸惑うことがあるのが実情です。たとえば「PCのメニューを右寄せにしたい」「新しい要素を追加したい」といった変更も、慣れていない人にとっては意外とハードルが高いでしょう。
一方レイアウト面では、レスポンシブ対応と使いやすさを重視していることから、グリッドレイアウトが多用されています。
本記事のテーマである「grid-template」も、CSS初心者にとってはあまり見慣れないプロパティかもしれません。
「フレックスボックス(Flexbox)」に比べると使う機会が少なく、最初は少しとっつきにくい印象を受けることもあります。しかし、ヘッダーのように複数の要素を横並びでバランスよく配置したい場面では、この「grid-template」を理解しておくことで、思い通りのレイアウトを実現しやすくなります。
「grid-template」とは
では、ここから本題に入りましょう。
「grid-template」は、CSSで要素をグリッドレイアウトに配置する際に使われるプロパティで、基本的には「display: grid」とセットで指定します。
Shopifyのヘッダー部分のコードを確認してみると、実際に以下のように設定されていることが多いです。
header {
display: grid;
grid-template-areas: "heading left-icons icons";
grid-template-columns: auto auto 1fr;
column-gap: 2rem;
}このように「grid-template-areas」と「grid-template-columns」を組み合わせることで、ヘッダー内の要素を左右中央にバランスよく配置できるようになっています。
grid-template-areas
「grid-template-areas」は、グリッドの配置図を文字で描くように、要素の置き場所を名前で指定できるプロパティです。HTMLの並び順に縛られず、CSSだけで「左・中央・右」といったレイアウトを直感的に組めます。
ggrid-template-columns
「grid-template-columns」は、グリッドの列幅（カラム幅）を決めるプロパティ。先ほどの「grid-template-areas」が“配置図”を描く役割だとすれば、こちらは“列の大きさ”を指定する設計図のような存在です。
例えば、
.header {
display: grid;
grid-template-areas: "logo nav utils";
grid-template-columns: auto 1fr auto;
}この例では3列構成になっており、
①1列目：auto（要素の幅に合わせて自動）
②2列目：1fr（残りのスペースをすべて使用）
③3列目：auto（自動調整）
というバランスでレイアウトされます。
PCのヘッダーのレイアウトをいじるとしたら、この「grid-template」をある程度理解しておくことが大切です。
テーマによって細部は異なりますが、Shopifyの多くのテーマでは、ヘッダーの要素配置にこのグリッド構造が採用されています。つまり、単にPCだけでなく、タブレットやスマートフォンのレイアウトにも同じ仕組みが使われているのです。
そのため、「スマホではロゴを左側に、PCではロゴを中央に」といった調整も、「grid-template」の設定次第で柔軟に実現できます。デザインの意図を崩さずにカスタマイズするためにも、このプロパティの基本を押さえておくと安心です。
***
今回は具体的なカスタマイズ例までは触れず、全体像をつかむためのざっくりとした解説になりました。
しかし、「grid-template」はヘッダーだけでなく、商品一覧やフッターなど、さまざまなレイアウト調整にも応用できる重要なプロパティです。
ぜひ一度「grid-template」に関するCSSの仕組みをリサーチしてみて、Shopifyテーマのレイアウトカスタマイズに活かしてみてはいかがでしょうか。
