画像の位置揃えテストへようこそ！えっ？見たことがある気がする？そう、この投稿はクラシック・エディタ用の「マークアップ：画像位置揃え」を複製したものです。様々画像の位置揃えをデモンストレーションするには大量の文字列の中に埋め込むように表示するのがベストです。文字列を右から左方向へ表示する RTL モードも忘れずに試してください。LTR、RTL に関係なく、左に位置を設定した画像は左に位置し、右に位置を設定した画像は右に位置するようキープされるはずです。
ユーザーは次の位置揃えを設定できます：なし、左、右、中央。テーマが「align-wide」のテーマ機能をサポートしているのであれば、幅広と全幅の位置揃えも設定可能です。このページを RTL モードでも確認することを忘れずに。
ユーザーは画像の寸法も設定することができます。25%、50%、75%、100% に加え、任意の幅と高さが設定可能です。
上の画像は中央揃えに設定されています。
このパラグラフは縦横それぞれ150ピクセルの画像を左揃えに設定した場合に、テキストがその画像をどう回り込むのかをお見せするためのものです。
画像の上、下、右側には文字との間にスペースがあり、文字と画像が重なっていることはないはずです。画像の周りにはホワイトスペースを作ることを意識すれば、より目立たせることができるはずです。テキストに邪魔をされては目立たせることができません。回り込んでいるテキストも右端から画像への下へとスムーズに回り込めていることも確認してください。設定した通りに表示がされていれば問題ありません。確認ができているということです。
次は、非常に大きなサイズの画像を確認してみましょう。位置揃えは「なし」に設定してあります。
上の画像は横幅が 1200px もありますが、コンテンツエリアをはみ出してはなりません。画像はコンテンツエリアの領域をはみ出ずし、コンテンツのフローを破壊するような邪魔するべきではありません。
次に確認するのは画像の右寄せです。左寄せと同様に、画像の上、下、そして左側には適切なスペースがあるはずです。右寄せに設定された画像は、スタイルされた左マージンの設定に関係なく、エリアの右に完璧なまでに寄せられていなければなりません。
そしてまたテキストも一定のスペースを空けつつ右寄せに設定した画像の下にテキストを回り込ませて表示されているはずです。適切なホワイトスペースを保ちつつ、テキストが美しく回り込まれていますか？
さて、これで全て終わりだと思いましたか？いえいえ、終わりではありません。ここまで確認してきた全ての画像の位置揃えを、もう一度、今度はキャプション付きで確認します！
上の画像は中央揃えに設定されています。キャプションにはリンク付きテキストもふくまれています。なぜ？この方がファンキーでしょ。
このパラグラフは縦横それぞれ150ピクセルの画像を左揃えに設定した場合に、テキストがその画像をどう回り込むのかをお見せするためのものです。
画像の上、下、右側には文字との間にスペースがあり、文字と画像が重なっていることはないはずです。画像の周りにはホワイトスペースを作ることを意識すれば、より目立たせることができるはずです。テキストに邪魔をされては目立たせることができません。回り込んでいるテキストも右端から画像への下へとスムーズに回り込めていることも確認してください。設定した通りに表示がされていれば問題ありません。確認ができているということです。
次は、非常に大きなサイズの画像を確認してみましょう。位置揃えは「なし」に設定してあります。
上の画像は横幅が 1200px もありますが、コンテンツエリアをはみ出してはなりません。画像はコンテンツエリアの領域をはみ出ずし、コンテンツのフローを破壊するような邪魔するべきではありません。
次に確認するのは画像の右寄せです。左寄せと同様に、画像の上、下、そして左側には適切なスペースがあるはずです。右寄せに設定された画像は、スタイルされた左マージンの設定に関係なく、エリアの右に完璧なまでに寄せられていなければなりません。
そしてまたテキストも一定のスペースを空けつつ右寄せに設定した画像の下にテキストを回り込ませて表示されているはずです。適切なホワイトスペースを保ちつつ、テキストが美しく回り込まれていますか？
さて、次に、横幅が非常にワイドな画像にどのようなユースケースがあるか感が寝てみましょう。下記画像は位置揃えを幅広に設定してあります。画像は幅広（wide width）に位置がそろっているはずです。
もっと大きな画像も表示されますか？下記画像は全幅幅の位置揃えが設定されているます：
確認は以上です！位置揃えの試練を耐え抜きました。合格です。ですが、最後の最後に1つだけ確認する必要があることがあります。この投稿の最後のコンテンツは浮動要素として右寄せに設定されたサムネイル画像です。画像に続くコンテンツがある場合、下に移動（clear）して表示されているかを確認してください。
コメントを残す