バージョン選択

フォーラム

メニュー

オンライン状況

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

サイト内検索

質問 > その他 > スマホのページ幅設定について

その他

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
FISLAND
投稿日時: 2018/4/10 13:46
対応状況: −−−
半人前
登録日: 2017/2/2
居住地:
投稿: 23
スマホのページ幅設定について
お世話になります。

スマホ版をのページ表示で困っています。
スマホ版の表示画面の横幅を調節したいですが
どこから調節可能でしょうか?

よろしくお願いします。

▼テンプレート
[EC-CUBE] 2.13.2
[レンタルサーバ] さくらインターネット
[OS] win10
[PHP] PHP 5.6.33
[データベース] MySQL 5.5.59-log
matchbou
投稿日時: 2018/4/12 10:49
対応状況: −−−
一人前
登録日: 2018/3/19
居住地:
投稿: 130
Re: スマホのページ幅設定について
表示画面の調整なので、data\Smarty\templates\sphone\site_main.tplにある
<div data-role="page" data-keep-native=".data-role-none" data-theme="f">

に以下のコードのようにstyle="width:○○px;"を追加すれば、画面全体の幅は調節できますが、
<div data-role="page" data-keep-native=".data-role-none" data-theme="f" style="width:240px;">

この認識よろしいのでしょうか?


----------------
アイフォーコム株式会社
お問い合わせ URL:https://www.iforcom.jp/ec/
tel:045-412-3010
EC-CUBEの構築・カスタマイズは有償で承ります。ご相談下さい

FISLAND
投稿日時: 2018/4/12 11:44
対応状況: −−−
半人前
登録日: 2017/2/2
居住地:
投稿: 23
Re: スマホのページ幅設定について
matchbou 様

ご返信ありがとうございます。
サイズを指定し画像をwidth="100%"にしても画面に余白が出てしまうことが分かりました。

現在、スマホのページで文字や画像が小さすぎてかなりみにくい状態です。現状どのように改善すればよろしいでしょうか?

よろしくお願いします。
matchbou
投稿日時: 2018/4/12 13:39
対応状況: −−−
一人前
登録日: 2018/3/19
居住地:
投稿: 130
Re: スマホのページ幅設定について
質問の内容ですが、ページ幅を調節したいではなくて、スマホページの文字や画像を大きくしたいということでよろしいのでしょうか?

文字や画像に関してもどの箇所かにもよりますが、全体的に文字を大きくする場合は管理画面の「デザイン管理」→「スマートフォン」→「css設定」のページを開くと編集可能CSSファイルにcommon.cssがあり、そちらの「編集」をクリックしていただければ、bodyのfont-sizeを変更すれば、文字サイズを大きくできます。
画像もどの箇所かにもよりますが、例えばTOPに表示されている商品の画像であれば、同じ「css設定」でblock.cssの.recommendblock imgのwidthを変更すれば画像が大きくなります。


----------------
アイフォーコム株式会社
お問い合わせ URL:https://www.iforcom.jp/ec/
tel:045-412-3010
EC-CUBEの構築・カスタマイズは有償で承ります。ご相談下さい

FISLAND
投稿日時: 2018/4/12 14:26
対応状況: −−−
半人前
登録日: 2017/2/2
居住地:
投稿: 23
Re: スマホのページ幅設定について
matchbou 様

早速のご返答ありがとうございます。
説明が下手で申し訳ございません。

スマホからページを確認すると「ようこそゲストさん」、「新規会員登録」、「ボタン」などがとっても小さく見えます。
そしてボタンの形も横長いのにボタンとボタンの間も隙間が入っていますしる状態です。(カスタマイズをしていない初期の状態と比較)

それで画面を拡大してみないとヘッダーとフッターは字が読めません。

matchbou様の説明の通り下記のように作成されていましたが、こちらが基本の状態でしょうか?

<div data-role="page" data-keep-native=".data-role-none" data-theme="f">

大変お手数をおかけしますが、よろしくお願いします。
matchbou
投稿日時: 2018/4/12 15:45
対応状況: −−−
一人前
登録日: 2018/3/19
居住地:
投稿: 130
Re: スマホのページ幅設定について
横幅の調整ではなく、文字サイズや画像の調整であれば、
<div data-role="page" data-keep-native=".data-role-none" data-theme="f">
上記ではなく、cssの調整になりますので、「style="width:○○px;"」部分は破棄していただければと思います。
cssの調整ですが、開発者モードで確認していただければ、どのcssファイルのどの箇所か等が分かるかと思うので、font-sizeやwidthを変更すれば、大きくなるかと思います。


----------------
アイフォーコム株式会社
お問い合わせ URL:https://www.iforcom.jp/ec/
tel:045-412-3010
EC-CUBEの構築・カスタマイズは有償で承ります。ご相談下さい

FISLAND
投稿日時: 2018/4/13 14:30
対応状況: −−−
半人前
登録日: 2017/2/2
居住地:
投稿: 23
Re: スマホのページ幅設定について
matchbou 様

ご返信ありがとうございます。
文字の画像のサイズを調節しながらサイズを調節してみたいと思います。
色々調べたところviewportの設定もしてなかったので同時に進めてみたいと思います。

ありがとうございます。
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


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

統計情報

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

投稿数ランキング

1
seasoft
7365
2
468
3217
3
AMUAMU
2712
4
nanasess
2303
5
umebius
2085
6
yuh
1818
7
h_tanaka
1610
8
red
1567
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.