写真を差し替えても小さく表示されるときの原因｜外側の幅を直しても内側にもう1階層の固定幅が残っている構造と、どの要素が幅を決めているかを突き止める手順

先生紹介やスタッフ紹介のページで、「写真が小さいので大きい写真に替えてほしい」と言われて差し替えたのに、ページ上の見た目がほとんど変わらない。こういう相談はWordPressのサイトでよく起きます。

結論から書きます。ページ上の写真の大きさは、写真ファイルの大きさではなく、その写真が入っている「箱」の幅で決まります。 大きいファイルに替えても小さいままなら、写真の外側のどこかに幅を狭めている箱があります。しかもその箱は、一番外側とは限りません。

正しい調べ方は次の順番です。

1. 写真そのものの表示サイズを測る（ファイルの大きさではなく、画面上の幅）
2. 写真から一番外側（body）まで、親の箱を1階層ずつたどって幅を並べる
3. 幅が急に狭くなっている階層を見つけ、その箱に付いている指定（固定幅・float・max-width・カラム比率）を確認する
4. その階層を直したら、もう一度写真から外側まで全部たどり直して、途中で止まっていないことを確かめる

ポイントは2と4です。一番外側の枠が画面幅いっぱいになっていても、その内側にもう1階層、固定幅の箱が残っていれば写真はそこで止まります。外側だけを測って「直った」と判断すると、見た目は小さいまま公開され続けます。

この記事では、スクールのWordPressサイトで写真が331×220pxまで縮んでいたものを1000×667pxに戻した実例をもとに、幅を決めている要素の突き止め方を整理します。

写真の大きさを決めているのは「箱の入れ子」

ホームページのレイアウトは、箱の中に箱が入った入れ子の構造になっています。WordPressのテーマなら、ざっくり次のような形です。

• ページ全体の箱
• ヘッダー
• メインエリアの箱（本文とサイドバーを並べる）
• 本文カラムの箱
• 記事本文の箱
• 写真
• サイドバーの箱
• フッター

写真は「入っている箱の幅」を上限に表示されるのが一般的です。多くのテーマは写真に「箱の幅を超えない（max-width: 100%）」という指定を入れているので、箱が830px幅なら、2000pxの写真を入れても830px以下にしか表示されません。

そして、この入れ子のどこか1か所でも幅が狭ければ、その内側はすべてその幅に縛られます。外側の箱をいくら広げても、内側に狭い箱が1つ残っていれば結果は変わりません。写真の大きさの問題は、たいてい「どの階層で幅が止まっているか」の問題です。

ファイルを大きくしても変わらないのはこのためです。逆に言えば、ファイルを差し替える前に箱の幅を確かめれば、無駄な差し替え作業をせずに済みます。

実例：サイドバーを消したのに、写真が左半分に押し込まれたままだった

長く運用されてきたWordPressテーマ＋ページビルダーのスクールサイトで、先生紹介ページの見た目を整えたときの例です。

もともとこのページは、右側にサイドバーがある2カラムの作りでした。サイドバーを非表示にして本文を全幅にする改修を行い、メインエリアの箱の幅を測ると1083px。画面幅とほぼ一致していたので、この時点では全幅化できたように見えていました。

ところが、実際のページでは写真が331×220pxという小さな表示のままで、右半分が空いていました。原因を調べると、メインエリアの箱の内側にもう1階層、本文カラムの箱が残っていて、そこに「左寄せ（float: left）・幅830px」という指定が付いたままだったのです。

階層	修正前	状態
メインエリアの箱	1083px（画面幅と一致）	ここは直っていた
本文カラムの箱	830px・左寄せ	ここで幅が止まっていた
記事本文の箱	830px以下	上の箱に縛られる
写真（写真＋文章の2カラム）	331×220px	結果として小さく表示

サイドバーを消すと右側の中身は無くなりますが、本文カラムに付いていた「サイドバーの分だけ幅を空けておく」指定は残ります。テーマ側は「本文830px＋サイドバー」を前提に作られているため、サイドバーだけ消すと、本文は830pxのまま左に寄り、右に空白が残るわけです。さらに本文の中で写真と文章を横並びにしていたので、830pxをさらに2つに割った幅に写真が収まり、331pxまで縮んでいました。

本文カラム・記事本文の箱まで遡って幅と左寄せを外し、コンテンツ幅を1200px・中央寄せに整えたうえで、写真を上に大きく、文章をその下に置く構成に変えました。

	修正前	修正後
写真の表示サイズ	331 × 220px	1000 × 667px
コンテンツ幅	830px（左寄せ）	1200px（中央）
構成	写真＋文章の横並び	写真を上に大きく、文章を下に

この例で分かるのは、「一番外側の幅が画面幅と一致した」ことは、中身が全幅で表示されている保証にならないということです。見た目が崩れて読めなくなるわけではなく、「なんとなく小さい」「右が空いている」程度なので、気づかれないまま公開され続けやすいのも厄介な点です。

どの要素が幅を決めているかを突き止める手順

ここからは、実際に調べるときの手順です。パソコンのChromeを前提にしますが、他のブラウザでも考え方は同じです。

手順1：写真の「表示サイズ」を測る

写真の上で右クリックして「検証」を選ぶと、開発者ツールが開き、写真のタグが選択された状態になります。マウスを載せると「331 × 220」のように表示サイズが出ます。

このとき、ファイル本来のサイズ（例：2000×1333）と表示サイズを区別します。ファイルが大きいのに表示が小さいなら、原因は箱の側です。ファイル自体が小さいなら、先にファイルを差し替える必要があります。

WordPressの場合、本文に写真を入れるときに「中サイズ」「サムネイル」を選んでいると、元の写真が大きくても縮小版のファイルが使われます。初期設定では中サイズが最大300px、サムネイルが150pxなので、表示サイズがこの付近ならサイズ選択を先に疑います。

手順2：写真から外側まで、親の幅を全部並べる

開発者ツールの「Console」タブに次の1行を貼り付けて実行すると、選択中の写真から一番外側まで、各階層の名前・幅・左寄せの有無が一覧で出ます。

let p = $0; while (p) { console.log(p.id || p.className || p.tagName, Math.round(p.getBoundingClientRect().width), getComputedStyle(p).float, getComputedStyle(p).maxWidth); p = p.parentElement; }

$0 は「いま開発者ツールで選択している要素」を指します。手順1で写真を選んだ状態のまま実行してください。

出力を下から（外側から）見ていき、幅が急に狭くなる階層を探します。先ほどの例なら、1083pxの次に830pxが出てくる箇所が犯人です。

手順3：狭くなった階層の指定を読む

見つけた階層を開発者ツールの「Elements」で選び、右側の「Styles」で幅に関係する指定を確認します。幅が止まる原因として多いのは次の5つです。

原因	よくある場所	見分け方
固定幅（width: 830px など）	テーマの本文カラム	画面を広げても幅が変わらない
左寄せ・右寄せ（float）	サイドバー付きテーマの本文	右や左に空白が残る
最大幅（max-width）	記事本文・写真を囲む枠	一定以上に広がらない
カラムの比率	ページビルダーの横並び	写真と文章で幅を分け合っている
写真自体の幅指定	写真タグのwidth属性・CSS	写真だけが小さく、箱は広い

1つ直すと、その内側で別の指定が見えてくることもあります。1階層直すたびに手順2をやり直すのが確実です。

手順4：直したら、もう一度全部たどる

幅を直したら、写真の表示サイズと、写真から外側までの幅の一覧を取り直します。写真の幅がコンテンツ幅に近い値まで広がっていれば完了です。外側の箱だけ測って終わりにしないことが、この手順で一番大事な点です。

あわせて、スマホ幅（開発者ツールの端末表示）でも写真がはみ出していないか、縦に伸びていないかを確認します。幅を広げた結果、スマホで横スクロールが出るケースがあるためです。

直すときの判断基準

どの階層で止まっているかが分かったら、直し方を選びます。

• そのページだけの問題なら、そのページだけに効く指定で直す。テーマの本文カラムの幅を全体で変えると、サイドバーを残している他のページまで崩れる可能性があります
• テーマのファイルを直接書き換えない。テーマの更新で元に戻るうえ、どこを変えたか追えなくなります。子テーマや追加CSS、プラグインで上から被せる形にしておくと、外せば元に戻せます
• サイドバーを消すときは、本文側の幅指定もセットで外す。サイドバーの中身を消すだけでは、本文の「サイドバー分を空ける」指定が残ります
• 横並びで小さいなら、構成ごと変える選択肢もある。写真を主役にしたいページなら、写真と文章を横に並べるより、写真を上に大きく置き文章を下に回す方が伝わりやすいことが多いです

テーマを変えずに見た目を整える進め方は「WordPressのテーマを変えずにデザインを今風にする方法」で詳しく書いています。

起こりうるリスクと、その予防

幅の問題は、画面が壊れるわけではないので見落とされやすい種類の不具合です。次のような事態が起こりうるので、あらかじめ手順に組み込んでおくと安全です。

外側の箱だけ測って「直った」と判断してしまう。 テーマとページビルダーを組み合わせたサイトでは、幅の指定が階層ごとに何重にも入っています。一番外側が画面幅と一致していても、内側で止まっていることがあります。予防策は、手順2の一覧を必ず写真の位置から取ることです。

代表的な1ページだけ確認して、他のページを見落とす。 テンプレートが同じページが複数ある場合、同じ指定が他のページにも効いています。直した後は、同じテンプレートを使うページを一通り開いて写真の表示サイズを測ります。

大きくした写真がぼやける、または重くなる。 表示幅を広げると、それまでの縮小版ファイルでは解像度が足りなくなることがあります。表示幅に対して十分な大きさのファイルが使われているかも確認してください。複数サイズを出し分ける設定の見直しは「レスポンシブ画像がぼやける原因はsizes属性」にまとめています。

スマホで写真が縦に伸びる。 幅だけを広げる指定を足したときに、写真タグの高さ指定が残っていると縦長に崩れることがあります。こちらは「スマホで写真が縦長に伸びて表示されるとき」を参照してください。

指定を上書きしても効かない。 後から書いた指定が、テーマやページビルダー側の詳細な指定に負けることがあります。効かない原因の探し方は「CSSが一部だけ効かないときに見るところ」で解説しています。

公開前の確認チェックリスト

写真の大きさを直したら、次の項目を確認してから公開すると取りこぼしを防げます。

• 写真の表示サイズを測り、ファイル本来のサイズと区別した
• 写真から一番外側まで、各階層の幅を一覧で確認した
• 幅が狭くなる階層がなくなった（コンテンツ幅まで広がっている）
• 同じテンプレートを使う他のページも確認した
• スマホ幅で、はみ出し・横スクロール・縦伸びがない
• 大きく表示してもぼやけない解像度のファイルが使われている
• テーマのファイルを直接書き換えず、外せば戻せる形で直した

まとめ

写真を差し替えても小さく表示されるときは、ファイルではなく、写真が入っている箱の幅を疑います。箱は入れ子になっているので、一番外側ではなく、写真から外側に向かって1階層ずつ幅を並べ、どこで狭くなっているかを見つけるのが近道です。

今回の例では、外側の箱は画面幅と一致していたのに、その内側に「幅830px・左寄せ」の本文カラムが残っていたことで、写真が331×220pxまで縮んでいました。その階層まで遡って直したことで、1000×667pxで表示されるようになりました。

直した後も、外側だけでなく写真の位置から全階層を測り直し、同じテンプレートの他のページとスマホ表示まで確認する。この手順を決めておけば、「差し替えたのに変わらない」「直したはずなのに小さい」という手戻りを防げます。

サイトの表示崩れや、テーマを変えずに見た目を整える改修のご相談は、graciautoまでお気軽にお問い合わせください。