画像の表示サイズを変更するには | ちょっとした「Webお役立ち情報」とかを主に書いてます。

ちょっとした「Webお役立ち情報」とかを主に書いてます。

ネットで調べて、「わかったこと」を備忘録の代わりのメモ帳のようにして使ってます。


テーマ:
こんにちは。

このブログにとっては、めずらしい事なんですが、

半年ほど前に書いた記事に昨日

質問のコメントが入りました。



画像リンクの方法について書いた記事のコメント欄での

ご質問でした。

ハンドルネームがリンクになってなかったので、携帯からのアクセスか、

アメブロにアカウントをもってない方なのかな~と思います。

ちょっと気になったので、ここであらためて、

画像の表示サイズを変更する方法をご紹介してみます。




上↑の画像はアメブロの画像フォルダーからアップしたものです。

タグコードは、こうなってます(↓)。

<div align="center"><a href="http://stat.ameba.jp/user_images/20140218/16/wantan-52/de/54/j/o0599037512850453178.jpg"><img src="http://stat.ameba.jp/user_images/20140218/16/wantan-52/de/54/j/o0599037512850453178.jpg" alt="" border="0" /></a></div>


青字の箇所がクリックした時の移動先のURLです。
(アメブロの場合、デフォルトでは画像をクリックすると暗室部屋みたいなところへ移動します^^;)。

赤字の箇所が画像のURLです。

この画像の本来のサイズは、

横幅:599 ピクセル / 高さ:375 ピクセル

です。

※画像の本来のサイズを調べるには⇒画像の本来のサイズを取得|アメブロカスタマイズが超簡単!?スーパーお助けツールブログ


上の画像を横幅を300 ピクセルにしてみます。



タグコードはこちらです(↓)。

<div align="center"><a href="http://stat.ameba.jp/user_images/20140218/16/wantan-52/de/54/j/o0599037512850453178.jpg"><img src="http://stat.ameba.jp/user_images/20140218/16/wantan-52/de/54/j/o0599037512850453178.jpg" alt="" border="0" /width="300"></a>></div>


つまり、画像を表示するほうの山括弧<img src="~~>の中に

横幅を指定するコードwidth="300"

記入すると、画像を小さく表示させたり、

大きく表示させたりする事が出来ます。


ごちゃごちゃしてるので^^;

もう少し、単純に書きます。

<img src="http://~(画像URL)~" width="横幅のピクセル値" >


結論!←ジャジャジャ・ジャ~~ン♪

画像を表示するタグコードにwidth="横幅のピクセル値"

記入する事で画像の表示サイズを変更できます。


で、注意点として高さを指定するタグ『height="~"』が入ってる場合は、それを削除するか、本来の画像サイズと同じ縦横比にして下さい。

でないと縦横比が狂って、いびつな形になっちゃいます^^;


参考になると、うれしいのですが・・


☆ブヒ ゞ(^_-)v


ワンタンさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

Ameba人気のブログ

Amebaトピックス