バージョン選択

フォーラム

メニュー

オンライン状況

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

サイト内検索

質問 > フロント機能 > 商品リストを横並びにしたい

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
yushi
投稿日時: 2020/5/15 10:58
対応状況: 開発中
半人前
登録日: 2018/5/13
居住地:
投稿: 12
商品リストを横並びにしたい
▼テンプレート
[EC-CUBE] EC-CUBE2.17、新規インストール
[onamae.com] SD11プラン
[OS] Windows10
[PHP] 使用しているPHPのバージョン 5.6.40
[データベース] 使用しているDB名 Mysql、バージョン 5.6.14
[ブラウザ] 使用しているブラウザ名、chrome バージョン: 81.0.4044.129
[導入プラグインの有無] 無
[カスタマイズの有無] Bootstrap4を利用してレスポンシブにしたいと思っています。
[現象] 再現手順や、どのような現象が発生しているかなど、具体的に

お世話になっております。
Webやフォーラムの過去を調べてみたのですが、判らず、質問させてください。
EC-CUBE2.17にBootstrap4を入れております。
そこで商品リスト(list.tpl)を横並びにしたいのですが、どのCSSが関わっているのかが判らずです…。
container内でcol-sm-6 col-md-3のカードにできたらと考えています。

Webで調べてみると、user_data/packages/〇〇〇/css/contents.cssとありますが、このファイルがなく、デフォルトのcssが使われるのでしょうか?

申し訳ありませんがご教授いただけますと幸いです。
468
投稿日時: 2020/5/15 11:05
対応状況: −−−
登録日: 2008/10/26
居住地:
投稿: 2292
Re: 商品リストを横並びにしたい
ブラウザのツールを使って、リアルタイムで適用されているCSSを確認された方が良いのではないかと思います。

Firefoxであれば調べたい箇所を右クリックして「要素を調査」、
Chromeであれば調べたい箇所を右クリックして「検証」で
開発者向けの画面が表示されるかと思います。
これでHTMLソースを確認しながら、そこに適用されているCSSも確認できます。
CSSファイルと行数も情報として表示されると思います。

この方法であれば、どのサイトでも自分で調査できるようになるかと思いますし、カスタマイズされたようなサイトでも調査可能かと思います。


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

yushi
投稿日時: 2020/5/15 19:03
対応状況: −−−
半人前
登録日: 2018/5/13
居住地:
投稿: 12
Re: 商品リストを横並びにしたい
Shiro8さん
いつもありがとうございます。
検証ツールの使い方を勉強します。
http://www.〇〇〇.jp/html/user_data/packages/scss/_reboot.scss
というcssが該当しましたが、見当たらず困りました…
468
投稿日時: 2020/5/16 11:57
対応状況: −−−
登録日: 2008/10/26
居住地:
投稿: 2292
Re: 商品リストを横並びにしたい
SASSという仕組みでCSSが作られている為、そのような表示となっています。
SASSについては別途詳しく調べていただければと思いますが、
ざっくりと説明すると、CSSを作る為のプログラムをコンパイルしてCSSを作り出す技術で
検証ツールで表示されている****.scssはCSSを作る為のプログラム(元ソース)になります。
SASSの開発者はそのほうが都合が良い為です。

chromeの場合、設定で元ソースではなくCSSを表示するように変更できます。
ECCUBEの話ではなく、chrome全般の操作になるので詳しい説明は割愛しますが
以下のサイトで「Enable CSS source maps」にチェックが付いている画面の画像がありますので
そのチェックボックスのチェックを外してください。
https://blog.webico.work/chrome-live-sass

firefoxの場合、****.scss:行数の表示上で右クリック→元のソースを表示のチェックを外すと
CSSのファイル名、行数に表示が切り替わります。


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

yushi
投稿日時: 2020/5/18 18:45
対応状況: −−−
半人前
登録日: 2018/5/13
居住地:
投稿: 12
Re: 商品リストを横並びにしたい
shiro8様

クロームの検証機能についてご教授いただきましてありがとうございました。SASSなのですね。BootstrapもSASSを使うと良いと書かれていましたが、スルーしていました。
SASSについての知識を深めていきたいと思います。

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


 



ログイン


EC-CUBEペイメント

公式ストアEC-CUBE4系デザインテンプレート続々リリース中

統計情報

総メンバー数は62,231名です
総投稿数は96,227件です

投稿数ランキング

1
seasoft
7332
2
AMUAMU
2712
3
468
2292
4
nanasess
2044
5
yuh
1612
6
umebius
1588
7
red
1403
8
h_tanaka
1009
9
fukap
907
10
tsuji
863
11
shutta
835
12
tao_s
792
13 ramrun 789
14 karin 656
15 sumida 641
16
homan
633
17 DELIGHT 571
18
patapata
502
19
flealog
485
20 tonton 437


ネットショップの壺

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

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