自分でホームページが更新できる!? [画像の表示例-標準的な配置]

写真の標準的な配置

あなたもホームページの更新ができる!かもしれない・・・、画像の標準的な配置編です。

自分でホームページが更新できる!?[画像の表示例-サイズの種類]

上記の記事で書かせていただいたように1枚の画像をアップロードするだけで、「サムネイル<中<大<フルサイズ」の画像を表示させることができます。この画像のサイズと標準的な配置の左寄せと右寄せを利用することによって、写真の横にテキストを流し込むことができます。写真の中央寄せの場合はテキストは回り込みしません。

写真+テキストのサンプル

写真の大きさはサムネイルサイズを使用してサンプル表示しています。写真をクリックすると大きく表示されるように設定することもできます。

写真左寄せ+テキスト(テキスト量が少ない場合)

写真の標準的は配置 サンプル用画像これは写真を左寄せして、テキストを回り込ませるサンプルを表示させるためのダミーテキストです。写真の大きさはサムネイルサイズを使っています。テキストの量が多いとテキストが写真に回り込みます。

写真右寄せ+テキスト(テキスト量が多い場合)

写真の標準的は配置 サンプル用画像これは写真を右寄せして、テキストを回り込ませるサンプルを表示させるためのダミーテキストです。写真の大きさはサムネイルサイズを使っています。テキストの量が多いとテキストが写真に回り込みます。これは写真を右寄せして、テキストを回り込ませるサンプルを表示させるためのダミーテキストです。写真の大きさはサムネイルサイズを使っています。テキストの量が多いとテキストが写真に回り込みます。これは写真を右寄せして、テキストを回り込ませるサンプルを表示させるためのダミーテキストです。写真の大きさはサムネイルサイズを使っています。テキストの量が多いとテキストが写真に回り込みます。

写真の中央寄せ+テキストのサンプル

これは写真を中央寄せした場合のサンプルを表示させるためのダミーテキストです。写真の標準的は配置 サンプル用画像テキストは回り込まず、写真が中央に配置されます。写真の大きさは中サイズを使っています。

写真+写真のサンプル

写真の大きさはサムネイルサイズを使っています。中サイズ写真が2枚横に並ぶとコンテンツの幅を超えてしまい、写真を左寄せに設定しても横に並びません。ギャラリーという機能を利用するとコンテンツの幅で2枚並べて表示させることができますが、これは別の記事で書かせていただこうと思います。

写真+写真 左寄せサンプル

写真の標準的は配置 サンプル用画像写真の標準的は配置 サンプル用画像

写真+写真 右寄せサンプル

写真の標準的は配置 サンプル用画像写真の標準的は配置 サンプル用画像

写真+写真 中央寄せサンプル

写真の標準的は配置 サンプル用画像写真の標準的は配置 サンプル用画像


※上記は画像配置の一例です。デザインによってサイズの設定やマージンは変わることがあります。


※2015/5/1以降に当社でホームページを作成した場合に上述のような設定をしています。それ以前の制作分については設定されていない場合もあります。ご了承ください。

お問い合わせフォーム