アルバムの画像をブログに表示すると・・・

だってワクワクなんだもん♪ 仙台生活

目についたもの、聞こえてきたもの、香ってきたもの、・・・今日もキョロキョロ探検中！　

今回は・・・
アルバムにアップした画像を、
ブログへ表示させる際の注意点です。

前回、画像の縦×横サイズに制限があり、
かつ、ブログでは５００ピクセル、アルバムでは６４０ピクセルと
サイズに違いがあるお話をしたと思います。

そこでピーンと来た方、鋭いです。鋭すぎです(^_^;)

そうなんです。

アルバムで６４０ピクセルの写真を、
タグを使ってブログへ表示させると、
「ブログの表示エリアサイズ」を「写真のサイズ」が超えてしまうので、
写真の右側が切れちゃいます(^_^;)

図で言うと、こんな感じです↓

数字で言うと、
ブログ表示エリアは、６００ピクセル幅。
ですが、左側に余白２０ピクセルがあるので、
実際に使えるのは、６００－２０＝５８０。

つまり、横幅５８０ピクセル以上の画像をタグで取り込むと、
ブログ表示エリアからはみ出した分の画像は表示されません。

それじゃ、イヤだわ、という方は、タグの中に、
表示させたいサイズを指定してみてください。

サイズ指定は、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

▼最初のコメント

カテゴリ: イトウちゃん。の職卓
日時: 2010年04月02日18:12
コメント: (11)
トラックバック: (1)

「だってワクワクなんだもん♪ 仙台生活」のトップへ

トラックバック

この記事のトラックバックURL

２枚以上の画像を表示させるには・・・: 引き続き、裏ワザ紹介の「イトウちゃん。の職卓」をお送りします。２枚以上表示させている私のブログ記事「春気分」を例に話を進めてゆきますね。上の画像で、青丸で囲んでいるところが、通常の画像指定ではないやり方で表示させている画像です。そ...; 投稿元　:　だってワクワクなんだもん♪ 仙台生活 /　2010年09月10日16:55

みんなからのコメント

bjornさま

５８０っていうのは、たぶんです(^_^;)
ちがってたら、ごめんしてください。

私は、ケータイ電話のカメラの設定を、
「CIF（352×288）」という、横長を選んで
いるので、ほぼそのままです～。
後からサイズを変更するのって、
手間がかかっちゃうので^m^

投稿者: イトウちゃん。
日時: 2010年04月05日10:37

クロネコさま

わたしの説明、大丈夫でした？
文章を書いているうちに自分の頭が
グルグルになってしまって(^_^;)

投稿者: イトウちゃん。
日時: 2010年04月05日10:33

真珠のピアスさま

ペイントなどのソフトで縮小するほうが
断然オススメです♪

どうしてかというと、
ブラウザは大きいサイズの画像を一旦取り込んで
から、小さくしようとがんばらなければいけないので、
表示までの時間がかかってしまうのです。

ですので、真珠のピアスさんのやり方のほうが
GOODなのです(^^ゞ

ソフトを使ってサイズを変更する手順も、
今後ご紹介していきたいと思っています♪

投稿者: イトウちゃん。
日時: 2010年04月05日10:32

先生、ご苦労様です！

へ～580まで表示されるんですか。520迄しか表示されない
のかと思っていました。そういえば600以上じゃダメなこと
しか試したことないので今度挑戦してみましょう。

もっとも写真のサイズを揃えるには最大500で止めちゃう
ことが多いんですがね。

投稿者: bjorn
日時: 2010年04月03日08:40

イトウちゃん。先生、こんばんわ＾＾
ナルホド～♪
ブログの写真の大きさ、ずっと疑問でした。
とってーーも分かりやい解説、嬉しいです。
指定すれば良いんですね!!スゴイです、スゴイ♪

本当に有難うございます、感謝です(=^・^=)

投稿者: クロネコ
日時: 2010年04月03日00:00

先生、ありがとうございます。(^o^)丿

とてもわかりやすいご説明、ありがとうございました。ま
た、コピーさせていただきました。(^。^)

私はいつも、ピクチャからドラックして、ペイントで縮小
していました。(^^ゞ

投稿者: 真珠のピアス
日時: 2010年04月02日21:23

あっちゃんさま

ケータイで写真を撮ることが多いので、
無精者の私は、ケータイカメラの設定を
最初から500以下にして撮影していて、
サイズ指定をすることはあまりないのです。

ですので、５８０ピクセルというのは、
試しながらブログを書いていて知った数値です(^^ゞ

投稿者: イトウちゃん。
日時: 2010年04月02日19:40

カコママさま

そんなにほめられたら、木に登るどころか、
宇宙にもいけちゃいそうです(*^^)v

文章がわかりにく分を画像で説明できたら
いいなぁと思ったのですが、書いているうち
に自分の頭がグルグルしてきてしまって(^_^;)

わかりにくいところなど、
ご指摘よろしくお願いします♪

投稿者: イトウちゃん。
日時: 2010年04月02日19:37

お猿さんの写真撮りに行かれたのかとおもいました。かわい
いですね＾＾
説明をよく読まないし、わからないこともいっぱいです。
５８０ピクセルというのも今知りました。

投稿者: あっちゃん
日時: 2010年04月02日18:58

イトウちゃんさん　本当にご丁寧な御説明で、とても感謝し
ています。私は５００ピクセルにしてと言われても、今迄、
どのようにしたら良いか解りませんでした。　何枚も出され
ている方のブログを拝見してどうしたらこのように、出来る
のかしら？と思っておりました。　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　　　
イトウちゃんは、困っている方を助けてくださる私からす
ると女神さまのようです。このブログを拝見して、大げさか
もしれませんが涙が出そうでした。　早速、この説明をプリ
ントさせて頂き、試してみます。頭が悪いので、時間が掛か
るかもしれませんが、また解らないところが出てきましたら
、アドバイスをよろしくお願いします。前回のもそうでした
が、本当にありがとうございました。

投稿者: カコママ
日時: 2010年04月02日18:30

それから、説明で載せた写真は、こちらのフリー素材写真集
からダウンロードしたものです。
「仲良くブランコで遊ぶサル山の小猿」
http://sozai-free.com/sozai/00714.html

上野動物園の小猿ちゃんたち、かわいいですよね～。

投稿者: イトウちゃん。
日時: 2010年04月02日18:28

この日記にコメントする

名前

メールアドレス

URL

コメント:

画像1:

画像2:

スパム投稿防止のため、左記画像の数字を半角で入力してください。

※規約に同意の上コメント送信してください。

※画像ファイルサイズは 10MB 以下にしてください(大きすぎるとうまく表示されない場合があります)。

プロフィール

ニックネーム: イトウちゃん
。
都道府県: 宮城県
性別: 女
自己紹介: うきうきわく
わく大好きな
、Web屋さん
で...

カレンダー

2012 年 05 月

4月 < > 6月

日	月	火	水	木	金	土
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

最近のトラックバック

04月 11日 22:34 / つがる衆が見る仙台: 朗読会と震災、そして谷...

09月 26日 14:13 / 仙台　地雷也: 広瀬川美術蔵

09月 10日 16:56 / だってワクワクなんだもん♪ 仙台生活: アルバムの画像をブログ...

09月 10日 16:55 / だってワクワクなんだもん♪ 仙台生活: ２枚以上の画像を表示さ...

08月 06日 15:13 / だってワクワクなんだもん♪ 仙台生活: 七夕チェーック

07月 23日 17:44 / だってワクワクなんだもん♪ 仙台生活: 今季２度目

07月 14日 14:09 / だってワクワクなんだもん♪ 仙台生活: リベンジ！

07月 14日 14:08 / だってワクワクなんだもん♪ 仙台生活: どれにしよ～かな？

07月 09日 13:56 / だってワクワクなんだもん♪ 仙台生活: こんなところにも婚活ブ...

06月 23日 17:45 / 映画を見ませんか？: むずむずしてきた。ジャ...

参加コミュニティー

RSS

QRコード

ヒット数

本日: 141 HIT
累計: 5290 HIT
※「累計」は過去31日の
アクセス数の合計を
表しています。

アルバムの画像をブログに表示すると・・・

だってワクワクなんだもん♪ 仙台生活