WordPressの投稿で、キャプション付きの画像挿入の問題点

Tips

WordPressで投稿するときに画像挿入する場合はメディアの追加を使います。
その際、画像の大きさや表示位置(左揃え、中央揃え、右揃え)の設定ができるようになっています。さらにキャプションの設定もできます。
注意点として、画像の表示位置はこの指定を行っても変わりません。この設定は単にクラス名を付加しているだけで、別途CSSでの表示設定が必要になります。

スポンサーリンク

画像の表示位置指定

左揃えは「alignleft」右揃えは「alignright」中央揃えに指定した場合は「aligncenter」のクラス名がつきます。
それぞれのクラス名に対してCSSで位置を指定します。

中央揃えのCSS例

.aligncenter{
  display:block;
  margin:auto;
}

記事の左に画像を配置する例

.alignleft{
  float:left;
}

記事の右に画像を配置する例

.alignright{
  float:right;
}

画像を記事の左右に配置する場合は別途clearの設定か、親要素にoverflow:hiddenの設定が必要です。
この辺の設定はWebデザイナーでないと難しいかもしれませんが、このサイトはWebデザイナー中級を目指す方をターゲットにしていますので多分問題ないと思います。。

キャプションを付けたときの問題点

画像を挿入するときにキャプションの設定もできますが問題があります。
ここの例ではimgに対してmax-width:100%を指定した場合の例をあげます。この例は実際のWordPressではありませんが、同様のことをわかりやすく単純化したものです。

imgに対してmax-width:100%を指定したサンプル
HTMLのコード

<div id="wrap">
    <img src="img.jpg" >
</div>

CSSのコード

#wrap{
  max-width:480px;
  margin:auto;
  background:yellow;
  height:600px;
}
img{
  max-width: 100%;
}

親要素のwidthに依存して画像が縮小したり、親要素のwidthまで大きくなったりします。

ここで、キャプションを付けると勝手にdivで画像を囲むコードが書かれます。しかもdivにはstyle属性がついてwidthの設定がされます。widthの値は画像の本来の大きさで指定されます。
imgにとって新たな親要素のdivに固定の幅が指定されましたので、imgに設定されたmax-width: 100%はdivに設定された固定幅に依存します。つまりimgのwidthはdivのwidthと同一になり固定されます。
レイアウトが崩れた例
HTMLのコード

<div id="wrap">
  <div class="section" style="width:780px">
    <img src="img.jpg" >
    <p>flower</p>
  </div>
</div>

CSSのコード

#wrap{
  max-width:480px;
  margin:auto;
  background:yellow;
  height:600px;
}
img{
  max-width: 100%;
}

キャプションを入れるとレイアウトが崩れる可能性があるということがわかります。

レイアウト崩れの対策

対処方法は新しくできたdivに対してmax-width:100%に指定することで解決できます。
divにはすでにインラインスタイルでwidth指定されており、優先度から考えてもこれを打ち消すのは難しいと思えますが、max-widthはwidth指定よりも優先されるから以下のような対策を行えます。
HTMLのコード

<div id="wrap">
  <div class="section" style="width:780px">
    <img src="img.jpg" >
    <p>flower</p>
  </div>
</div>

CSSのコード

#wrap{
  max-width:480px;
  margin:auto;
  background:yellow;
  height:600px;
}
img{
  max-width: 100%;
}
.section{
  max-width:100%;
  text-align: center;
}

これらの内容は教科書の「Wordpressレッスンブック」に出てくる内容ですが、キャプション(p124)のところの説明が現象の説明だけで終わっていてよくわかりませんので付け加えました。

タイトルとURLをコピーしました