クライアント様からの要望で、添付の画像のようにヘッダーをカスタマイズ可能かどうかご存知でしたら教えてください。
ヘッダー内に複数のアイコン（他社モールサイトへのリンク付き）を設置したいと考えております。
header.liquidが複雑でどのようなコードを入力すれば良いかわからず困っております。
なお、今回使用するテーマはDAWNで、私自身はディレクターで簡単なコード編集はできますが、複雑なカスタマイズはできないレベルです。
ご確認何卒よろしくお願いいたします。
Topic summary
PCヘッダーに他社モールへのリンク付きアイコンを複数設置したいという要望。テーマは Dawn、SPは非対応（PCのみ）。
対応方法:
- header-group.json をバックアップのうえ、schema に custom-liquid セクションを追記。
- order 配列に custom-liquid を追加し、テーマカスタマイズからヘッダーに任意のコンテンツを配置。
- 位置や操作は添付画像・動画リンクで説明。コード断片と手順が提示された。
実装結果: 上記でPCヘッダーへの追加は問題なく反映された。
追加対応（SPで非表示）:
- 追加したコンテンツに pc-only クラスを付与。
- カスタムCSSで max-width 768px のメディアクエリ内で pc-only を非表示に設定（display: none !important）。
- これによりスマホ表示ではアイコンが非表示になることを確認。
状況: 要望は実現し、解決済み。未解決の課題や異論はなし。
はじめまして。
株式会社ファイブビットの福水と申します。
クライアント様からの要望で、添付の画像のようにヘッダーを
カスタマイズ可能かどうかご存知でしたら教えてください。
可能です。いただいているスクショはPCのみのようですが、スマホ版のヘッダーには画像は差し込まなくてよいのでしょうか？もしスマホ版にも画像を差し込む必要がある場合は、スマホ版のスクショもご共有いただけると、嬉しいです。
福永様
お世話になります。
ご回答いただきありがとうございます。
SPではアイコンを入れず、PCのヘッダーのみとなります。
ご確認何卒よろしくお願いいたします。
ありがとうございます。
やり方ですが、
まずは、header-group.json を編集するのでメモ帳かどこかに必ずバックアップをとっておいてください。
①header-group.json 内に下記コードを記述します。
"custom-liquid": {
"type": "custom-liquid",
"settings": {
}
},
場所は、下記画像にて確認ください。
https://gyazo.com/316790adf6c6d8abc2680416aebabad6
②同じくheader-group.json 内の下記コードに “custom-liquid”, を記述します。
"order": [
"announcement-bar",
"header"
]
場所は、こちらも下記画像にて確認ください。
https://gyazo.com/9397d9d4fc09096f96283d24f19766a1
①②が完了したら、テーマのカスタマイズから、ヘッダーに新しくコンテンツを記述できるようになっているので、好きに使ってください。
ご説明誠にありがとうございます。
いただいたやり方で設定したところ、無事反映できました。
大変助かりました。
1 Like
もう1点お尋ねしたいのですが、SPで非表示にする場合はどのようにコードを編集すればよろしいでしょうか？
お手数ですが、ご確認よろしくお願いいたします。
下記の流れを試してみてください。
① ヘッダーに追加したコンテンツに pc-only という名前のクラスを付与する
（下記は例です）
コンテンツ・コンテンツ・コンテンツ
下記画像も参考にしてください。
https://gyazo.com/4da8eee4cfbad4632d750f644250d46f
②カスタムCSSにコードを付与する
（これはそのままコピペしてください）
@media screen and (max-width: 768px) {
.pc-only {
display: none !important;
}
}
下記画像も参考にしてください。
https://gyazo.com/1faf2b0d41492e0280399b5eb71a0a6a
②のCSSは、画面幅768px以内の端末で閲覧した場合は、pc-onlyクラスが付与されたコンテンツは非表示になる、という内容になっています。
もし、上記の流れで意図通りの内容にならなかった場合は、実装した場所や画面のスクショを可能な限り具体的にご共有いただいければと思います。
再度ご説明いただきありがとうございます。
こちらのやり方でSPで非表示になりました。
重ねてお礼申し上げます。
1 Like