Liquid、JavaScriptなどに関する質問
[使用テーマ:Spotlight]
お世話になります。
webサイト制作初心者です。
現在、外部サービス(ノーコードweb制作ツール)で構築したポートフォリオサイトにショップを併設する目的でshopifyを利用させていただいております。
(質問中のプログラミング用語等、間違っておりましたらすみません)
質問:ユーザーの操作性を考慮して、ヘッダーメニューを以下のように変更したいです。
・モバイル表示のハンバーガーメニュー位置を最も右に表示したい。
・また、その際ハンバーガーメニューをタップしたときのモーダルのスワイプ方向を右画面から出てくるようにしたい。
・モーダルの閉じるボタンの位置を右上に表示したい。(ハンバーガーメニューのアイコンと同位置)
これまで、文字の大きさ、マージン/パディングの調整、リンク先の修正等、
簡単なものであれば、都度調べながらなんとかコード編集を行ってきましたが、こちらは私にとってかなり高度なものかと感じております。
ちなみにコチラのような記事を見つけたのですが、コードの読み解きができず、、
どうかお力添えいただけますと幸いです。
よろしくお願い致します。
解決済! ベストソリューションを見る。
成功
できるだけコードを編集しない方法であれば、以下の手順をお試しください。
なお、コードを編集するので意図せず表記が崩れる等のエラーが発生する場合があります。事前にバックアップを取るなどのリスク対策が必要です。
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;
}
これでロゴやハンバーガーメニューの位置が変わります。
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))
);
}
最後に「保存」をクリックして完了です。
成功
できるだけコードを編集しない方法であれば、以下の手順をお試しください。
なお、コードを編集するので意図せず表記が崩れる等のエラーが発生する場合があります。事前にバックアップを取るなどのリスク対策が必要です。
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;
}
これでロゴやハンバーガーメニューの位置が変わります。
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))
);
}
最後に「保存」をクリックして完了です。
大変丁寧で分かりやすいアドバイスをありがとうございます!
早速試してみたところ、無事に解決いたしました。
今後とも、どうぞよろしくお願い致します🙇
サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 20242023年初頭、Shopifyペイメントアカウント、及びShopifyアカウント全体のセキュリティを強化する為の変更が適用されました。ユーザーのアカウントセキュリティを強化す...
By Mirai Sep 29, 2024概要: 年末/年明けは、消費者が最もショッピングを行う時期の一つです。特に、ブラックフライデー・サイバーマンデー(BFCM)は、世界中で注目される大規模なセールイベントであ...
By JapanGuru Sep 25, 2024