2009年07月16日
画像の幅（width）や高さ（height）を指定する方法
ファンブログ カスタマイズ：画像編 投稿日：2009年07月16日 15:45
前回、２枚の画像を横に並べる方法を説明した際に、記事の幅以内であれば何個でも並べることができるけど、それ以上になると改行されちゃうっていうことをお話をしました。
今回は、あと少しで並ぶんだけど少し画像が大きいとか、2枚の画像が少し高さが違うので、見栄えが悪いときなんかに、画像の幅や高さを指定して調整する方法を説明します。
記事の幅の中に収まるように調整するには、まず自分の記事の幅がわからなければできませんので、わからない方は、自分の記事の幅を知ろう！を読んで記事の幅を覚えてくださいね。
画像を現す img 要素には、必須ではないんですが幅（横幅）と高さ（縦）を指定する属性があります。
これが何も指定されていないと、画像はそのままの大きさで表示される仕組みになってます。
この幅（横幅）と高さ（縦）は両方指定することができますが、片方だけ指定すると縦横比が維持された状態で拡大縮小されます。幅と高さの両方を指定しますと縦横比の維持はされなくなりますので、どちらか片方だけ指定するのが一般的です。
属性で大きさを指定して表示させる方法は、元の画像は同じなので大きくすれば画像は荒くなりますし、小さくしたからといってサイズ（容量）が小さくなる訳ではありません。ファンブログの皆さんはプロフィールの画像のサイズと大きさを見てもらえるとわかりやすいと思いますので、その画像で説明します。
まず、サイドバーにあるプロフィールの画像をクリックしてみてください。すると https://fanblogs.jp/XXX/file/profile という別の窓が開き、画像が表示されます。この画像の大きさがファンブログに登録した画像なんです。この画像を右クリックしてプロパティを選択し、サイズ（バイト）と大きさ（ピクセル）を調べてください。
画面を閉じて、今度はプロフィールの画像のサイズ（バイト）と大きさ（ピクセル）を調べて見てください。
見た目のとおり大きさは違いますが、サイズ（バイト）は同じで、アドレス：（URL）も一緒です。ここまでのことがなんとなくわかっていれば大丈夫なので、この2つの画像のタグがどのように違うのかを説明します。
最初に見た画像は何も大きさが指定されていないタグ <img src="★画像のURL★" alt="" border="0" /> です。
プロフィールの画像はこの画像に幅（横幅）を 100px にするという属性の width="100" という命令が入っていますので、同じ画像なのに違う大きさで表示されるんです。ちなみに高さ（縦）の指定には、height="XX" という属性で指定しますので、高さが 50px になる画像も隣に配置してみます。
幅（横幅）の指定 <img src="★画像のURL★" alt="" border="0" width="100px" /> 調整は100pxの100を変更
高さ （縦）の指定 <img src="★画像のURL★" alt="" border="0" height="50px" /> 調整は 50pxの 50を変更
元の画像（300 × 300 px） 幅を 100px に指定 高さを 50px に指定
2009年07月18日 ： 追記
※ メールの画面のようなテキストや罫線で構成された画像は縮小しますと文字や線が、かすれてうまく表示されません。そのような場合は、元画像を画像ソフトで適正な大きさに変更して挿入し直してください。
いかがでしたでしょうか？今回、この記事を書くのに画像の挿入はしていません。表示された3つの画像は既に登録されている画像から引っぱって表示させているからです。HPやブログは登録した1枚の画像を何回でも、大きさも自由に表示させることができるってことも覚えておいてくださいね。
これを俗語として「画像を引っぱる」といったりしますです。(´・ω・`)b
画像を多用する方にはとても便利な機能なんで、ぜひ試してみてください。物販系アフィリの画像にも応用できますが、画像の大きさの変更を禁止しているECサイトさんもありますので、必ず確認してから行ってくださいね。
またちょっとした画像についてのお話がありましたら記事をアップします。気長にお待ちください。(´・ω・`)
※上記Htmlタグはコピー＆ペーストでそのままご利用になれます。
※Htmlタグのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。
この情報が、お役にたちましたら
≫ FC2 Blog Ranking ≪ 押していただけると励みになります
・自分の記事の幅を知ろう！
・２枚の画像を横に並べる方法
画像を現す img 要素には、必須ではないんですが幅（横幅）と高さ（縦）を指定する属性があります。
これが何も指定されていないと、画像はそのままの大きさで表示される仕組みになってます。
この幅（横幅）と高さ（縦）は両方指定することができますが、片方だけ指定すると縦横比が維持された状態で拡大縮小されます。幅と高さの両方を指定しますと縦横比の維持はされなくなりますので、どちらか片方だけ指定するのが一般的です。
属性で大きさを指定して表示させる方法は、元の画像は同じなので大きくすれば画像は荒くなりますし、小さくしたからといってサイズ（容量）が小さくなる訳ではありません。ファンブログの皆さんはプロフィールの画像のサイズと大きさを見てもらえるとわかりやすいと思いますので、その画像で説明します。
まず、サイドバーにあるプロフィールの画像をクリックしてみてください。すると https://fanblogs.jp/XXX/file/profile という別の窓が開き、画像が表示されます。この画像の大きさがファンブログに登録した画像なんです。この画像を右クリックしてプロパティを選択し、サイズ（バイト）と大きさ（ピクセル）を調べてください。
画面を閉じて、今度はプロフィールの画像のサイズ（バイト）と大きさ（ピクセル）を調べて見てください。
見た目のとおり大きさは違いますが、サイズ（バイト）は同じで、アドレス：（URL）も一緒です。ここまでのことがなんとなくわかっていれば大丈夫なので、この2つの画像のタグがどのように違うのかを説明します。
最初に見た画像は何も大きさが指定されていないタグ <img src="★画像のURL★" alt="" border="0" /> です。
プロフィールの画像はこの画像に幅（横幅）を 100px にするという属性の width="100" という命令が入っていますので、同じ画像なのに違う大きさで表示されるんです。ちなみに高さ（縦）の指定には、height="XX" という属性で指定しますので、高さが 50px になる画像も隣に配置してみます。
幅（横幅）の指定 <img src="★画像のURL★" alt="" border="0" width="100px" /> 調整は100pxの100を変更
高さ （縦）の指定 <img src="★画像のURL★" alt="" border="0" height="50px" /> 調整は 50pxの 50を変更
元の画像（300 × 300 px） 幅を 100px に指定 高さを 50px に指定
縦横比の維持 ： 片方だけの指定で縦横比が維持されますから、幅と高さの両方の指定はしない。
2009年07月18日 ： 追記
※ メールの画面のようなテキストや罫線で構成された画像は縮小しますと文字や線が、かすれてうまく表示されません。そのような場合は、元画像を画像ソフトで適正な大きさに変更して挿入し直してください。
いかがでしたでしょうか？今回、この記事を書くのに画像の挿入はしていません。表示された3つの画像は既に登録されている画像から引っぱって表示させているからです。HPやブログは登録した1枚の画像を何回でも、大きさも自由に表示させることができるってことも覚えておいてくださいね。
これを俗語として「画像を引っぱる」といったりしますです。(´・ω・`)b
画像を多用する方にはとても便利な機能なんで、ぜひ試してみてください。物販系アフィリの画像にも応用できますが、画像の大きさの変更を禁止しているECサイトさんもありますので、必ず確認してから行ってくださいね。
またちょっとした画像についてのお話がありましたら記事をアップします。気長にお待ちください。(´・ω・`)
※上記Htmlタグはコピー＆ペーストでそのままご利用になれます。
※Htmlタグのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。
【カスタマイズ：画像編の最新記事】
アフィリエイトの始め方 (3)
この記事へのコメント