画像について

■ ポイント

・サイズ(高さ/幅)や縦横比の統一

画像を表示させる際に、意図や掲載箇所に合わせてサイズや縦横比を規定して掲載することで、サイト全体が整います。
また、予め方針として定めた数パターンの大きさのみで統一すると、テキストも含めたレイアウトが崩れてしまうリスクも軽減することができます。
厳密に同じサイズの画像を使用しない場合でも、縦に並べて配置する場合は横幅を、横に並べて配置する場合は縦幅を、それぞれ同じサイズにすることで、画像の表示位置が揃った見やすいページにすることができます。


・表示形式ごとの注意点

【縦/横に並べる】
できるだけ同じサイズ/縦横比の画像を設定して並べることで、見やすいページ作りをすることができます。

【ギャラリー表示】
自動でサイズの調整は行われますが、予め同じ大きさに編集した画像を用いることで、よりきれいに見せることが可能です。

【縦/横に並べる+拡大表示】
拡大後の大きさはアップロード時のサイズになるので、拡大表示に用いる画像は大きくなり過ぎない方が望ましいです。

→ 参考:画像の見せ方サンプル
 

■ 関連ツール:ホームページメーカーの編集ツール以外

■ 画像タグ

文章の途中での画像の表示など、既存設定以外の見せ方を行いたい場合には【画像タグ】を使用します。(※紹介文の表示を「ソース」モードに切り替えてご入力ください。)


・基本のタグ
< img src="画像URL" >
→アップした画像のURLを確認するには


[表示例]


※アップロードした画像のサイズで表示されます



・画像の幅/高さを設定
< img src="画像URL" width="" height="高さ">
上記タグの「幅」「高さ」の部分にピクセル表記(○○px)かパーセント表記(○○%)で数値を入力して下さい。


[表示例:幅220px/高さ60pxで設定]


※設定した幅/高さに画像が変形されます。(強制的に変形させるため、画像がつぶれます。)
※元画像よりも大きいサイズを設定すると、引き伸ばされるため表示が粗くなります。


[表示例:幅120pxのみ設定]


※幅のみ、もしくは高さのみを設定すると、元の縦横比に合わせて自動で未設定の辺の大きさが調整されます。