バージョン選択

フォーラム

 どうか教えて下さい！  バグ見つけましたよ！  こんな機能あったらなぁ  プラグインについて  その他

メニュー

 当サイトについて  初めてご利用になる方へ  EC-CUBE開発情報

オンライン状況

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

サイト内検索
質問 > フロント機能 > スマホ サムネイル画像

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
luceo
投稿日時: 2019/6/28 23:32
対応状況: −−−
一人前
登録日: 2019/5/20
居住地:
投稿: 133
Re: スマホ サムネイル画像
akiakihi様

アドバイスいただいた通り入力しましたら
直ぐにサムネイルが表示されました！
本当にありがとうございました！
ドットの箇所までのアドバイスもありがとうございました！
私はhtmlとcssの知識が少しある程度なのに
今回ec-cubeにトライしてしまっています。
もっと勉強していきます！
今回の適格なアドバイス本当に
心より感謝しております！

もしもし、もうひとつお尋ねできるのであれば
同じくスマホの商品画像なのですが、
スマホサイズで横幅一杯にしたくて
他いただいたアドバイスにより
以下cssを作成しました。

/* メインコンテンツ外枠の横幅固定を外す */
.ec-layoutRole .ec-layoutRole__contents{
max-width: none; /* 1150px; */
}

一瞬、できた気がしたのですが、戻ってしまってしまい。。
どこが間違っているのでしょうか。
引き続きあつましく、申し訳ありません。
akiakihi
投稿日時: 2019/6/29 1:27
対応状況: −−−
一人前
登録日: 2014/7/17
居住地: 兵庫県
投稿: 91
Re: スマホ サムネイル画像
何度も言うようですが、ブラウザをGoogleChromeにして、F12でデベロッパーツールを使ったほうがいいですよ

htmlの構造がわかりやすいですし、
CSSを変更した結果が、リアルタイムで画面を見ながらわかるので。


.ec-layoutRole__contentsは、ヘッダー下のコンテンツ部分で、もともと幅が100％なので触る必要はないです。

商品詳細のコンテンツは
{% block main %}直下
<div class="ec-productRole">の中に入っているんですが、
このdivは左右のpaddingが20pxあるので、この中に入っている限り、左右の空白はなくなりません。

でもだからといって、これのpaddingをなくしてしまうと、それ以下の本文も左右いっぱいに広がってしまって見にくいことになるので、画像部分のみ画面いっぱいに広げたければ、画像部分の記述を<div class="ec-productRole">から出してやればいいんです。

具体的には、画像部分、一個目の<div class="ec-grid2__cell">の中身を　<div class="ec-productRole">より上に出してみてください。

{% block main %}
    <div class="ec-grid2__cell">
        <div class="ec-sliderItemRole">

            <div class="item_visual">
                {% for ProductImage in Product.ProductImage %}
                    <div class="slide-item"><img src="{{ asset(ProductImage, 'save_image') }}"></div>
                {% else %}
                    <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}"/></div>
                {% endfor %}
            </div>
            <div class="item_nav">
                {% for ProductImage in Product.ProductImage %}
                    <div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}"></div>
                {% endfor %}
            </div>
        </div>
    </div>
    <div class="ec-productRole">
        <div class="ec-grid2">

で、CSSの記述に.ec-sliderItemRoleを付け足して、左右のpaddingを0にしてみてください。

私自身はEC-CUBE４系を使っていなくて、４系のデモサイトを見ながらデベロッパーツールで確認してみているだけですので、、もしかしたらこれではうまくいかないかもしれませんが、
ヒントにはなるかと思います。
luceo
投稿日時: 2019/6/29 2:37
対応状況: 解決済
一人前
登録日: 2019/5/20
居住地:
投稿: 133
Re: スマホ サムネイル画像
akiakihi 様

本当にありがとうございました。
ブラウザはGoogleChrome使用していたのですが
F12・デベロッパーツールは、初めてでしたので
ドリームウエーバーにコピーして編集しておりました。

これからF12・デベロッパーツールに慣れていきたいと思います！

アドバイス通り試させていただきました。
スマホは思い通りに！
ご指摘通り、PC版は画像が大きすぎたので
最終的にはスマホサイズ表示を調整（以下などのcss追加）することにしました。

/* 画面サイズが770以下（スマホ）のときに適応されるCSS */
@media screen and (max-width:770px) {

今回、不躾にたくさんの質問をしてしまったにもかかわらず
とても細かく、的確にアドバイスいただき
本当にありがとうございました。

今回のアドバイスを生かして頑張りたいと思います。
改めて御礼申し上げます。

おやすみなさい。
« 1 (2)
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


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

統計情報

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

投稿数ランキング

1
seasoft 		7367
2
468 		3217
3
AMUAMU 		2712
4
nanasess 		2313
5
umebius 		2085
6
yuh 		1819
7
h_tanaka 		1638
8
red 		1569
9
mcontact 		1280
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.