バージョン選択

フォーラム

メニュー

オンライン状況

80 人のユーザが現在オンラインです。 (73 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 80
もっと...

サイト内検索

質問 > 管理機能 > ECCUBE4 両面幅を狭くする方法をご教授ください。スマートフォン用のメニューをだしたいからです。

管理機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
masterR
投稿日時: 2021/6/18 10:16
対応状況: −−−
新米
登録日: 2021/1/27
居住地:
投稿: 6
ECCUBE4 両面幅を狭くする方法をご教授ください。スマートフォン用のメニューをだしたいからです。
EC-CUBEのバージョン:4.0.5

[レンタルサーバ]エックスサーバー
[OS] 64 ビット オペレーティング システム、x64 ベース プロセッサ
[PHP] PHP Version 7.4.13
[データベース] MySQL5.7 バージョン 5.7.x
[WEBサーバ] エックスサーバー
[ブラウザ] 使用しているブラウザ名、バージョン
[導入プラグインの有無]
・ダウンロードコンテンツ販売 プラグイン
XSS脆弱性修正プラグインなど

[カスタマイズの有無] 特にカスタマイズはしてないです。
これからカスタマイズしようとしてストップしてます。

EC CUBE4
システム構築入門&店舗運営・管理ビギナーガイド

ECCUBE エバンジェリスト西村誠 (著)さんの
本を読みながら勉強しています。

P43ページに
ーーーーー
ECCUBE4の標準レイアウトでは画面幅でレイアウトが変化するレスポンシブデザインを採用しています。
画面幅を狭くするとスマートフォン用のメニューが表示され
PC用のブロックが一部非表示になります
ーーーーー

と書かれています。

方法してはどの部分を変えると
スマートフォン用のメニューが表示されるようになりますか。

たとえば
直接CSSを触るにはどの部分の表示を
変えたらよいでしょうか。

twigを修正する方法など
いろいろ方法をご教授いただけないでしょうか。

自分でも検索もしていますが
バージョン違いだったり

方法らしき情報が書いてあっても
そこまでまだ知識が追いついていないものですから
理解ができずにいます。


ご教授いただけないでしょうか。
よろしくお願いいたします。

468
投稿日時: 2021/6/18 11:41
対応状況: −−−
登録日: 2008/10/26
居住地:
投稿: 3217
Re: ECCUBE4 両面幅を狭くする方法をご教授ください。スマートフォン用のメニューをだしたいからです。
>画面幅でレイアウトが変化するレスポンシブデザイン
ここでいう画面幅とはブラウザの横幅になりますので
表示しているブラウザのウィンドウ幅を縮めると勝手にスマホ用のレイアウトが表示されます。

twigファイルはPC、SPで同じファイルを共用しており
CSS内のメディアクエリという仕組みで表示を切り替えています。
style.css内にある以下のような記述の部分がポイントとなります。

@media (min-width: 768px) {

}

@media only screen and (min-width: 768px) and (min-width: 768px) {

}
等。


----------------
株式会社シロハチ
■ECCUBE2系、3系構築カスタマイズご相談ください。
EC-CUBE3マニュアル
blog

masterR
投稿日時: 2021/6/18 15:42
対応状況: −−−
新米
登録日: 2021/1/27
居住地:
投稿: 6
Re: ECCUBE4 両面幅を狭くする方法をご教授ください。スマートフォン用のメニューをだしたいからです。
ありがとうございます。
CSSで教えていただいた箇所を見つけることができました。


ECサイトを運営しているのですが
依頼者さんより
「スマホのハンバーガーメニューを出してほしい」と
頼まれまして調べはじめました。



私のスマホや
ディベロッパーツールからも
ハンバーガーメニューは出ていないのです。


教えていただいた情報を元に
過去ログでも調べてみました。

-----
スマホのハンバーガーメニューをアイコンに変えたい

スマホのハンバーガーめにゅーをアイコンに変えたい
-----
ハンバーガーメニューの表示
ハンバーガーメニューの表示
----
コンパイル元
html/template/default/assets/scss/project/_11.2.header.scss

こちらのページと同じように編集したりもしました。

スマートフォンレイアウトで、サイドのレイアウトにブロックを配置するとフロント画面に表示されない #4104

スマートフォンレイアウトで再度のレイアウトにブロックを配置するとフロント画面に表示されない


でもまだ表示されないでいます。

教えていただいた

教えていただいた箇所

@media (min-width: 768px) {

}

@media only screen and (min-width: 768px) and (min-width: 768px) {

}

こちらを変えることとあと
どこの辺りを確認すると
情報を調べることができますか。


コンパイル元
コンパイル元
などもみておりますが

また知識不足でわからないので
ご教授願います。

どうぞよろしくお願いいたします。



masterR
投稿日時: 2021/6/18 19:49
対応状況: −−−
新米
登録日: 2021/1/27
居住地:
投稿: 6
Re: ECCUBE4 両面幅を狭くする方法をご教授ください。スマートフォン用のメニューをだしたいからです。
ハンバーガーメニューが表示されるようになりました。

良い勉強になりました。
ありがとうございます。

今後ともよろしくおねがいいたします。
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は88,301名です
総投稿数は109,692件です

投稿数ランキング

1
seasoft
7365
2
468
3217
3
AMUAMU
2712
4
nanasess
2303
5
umebius
2085
6
yuh
1818
7
h_tanaka
1610
8
red
1568
9
mcontact
1240
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
796
14 ramrun 789
15 karin 689
16 sumida 641
17
homan
633
18 DELIGHT 572
19
patapata
502
20
flealog
485


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.