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

モバイル表示のハンバーガーメニュー位置を右に表示したい。(テーマ:Spotlight)

解決済

モバイル表示のハンバーガーメニュー位置を右に表示したい。(テーマ:Spotlight)

ddmm
観光客
5 0 1

[使用テーマ:Spotlight]

 

お世話になります。

webサイト制作初心者です。

現在、外部サービス(ノーコードweb制作ツール)で構築したポートフォリオサイトにショップを併設する目的でshopifyを利用させていただいております。

(質問中のプログラミング用語等、間違っておりましたらすみません)

 

 

質問:ユーザーの操作性を考慮して、ヘッダーメニューを以下のように変更したいです。

・モバイル表示のハンバーガーメニュー位置を最も右に表示したい。

・また、その際ハンバーガーメニューをタップしたときのモーダルのスワイプ方向を右画面から出てくるようにしたい。

・モーダルの閉じるボタンの位置を右上に表示したい。(ハンバーガーメニューのアイコンと同位置)

 

 

これまで、文字の大きさ、マージン/パディングの調整、リンク先の修正等、

簡単なものであれば、都度調べながらなんとかコード編集を行ってきましたが、こちらは私にとってかなり高度なものかと感じております。

 

ちなみにコチラのような記事を見つけたのですが、コードの読み解きができず、、

 

どうかお力添えいただけますと幸いです。

よろしくお願い致します。

1 件の受理された解決策

株式会社ナレッジサービス
Shopify Partner
65 28 27

成功

できるだけコードを編集しない方法であれば、以下の手順をお試しください。

 

なお、コードを編集するので意図せず表記が崩れる等のエラーが発生する場合があります。事前にバックアップを取るなどのリスク対策が必要です。

 

1.管理画面にログインし、[オンラインストア] > [テーマ] に移動します。

 

2.「カスタマイズ」の隣の[…] から[コードを編集] をクリックします。

 

3.「アセット」フォルダ内のbase.cssファイルを選択します。

 

4. 以下のコードを探し、修正します。

修正前:

.header {
  display: grid;
  grid-template-areas: 'left-icons heading icons';
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
}

 

修正後:

.header {
  display: grid;
  grid-template-areas: 'heading icons left-icons';
  grid-template-columns: 2fr 1fr 1fr;
  align-items: center;
}

これでロゴやハンバーガーメニューの位置が変わります。

スクリーンショット 2024-07-04 9.28.06.png

5. ハンバーガーメニューが左に寄りすぎてるので、右に移動させます。「セクション」フォルダ内のheader.liquidファイルを選択し、コードを修正します。

修正前:

  header-drawer {
    justify-self: start;
    margin-left: -1.2rem;
  }

 

修正後:

  header-drawer {
    justify-self: end;
    margin-left: -1.2rem;
  }

 

6. モーダルのスワイプ方向を右画面から出てくるように設定します。「アセット」フォルダ内のcomponent-menu-drawer.cssファイルを選択し、以下のように修正します。

修正前:

.menu-drawer {
  position: absolute;
  transform: translateX(-100%);
  visibility: hidden;
  z-index: 3;
  left: 0;
  top: 100%;
  width: 100%;
  padding: 0;
  background-color: rgb(var(--color-background));
  overflow-x: hidden;
  filter: drop-shadow(
    var(--drawer-shadow-horizontal-offset) var(--drawer-shadow-vertical-offset) var(--drawer-shadow-blur-radius)
      rgba(var(--color-shadow), var(--drawer-shadow-opacity))
  );
}

 

修正後:

.menu-drawer {
  position: absolute;
  transform: translateX(100%); /* ここを変更 */
  visibility: hidden;
  z-index: 3;
  right: 0;/* ここを変更 */
  top: 100%;
  width: 100%;
  padding: 0;
  background-color: rgb(var(--color-background));
  overflow-x: hidden;
  filter: drop-shadow(
    var(--drawer-shadow-horizontal-offset) var(--drawer-shadow-vertical-offset) var(--drawer-shadow-blur-radius)
      rgba(var(--color-shadow), var(--drawer-shadow-opacity))
  );
}

 

最後に「保存」をクリックして完了です。

元の投稿で解決策を見る

2件の返信2

株式会社ナレッジサービス
Shopify Partner
65 28 27

成功

できるだけコードを編集しない方法であれば、以下の手順をお試しください。

 

なお、コードを編集するので意図せず表記が崩れる等のエラーが発生する場合があります。事前にバックアップを取るなどのリスク対策が必要です。

 

1.管理画面にログインし、[オンラインストア] > [テーマ] に移動します。

 

2.「カスタマイズ」の隣の[…] から[コードを編集] をクリックします。

 

3.「アセット」フォルダ内のbase.cssファイルを選択します。

 

4. 以下のコードを探し、修正します。

修正前:

.header {
  display: grid;
  grid-template-areas: 'left-icons heading icons';
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
}

 

修正後:

.header {
  display: grid;
  grid-template-areas: 'heading icons left-icons';
  grid-template-columns: 2fr 1fr 1fr;
  align-items: center;
}

これでロゴやハンバーガーメニューの位置が変わります。

スクリーンショット 2024-07-04 9.28.06.png

5. ハンバーガーメニューが左に寄りすぎてるので、右に移動させます。「セクション」フォルダ内のheader.liquidファイルを選択し、コードを修正します。

修正前:

  header-drawer {
    justify-self: start;
    margin-left: -1.2rem;
  }

 

修正後:

  header-drawer {
    justify-self: end;
    margin-left: -1.2rem;
  }

 

6. モーダルのスワイプ方向を右画面から出てくるように設定します。「アセット」フォルダ内のcomponent-menu-drawer.cssファイルを選択し、以下のように修正します。

修正前:

.menu-drawer {
  position: absolute;
  transform: translateX(-100%);
  visibility: hidden;
  z-index: 3;
  left: 0;
  top: 100%;
  width: 100%;
  padding: 0;
  background-color: rgb(var(--color-background));
  overflow-x: hidden;
  filter: drop-shadow(
    var(--drawer-shadow-horizontal-offset) var(--drawer-shadow-vertical-offset) var(--drawer-shadow-blur-radius)
      rgba(var(--color-shadow), var(--drawer-shadow-opacity))
  );
}

 

修正後:

.menu-drawer {
  position: absolute;
  transform: translateX(100%); /* ここを変更 */
  visibility: hidden;
  z-index: 3;
  right: 0;/* ここを変更 */
  top: 100%;
  width: 100%;
  padding: 0;
  background-color: rgb(var(--color-background));
  overflow-x: hidden;
  filter: drop-shadow(
    var(--drawer-shadow-horizontal-offset) var(--drawer-shadow-vertical-offset) var(--drawer-shadow-blur-radius)
      rgba(var(--color-shadow), var(--drawer-shadow-opacity))
  );
}

 

最後に「保存」をクリックして完了です。

ddmm
観光客
5 0 1

大変丁寧で分かりやすいアドバイスをありがとうございます!

早速試してみたところ、無事に解決いたしました。

 

今後とも、どうぞよろしくお願い致します🙇