小さい画像や、カラム分けしたコンテンツに入っている画像はスマホで見た時に小さく表示されてしまうことってよくありますよね。
今回は、JIMDOクリエイターサイトのスマホ表示で、メインコンテンツ、サイドバーエリア（または編集フッターエリア）の画像幅を調整する方法を3種類解説します。
今回やりたいこと
スマホのブラウザでサイトを見た時に、
- 小さい画像をコンテンツ枠一杯まで大きく表示したい
- カラム内に設定した画像をコンテンツ枠一杯まで大きく表示したい
- メインコンテンツエリアの画像幅のみ横一杯に表示したい
- サイドバーエリア（編集フッターエリア）の画像幅のみ横一杯に表示したい
①と②は同じ方法で解決できます。
事前準備
画像サイズの調整は、デザインスタイルの設定ではできません。
そのため、ヘッダー編集機能を使用してCSSで設定をする必要があります。
JIMDOクリエイターのクラス名を指定することになるので、まずは各クラス名を確認していきましょう。
クラス名を確認する
JIMDOクリエイターサイトでの画像の左右幅は、余白のサイズと、画像のサイズでそれぞれ構成されています。
| 設定箇所一覧 | クラス名 | 指定できる値 |
| 画像サイズ | .cc-imagewrapper img | width:-webkit-fill-available; width:-ms-fill-available; width:-moz-fill-available; width:fill-available; width:npx width:n% etc… |
| コンテンツ幅の余白サイズ | .jtpl-content | padding:20px;（デフォルト） padding:n%; padding:nvh; padding:nvw; padding:nvmax; padding:nvmin; etc… |
| 各要素ごとの余白サイズ ※画像以外のすべてのコンテンツを含む |
.cc-m-hgrid-column .n div.flexmodul, div.n .n |
padding:5px;（デフォルト） padding:n%; padding:nvh; padding:nvw; padding:nvmax; padding:nvmin; etc… |
画像サイズは「.cc-imagewrapper img」というクラス名で指定が必要になります。
コンテンツ幅全体の余白は「.jtpl-content」というクラス名で設定されています。
デフォルトでは横幅が左右それぞれ20pxずつ指定されています。
要素ごとの余白は「.cc-m-hgrid-column .n」 / 「div.flexmodul, div.n」 / 「.n」というクラス名とID名で優先順に上書き設定されています。
デフォルトでは横幅が左右それぞれ5pxずつ指定されています。
イメージとしてはこんな感じです。
コンテンツ幅全体の余白と要素ごとの余白の調整は、サイト全体の表示崩れの原因にもなるため、基本的には変えないほうが良いです。
なので今回は画像自体のサイズ調整のみを行います。
変更箇所が把握できたら、早速設定をしていきましょう。
STEP1：ヘッダー編集を開く
まずは、管理画面を開き、「基本設定」→「ヘッダー編集」を開きましょう。
STEP2：設定するCSSコードを貼り付ける
コンテンツエリア全体、メインコンテンツエリアのみ、サイドバーエリア（編集フッターエリア）のみ、で3パターン設定方法があるので、それぞれ紹介します。
全体に設定する場合
メインコンテンツエリア、サイドバーエリア（または編集フッターエリア）の両方で画像幅を広げる場合は以下のコードをコピペして保存しましょう。
See the Pen
Jimdo Creator change image width on sp-screen all by Sachi Fukuzawa (@Sachi-Fukuzawa)
on CodePen.
※スクリーンサイズはデフォルトの768px以下で指定していますが、px、％単位等の細かいサイズ指定をする場合は、スマホの画面サイズごとに設定が必要です。
※既にCSSを入れている場合はStyleタグの部分は不要です。
メインコンテンツエリアのみに設定する場合
メインコンテンツエリアのみ画像幅を変更し、サイドバーエリア（または編集フッターエリア）のサイズは変えたくない場合は、指定するクラス名が「.cc-imagewrapper img」から「#content_area .cc-imagewrapper img」に変わります。
以下のコードをコピペして保存しましょう。
See the Pen
Jimdo Creator change image width on sp-screen maincontents area by Sachi Fukuzawa (@Sachi-Fukuzawa)
on CodePen.
サイドバーエリア（または編集フッターエリア）のみに設定する場合
先ほどとは逆にサイドバーエリア（または編集フッターエリア）のみ画像幅を変えたい場合は、指定するクラス名が「.cc-imagewrapper img」から「.jtpl-section-aside__inner .cc-imagewrapper img」に変わります。
こちらも以下のコードをコピペして保存しましょう。
See the Pen
Jimdo Creator change image width on sp-screen sidebar area by Sachi Fukuzawa (@Sachi-Fukuzawa)
on CodePen.
おわりに
今回は、JIMDOクリエイターサイトのスマホ表示で、メインコンテンツ、サイドバーエリア（または編集フッターエリア）の画像幅を調整する方法を3種類解説しました。
画像が大きく表示されず困っていた方は是非この方法を参考にしてみて下さい。