ヘッダーをカスタマイズ

[yoshidesign]

クライアント様からの要望で、添付の画像のようにヘッダーをカスタマイズ可能かどうかご存知でしたら教えてください。

ヘッダー内に複数のアイコン（他社モールサイトへのリンク付き）を設置したいと考えております。

header.liquidが複雑でどのようなコードを入力すれば良いかわからず困っております。

なお、今回使用するテーマはDAWNで、私自身はディレクターで簡単なコード編集はできますが、複雑なカスタマイズはできないレベルです。

ご確認何卒よろしくお願いいたします。

[福水正太 · Accepted solution]

ありがとうございます。

やり方ですが、

まずは、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

①②が完了したら、テーマのカスタマイズから、ヘッダーに新しくコンテンツを記述できるようになっているので、好きに使ってください。

動画：https://gyazo.com/8850d85f269055509039f2d7b6d472b3

[yoshidesign · Accepted solution]

ご説明誠にありがとうございます。

いただいたやり方で設定したところ、無事反映できました。

大変助かりました。

[福水正太]

はじめまして。

株式会社ファイブビットの福水と申します。

>>クライアント様からの要望で、添付の画像のようにヘッダーを

>>カスタマイズ可能かどうかご存知でしたら教えてください。

可能です。いただいているスクショはPCのみのようですが、スマホ版のヘッダーには画像は差し込まなくてよいのでしょうか？もしスマホ版にも画像を差し込む必要がある場合は、スマホ版のスクショもご共有いただけると、嬉しいです。

[yoshidesign]

福永様

お世話になります。

ご回答いただきありがとうございます。

SPではアイコンを入れず、PCのヘッダーのみとなります。

ご確認何卒よろしくお願いいたします。

[福水正太 · Accepted solution]

ありがとうございます。

やり方ですが、

まずは、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

①②が完了したら、テーマのカスタマイズから、ヘッダーに新しくコンテンツを記述できるようになっているので、好きに使ってください。

動画：https://gyazo.com/8850d85f269055509039f2d7b6d472b3

[yoshidesign · Accepted solution]

ご説明誠にありがとうございます。

いただいたやり方で設定したところ、無事反映できました。

大変助かりました。

[yoshidesign]

もう1点お尋ねしたいのですが、SPで非表示にする場合はどのようにコードを編集すればよろしいでしょうか？

お手数ですが、ご確認よろしくお願いいたします。

[福水正太 · Accepted solution]

下記の流れを試してみてください。

① ヘッダーに追加したコンテンツに pc-only という名前のクラスを付与する

（下記は例です）

<div class="pc-only">コンテンツ・コンテンツ・コンテンツ</div>

下記画像も参考にしてください。

https://gyazo.com/4da8eee4cfbad4632d750f644250d46f

②カスタムCSSにコードを付与する

（これはそのままコピペしてください）

@media screen and (max-width: 768px) {
  .pc-only {
    display: none !important;
  }
}

下記画像も参考にしてください。

https://gyazo.com/1faf2b0d41492e0280399b5eb71a0a6a

②のCSSは、画面幅768px以内の端末で閲覧した場合は、pc-onlyクラスが付与されたコンテンツは非表示になる、という内容になっています。

もし、上記の流れで意図通りの内容にならなかった場合は、実装した場所や画面のスクショを可能な限り具体的にご共有いただいければと思います。

[yoshidesign]

再度ご説明いただきありがとうございます。

こちらのやり方でSPで非表示になりました。

重ねてお礼申し上げます。