バージョン選択

フォーラム

メニュー

オンライン状況

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

サイト内検索

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

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
yushi
投稿日時: 2020/5/15 10:58
対応状況: 開発中
半人前
登録日: 2018/5/13
居住地:
投稿: 14
商品リストを横並びにしたい
▼テンプレート
[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
居住地:
投稿: 3217
Re: 商品リストを横並びにしたい
ブラウザのツールを使って、リアルタイムで適用されているCSSを確認された方が良いのではないかと思います。

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

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


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

yushi
投稿日時: 2020/5/15 19:03
対応状況: −−−
半人前
登録日: 2018/5/13
居住地:
投稿: 14
Re: 商品リストを横並びにしたい
Shiro8さん
いつもありがとうございます。
検証ツールの使い方を勉強します。
http://www.〇〇〇.jp/html/user_data/packages/scss/_reboot.scss
というcssが該当しましたが、見当たらず困りました…
468
投稿日時: 2020/5/16 11:57
対応状況: −−−
登録日: 2008/10/26
居住地:
投稿: 3217
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
居住地:
投稿: 14
Re: 商品リストを横並びにしたい
shiro8様

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

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


 



ログイン


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

統計情報

総メンバー数は88,293名です
総投稿数は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.