写真配置のテスト

CBR250R<ABS>。「ミレニアムレッド」。ウイングをモチーフとしたスポーティーなストライプを採用。
CBR250R<ABS>。「ミレニアムレッド」。ウイングをモチーフとしたスポーティーなストライプを採用。

写真を横並びに配置する

写真を追加する際、配置を「左」にして流し込むことで、下のように画像を横並びにすることが可能です。ただし、スマホやタブレットで見たときにサイズが横幅一杯になりません。

CBR250R<ABS>。「ミレニアムレッド」。ウイングをモチーフとしたスポーティーなストライプを採用。
CBR250R<ABS>。「ミレニアムレッド」。ウイングをモチーフとしたスポーティーなストライプを採用。
CBR250R<ABS>。「ブラック」。ミドルカウルのCBRロゴを新デザインに変更するとともに、アンダーカウルにHondaロゴを追加。
CBR250R<ABS>。「ブラック」。ミドルカウルのCBRロゴを新デザインに変更するとともに、アンダーカウルにHondaロゴを追加。

また、配置を「左」にして流し込んだあとは、その直後に流し込みを解除する必要があり、少々作業が複雑になります。
※解除しないとレイアウトが崩れるため、テキストモードで <div style=”clear:both;”></div> を記入します。

流し込みを解除しないと…

CBR250R<ABS>。「ミレニアムレッド」。ウイングをモチーフとしたスポーティーなストライプを採用。
CBR250R<ABS>。「ミレニアムレッド」。ウイングをモチーフとしたスポーティーなストライプを採用。
CBR250R<ABS>。「ブラック」。ミドルカウルのCBRロゴを新デザインに変更するとともに、アンダーカウルにHondaロゴを追加。
CBR250R<ABS>。「ブラック」。ミドルカウルのCBRロゴを新デザインに変更するとともに、アンダーカウルにHondaロゴを追加。

流し込みを解除しないと、このように写真の下の文章が右側に流し込まれ、場合によってはレイアウトが崩れてしまいます。

スマホでの表示を優先するなら…

スマホやタブレットでの表示を優先する場合は、横並びにせず、下のように横幅一杯の画像にした方が良いでしょう。作業もシンプルになります。

CBR250R<ABS>。「ミレニアムレッド」。ウイングをモチーフとしたスポーティーなストライプを採用。
CBR250R<ABS>。「ミレニアムレッド」。ウイングをモチーフとしたスポーティーなストライプを採用。
CBR250R<ABS>。「ブラック」。ミドルカウルのCBRロゴを新デザインに変更するとともに、アンダーカウルにHondaロゴを追加。
CBR250R<ABS>。「ブラック」。ミドルカウルのCBRロゴを新デザインに変更するとともに、アンダーカウルにHondaロゴを追加。