kokoro
1
【環境情報】
・baserCMSのバージョン：4.6.1.1
・レンタルサーバー名：ロリポップ
・使用テーマ：bc_sample
・PHPスキル（自己評価）：D
はじめまして。数年前から、bc_sampleテーマを、4.0.6バージョンのbaserCMSで使用させていただいておりました。
今回リニューアルしようと、再度baserCMSをダウンロードしてＨP作成しております。しかし、以前の様な、スマホ版のCSSが見当たらず（レスポンシブだからですかね）、どこを修正すれば良いのか分かりません。
ブログ記事作成で、困っています。
ファイルプロパティにて、画像を挿入する際に、サイズ大（large）を選択すると、スマホで見ると画像がはみ出してしまいます。
サイズ中（midium）ならはみ出すことはありませんが、パソコンで見たときに小さすぎるため、
希望としては
・パソコンではサイズ大（large）で表示
・スマホではmax-width: 100%; のような、はみ出さず画面幅に
表示させたいです。
アイキャッチ画像は、きちんとスマホの幅に合わせて表示されるので、そのようにしたいです。
ご教示頂けますと助かります。
何卒よろしくお願い申し上げます。
GUSSAN
2
単刀直入にお答えしたいのですが、それはそれで乱暴な気もするので少し悩みました。
すこし、背景的な部分も説明しつつ、具体的な方法をお話ししようと思います。
まず、ご指摘のbc_sampleteテーマは、Sass（SCSS記法）というCSSを拡張したメタ言語でスタイルシートが作成されています。Sassは、スタイルを作成する上でコード量を少なく、より体系化した記載ができ、後のスタイルの訂正、編集などが簡便かつ合理的に行えるというメリットがあります。
ですがSassコードは、そのままではブラウザーが解釈することができないため、Sassコードで作成されたファイルをcssファイルに変換（コンパイル）した上でサーバー上に配置する必要があります。
以上の前提で、bc_sampleteテーマのCSS関連のファイルを見ていくと、
① Sassコードで作成されたファイル → theme/bc_sample/__assetsフォルダ内
② コンパイルされたcssファイル → theme/bc_sample/cssフォルダ内
という構成になっています。
この構成を継承して、今後のテーマ改修に伴うcssファイルの編集を行うということであれば、編集対象は①、
この構成を破棄して、直接cssファイルを編集してしまうのであれば、編集対象は②ということになります。
構成を継承して①で進めていく場合は、Sassファイルをコンパイルするための環境を用意する必要があり、ひと手間あります。（それなりにプログラミングなどのスキルも必要だったりします。）
構成を破棄して②で進めていく場合は、これまでお使いのテキストエディターのみで行えます。
ここからは、個人的な見解ですが、大幅にテーマを改変していくというのであれば、①で進めていく方が合理的かもしれませんが、そうでない（対して改変しない）のであれば、②でいいような気がします。
ですので、②で進める前提で、以下、具体的な方法、手順についてコメントします。
編集対象のCSSは、theme/bc_sample/cssフォルダ内の以下のcssファイル。
style.css
editor.css
bge_style.css
あるいは、新規に追記・書き換え用のcssファイルを別途作るというのでもいいかもしれません。
cssファイルを編集する場合は、各cssファイルの最終行に記載している以下のsourceMapの記述は、削除してしまって構いません。そうすれば、ブラウザーの開発ツール上でも該当するCSSが直接表示されるようになりますので、その方が都合がいいと思います。
/*# sourceMappingURL=maps/＊＊＊.css.map */
さて、具体的な方法ですが、今回のご意向は、ブログ、シングルページ、コンテンツエリア内のimgファイルについて、ご指摘のように「max-width:100%」を指定すれば良いと思います。
以前のbc_sampleテーマの構成がどのようだったかはよく知らないのですが、現状(4.6.1.1内包)のbc_sampleを見ると、ご指摘のようにレスポンシブ対応ですので、メディアクエリー毎にCSS要素（セレクタ）のプロパティや設定値を変更する必要がある場合は、メディアクエリーを分けて記述しますが、今回のブログコンテンツエリア内のimgファイルの「max-width:100%」については、特に必要ないと思います。
ですので、具体的な記述としては、
theme/bc_sample/css/style.cssの1269行目あたりに挿入。
/* ブログ内imgのサイズ */
.bs-main-contents img {
max-width: 100%;}
また、蛇足ですが、コメント欄の入力フィールドもボックス枠からはみ出しているので、
以下の記述をtheme/bc_sample/css/style.cssの1439行目あたりに挿入すれば、きれいに収まると思います。
/* ブログコメント欄の入力フィールドサイズ調整 */
.bs-blog-comment__form input[type=text],
.bs-blog-comment__form textarea {
box-sizing: border-box;
width: 100% !important; }
以上です。
kokoro
3
御礼が遅くなり申し訳ございません。
詳しくお教え頂いたことで、理解が深まりました。
仰る通り、②でCSSファイルを編集していきたいと思います。
コメント欄もはみ出していたとは、ご教示頂き助かりました。
おかげさまで、私のような詳しくない者にも取り組めます。
ありがとうございました。 
