アルバムの画像をブログに表示すると・・・
今回は・・・
アルバムにアップした画像を、
ブログへ表示させる際の注意点です。
前回、画像の縦×横サイズに制限があり、
かつ、ブログでは５００ピクセル、アルバムでは６４０ピクセルと
サイズに違いがあるお話をしたと思います。
そこでピーンと来た方、鋭いです。鋭すぎです(^_^;)
そうなんです。
アルバムで６４０ピクセルの写真を、
タグを使ってブログへ表示させると、
「ブログの表示エリアサイズ」を「写真のサイズ」が超えてしまうので、
写真の右側が切れちゃいます(^_^;)
図で言うと、こんな感じです↓
数字で言うと、
ブログ表示エリアは、６００ピクセル幅。
ですが、左側に余白２０ピクセルがあるので、
実際に使えるのは、６００−２０＝５８０。
つまり、横幅５８０ピクセル以上の画像をタグで取り込むと、
ブログ表示エリアからはみ出した分の画像は表示されません。
それじゃ、イヤだわ、という方は、タグの中に、
表示させたいサイズを指定してみてください。
サイズ指定は、imgタグの中に書き入れます。
例えば、横幅５００ピクセルで表示させたい場合は、
＜img src="○○○" width="500"＞
※＜＞も数字も、タグは全て半角英数字のみで入力してください。
※img の後ろには、半角スペースを。
※○○○には、表示させたい画像のURLを。
※width の前にも、半角スペースを。
横幅500を指定してみると、このように表示されます。
width="500"の数値のところを、300にすれば横幅300で表示されます。
サイズを指定するときは、
横幅だけを指定すると、
元の画像サイズの縦横比がくずれないよう、
縦サイズが自動的に計算されます。
ということは・・・
縦横比を気にしない場合は、
縦横サイズを指定すると、指定どおりに表示されます。
縦サイズを指定するときは、height をつかいます。
例えば、
横幅３００ピクセル、縦５０ピクセエルで表示させたい場合は、
＜img src="○○○" width="300" height="100"＞
※height の前にも、半角スペースをいれてください。
すると、このように表示されます。
う〜ん。説明がだんだん分かりにくくなってきましたね。
わたしの頭もオーバーヒートぎみですので、
今日は、このへんで(^_^;)
ご質問、ツッコミは、コメント欄かふらっとメールで
お願いしますm(__)m
そうそう、一番大事な注意点をお伝えし忘れてました(^_^;)
「イトウちゃん。の職卓」カテゴリで紹介している裏ワザは、
わたしの経験則であって、
ふらっと運営の担当の方に確認をとったものではありません。
違っていたらごめんなさいm(__)m
アルバムにアップした画像を、
ブログへ表示させる際の注意点です。
前回、画像の縦×横サイズに制限があり、
かつ、ブログでは５００ピクセル、アルバムでは６４０ピクセルと
サイズに違いがあるお話をしたと思います。
そこでピーンと来た方、鋭いです。鋭すぎです(^_^;)
そうなんです。
アルバムで６４０ピクセルの写真を、
タグを使ってブログへ表示させると、
「ブログの表示エリアサイズ」を「写真のサイズ」が超えてしまうので、
写真の右側が切れちゃいます(^_^;)
図で言うと、こんな感じです↓
数字で言うと、
ブログ表示エリアは、６００ピクセル幅。
ですが、左側に余白２０ピクセルがあるので、
実際に使えるのは、６００−２０＝５８０。
つまり、横幅５８０ピクセル以上の画像をタグで取り込むと、
ブログ表示エリアからはみ出した分の画像は表示されません。
それじゃ、イヤだわ、という方は、タグの中に、
表示させたいサイズを指定してみてください。
サイズ指定は、imgタグの中に書き入れます。
例えば、横幅５００ピクセルで表示させたい場合は、
＜img src="○○○" width="500"＞
※＜＞も数字も、タグは全て半角英数字のみで入力してください。
※img の後ろには、半角スペースを。
※○○○には、表示させたい画像のURLを。
※width の前にも、半角スペースを。
横幅500を指定してみると、このように表示されます。
width="500"の数値のところを、300にすれば横幅300で表示されます。
サイズを指定するときは、
横幅だけを指定すると、
元の画像サイズの縦横比がくずれないよう、
縦サイズが自動的に計算されます。
ということは・・・
縦横比を気にしない場合は、
縦横サイズを指定すると、指定どおりに表示されます。
縦サイズを指定するときは、height をつかいます。
例えば、
横幅３００ピクセル、縦５０ピクセエルで表示させたい場合は、
＜img src="○○○" width="300" height="100"＞
※height の前にも、半角スペースをいれてください。
すると、このように表示されます。
う〜ん。説明がだんだん分かりにくくなってきましたね。
わたしの頭もオーバーヒートぎみですので、
今日は、このへんで(^_^;)
ご質問、ツッコミは、コメント欄かふらっとメールで
お願いしますm(__)m
そうそう、一番大事な注意点をお伝えし忘れてました(^_^;)
「イトウちゃん。の職卓」カテゴリで紹介している裏ワザは、
わたしの経験則であって、
ふらっと運営の担当の方に確認をとったものではありません。
違っていたらごめんなさいm(__)m
