バージョン選択

フォーラム

メニュー

オンライン状況

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

サイト内検索

 > フロント機能 > スマホに表示させない

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
ytk
投稿日時: 2016/4/27 15:25
対応状況: −−−
仙人
登録日: 2009/12/7
居住地:
投稿: 349
スマホに表示させない
レスポンシブの標準のデザインで編集をしているのですが

PCでは表示させてスマホで見た際に表示させないという事はブロック単位で可能ですか?


----------------
EC-CUBE 3.0.17
サーバーOS Linux
DBサーバー MySQL
WEBサーバー Apache
PHP 7.1.5

mirainak
投稿日時: 2016/4/28 11:26
対応状況: −−−
常連
登録日: 2016/3/8
居住地: 東京
投稿: 58
Re: スマホに表示させない
こちらは twitter bootstrap の仕様で

hidden-xs

という class名をつければ、

非表示になるかと思います。
mirainak
投稿日時: 2016/4/28 11:30
対応状況: −−−
常連
登録日: 2016/3/8
居住地: 東京
投稿: 58
Re: スマホに表示させない
すみません、デフォルトのbootstrapと仕様がかわっており

こちらテーマファイルを確認しましたら、

pc というクラスをつければ、767px 以下で

非表示になります。
ytk
投稿日時: 2016/4/28 13:24
対応状況: −−−
仙人
登録日: 2009/12/7
居住地:
投稿: 349
Re: スマホに表示させない
ありがとうございます。もう少しだけ詳しく教えて頂けませんか。
PCというクラスはどこにどのように付けるのでしょうか。


----------------
EC-CUBE 3.0.17
サーバーOS Linux
DBサーバー MySQL
WEBサーバー Apache
PHP 7.1.5

mirainak
投稿日時: 2016/4/28 14:00
対応状況: −−−
常連
登録日: 2016/3/8
居住地: 東京
投稿: 58
Re: スマホに表示させない
block 単位であれば、
そのblockを囲う、 div や section に class="pc" と命名して
あげれば大丈夫です。



例として下記の

logo.twigをpc表示にしたい場合は、全体を囲うheader_logo_areaというクラスに追加して、半角スペースを空けて、 pc をつけてあげます。全体を囲うdiv や sectionがない場合は、divやsectionで囲ってあげてpcのクラスをつけてください。


<div class="header_logo_area pc">
<p class="copy">くらしを楽しむライフスタイルグッズ</p>
<h1 class="header_logo"><a href="{{ url('homepage') }}">{{ BaseInfo.shop_name }}</a></h1>
</div>
ytk
投稿日時: 2016/5/3 20:11
対応状況: −−−
仙人
登録日: 2009/12/7
居住地:
投稿: 349
Re: スマホに表示させない
ご返信ありがとうございます。
理解力不足でもう一度ご教授いただけますと大変助かるのですが

<div id="cart_area pc">という感じでカートのブロックを変更したのですがまだ携帯で表示されるのですが他に設定することがございますでしょうか。


----------------
EC-CUBE 3.0.17
サーバーOS Linux
DBサーバー MySQL
WEBサーバー Apache
PHP 7.1.5

mirainak
投稿日時: 2016/5/11 13:38
対応状況: −−−
常連
登録日: 2016/3/8
居住地: 東京
投稿: 58
Re: スマホに表示させない
ご返信おそくなりました。

pc をつけても表示されるということは通常ないと思いますが


他の方法をご提案すると、下記をcssに追記してやれば、
ブラウザサイズが480px以下になると指定した要素が消えます。
iphone6 plus の横幅が414pxなので480pxであれば
ほとんどのスマホでは表示なしに出来るかと思います。


@media screen and (max-width: 480px) {
.消したいクラス名{
display:none;
}
}
esuppo
投稿日時: 2016/5/13 20:29
対応状況: −−−
新米
登録日: 2016/3/28
居住地:
投稿: 4
Re: スマホに表示させない
横から失礼ですが、
<div id="cart_area pc">
まちがってますよ。
<div id="cart_area" class=" pc">
では?
mirainak
投稿日時: 2016/5/16 17:16
対応状況: −−−
常連
登録日: 2016/3/8
居住地: 東京
投稿: 58
Re: スマホに表示させない
esuppo様

なるほど。それですね!
ytk
投稿日時: 2016/5/24 17:25
対応状況: −−−
仙人
登録日: 2009/12/7
居住地:
投稿: 349
Re: スマホに表示させない
ご教授いただきましてありがとうございます。
きれいに治りました。


----------------
EC-CUBE 3.0.17
サーバーOS Linux
DBサーバー MySQL
WEBサーバー Apache
PHP 7.1.5

(1) 2 »
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


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

統計情報

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

投稿数ランキング

1
seasoft
7367
2
468
3217
3
AMUAMU
2712
4
nanasess
2311
5
umebius
2085
6
yuh
1819
7
h_tanaka
1635
8
red
1569
9
mcontact
1265
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
799
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.