bcColors:スマホ画面のworksのアイキャッチ画像が縦に羅列されるのを変更したい

WEBサイト制作
1

PCサイトのトップページでは、WORKSのアイキャッチ画像は、横列に表示されています。
表示数を超えると、矢印をクリックすることで次の記事を閲覧できます。

スマホ画面では、画像が縦に羅列されています。
表示件数が12あれば、12枚全てが縦に並ぶ状態です。

■改善したい点
PCと同様に、スマホ画面においても横列（１枚づつ）に表示したい

お手数ですが、ご教示いただけますと幸いです。
よろしくお願いいたします。

【環境情報】
・baserCMSのバージョン：4.4.1.1
・レンタルサーバー名：ロリポップ
・使用テーマ：bcColors
・PHPスキル（自己評価）： E

2

@m_k
とりあえず、変更対象のファイルを変更前後で記載しますので、気に入らない部分があれば、見比べながら工夫してみてください。
default.phpの変更ですので、間違えるとページが表示されなくなることもありますので、事前に元ファイルをdefault_bk.phpなどとリネームしてバックアップした上で、作業された方が良いかと思います。最悪は、元に戻せばいいので。
作業後は、ブラウザ、サーバー共にキャッシュの削除を行なった上で、確認ください。

変更対象ファイル名：bccolors/Layouts/default.php の37行目辺り

変更前

        <?php if($this->BcBaser->isHome()): ?>
            <script type="text/javascript">
                $(function(){
                    $('#MainImage').bxSlider({
                        auto: true,
                        pager: true,
                        speed: 1000,
                        pause: 5000
                    });
                    $('#SliderBox .pager-link').wrapInner('<span></span>');
                    if( !(window.matchMedia('(max-width:640px)').matches )){
                        $('#WorksImage').bxSlider({
                            slideWidth: 300,
                            minSlides: 3,
                            maxSlides: 3,
                            slideMargin: 15,
                            auto: false,
                            pager: false,
                            speed: 1000,
                            pause: 5000,
                            captions: false
                        });
                        $('#Works .pager-link').wrapInner('<span></span>');
                    }
                })
            </script>
        <?php endif ?>

変更後

        <?php if($this->BcBaser->isHome()): ?>
            <script type="text/javascript">
                $(function(){
                    $('#MainImage').bxSlider({
                        auto: true,
                        pager: true,
                        speed: 1000,
                        pause: 5000
                    });
                    $('#SliderBox .pager-link').wrapInner('<span></span>');
                    
                    $('#WorksImage').bxSlider({
                        slideWidth: 300,
                        minSlides: 1,
                        maxSlides: 3,
                        slideMargin: 15,
                        auto: false,
                        pager: false,
                        speed: 1000,
                        pause: 5000,
                        captions: false
                    });
                    $('#Works .pager-link').wrapInner('<span></span>');
                })
            </script>
        <?php endif ?>

変更対象ファイル名：bccolors/css/top.css の199行目辺り

変更前

#Works .bx-prev {
	position: absolute;
	left: -30px;
	top: 100px;
	display: block;
	width: 9px;
	height: 14px;
	background: url(../img/top/btn_works_prev.png) no-repeat;
	text-indent: -9999em;
	overflow: hidden;
}
#Works .bx-next {
	position: absolute;
	right: -30px;
	top: 100px;
	display: block;
	width: 9px;
	height: 14px;
	background: url(../img/top/btn_works_next.png) no-repeat;
	text-indent: -9999em;
	overflow: hidden;
}

変更後

#Works .bx-prev {
	position: absolute;
	left: 0px;
	top: 105px;
	display: block;
	width: 30px;
	height: 30px;
	background: url(../img/slider/btn_prev.png) no-repeat;
	text-indent: -9999em;
	overflow: hidden;
	background-size: cover;
}
#Works .bx-next {
	position: absolute;
	right: 0px;
	top: 105px;
	display: block;
	width: 30px;
	height: 30px;
	background: url(../img/slider/btn_next.png) no-repeat;
	text-indent: -9999em;
	overflow: hidden;
	background-size: cover;
}

以下追記

上記変更内容について簡単にご説明します。

@m_k さんの上記要件は、jQueryのbxsliderというスライドショープラグインが使われているのですが、640px以上のWindow幅に対するメディアクエリーの条件設定はされているのですが、それ以外（つまりスマホビュー）については、条件設定が無く、そのため通常のリスト表示になっていました。
よって、640px以上のWindow幅に対するメディアクエリーの条件設定自体を削除し、その上で、bxsliderの「minSlides」オプションを「1」に設定することで、スマホビューでは、ほぼ１枚に表示されるように変更しました。
ただ、ご使用になるアイキャッチのサイズ（およびアスペクト比）によっては、場合によって縦長に扁平表示される可能性がありますので、その場合は、CSS等で調整する必要が出てくるかもしれません。
また、「minSlides」以外のbxsliderのオプションはググれば結構ヒットしますので是非ご自身でお調べください。

次にtop.cssの変更箇所は、640px以下の場合、next、prev用の画像アイコンがアイキャッチ画像の外側にレイアウトされたままだとページ全体に横スライダーが表示されてしまうため、アイキャッチ画像の表示幅内に収めるための変更を加えています。
また、デフォルトのnext、prev用の画像アイコンが背景が透明化されていなかったため、トップスラーダーで使用しているアイコンを縮小して流用しました。

「いいね！」 1
3

詳細にご教示くださりありがとうございました。
助かりました。早速、取り掛かります。
時間がかかる可能性がありますので、ひとまずお礼のメッセージを。
改めて、ご報告させていただきます。

4

@GUSSAN さん、この度はありがとうございました。

ご教示いただきました通りさせて頂きましたら、希望通りスマホビューは１枚表示に変更できました。

PC画面のWORKSの矢印が左右のキャッチ画像に重なるようになったため、

bccolors/css/top.css の229行目辺り
@media screen and (max-width: 640px) {
内に変更後のコードをコピペし

スマホビューにのみに設定が影響するようにしました。

ここまで詳細に教えていただき、心から感謝致します。
ありがとうございました。

「いいね！」 1