写真の大きさを記事幅に合わせせて表示するには | ちょっとした「Webお役立ち情報」とかを主に書いてます。

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

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

あいかわらず、どうでもいいことを
試してみたくなる

ワンタンですw

おはようございます。

日傘^^;

渡辺麻友


ちょっとした実験なんですが・・

アメブロさんで提供してくれている
ブログデザインの、[標準エディタ]で
元のサイズが大きめの写真を投稿してみました。

最初は、なにもさわらず[この画像を使う]を
押したらば・・

渡辺麻友


[ブログを書く]で、こんな風に表示されました。

渡辺麻友


ちょっと小さいというか、淋しいですよね。

じゃあって、[画像フォルダー]の[オリジナルで表示]
にマークをつけて[この画像を使う]をクリックして、
[ブログを書く]ページの下にほうの[表示を確認する]を
押したら、こうなりました。
写真の右側が切れちゃってます。

渡辺麻友


よく記事の幅より、かなり小さく表示されてる方が
いらっしゃいますが、このせいなんですね。

前置きが長くなりましたが、

HTML(コンピューター言語の文法?)を使って、
ブログの記事幅に合わせて、写真を表示させる
方法
を御案内してみたいと思います。

[画像フォルダー]の[オリジナルで表示]にマークを
付けて、[この画像を使う]を押します。
次に記事を書く欄の下のほうにある[HTMLタグを表示]
をクリックします。
すると、写真が下のような、半角英数文字列に変わります。

渡辺麻友


この文字列(タグコード)の中の後ろの方の(/)←スラッシュの
前に、次のコードを追記します。

width="400"

※<br/>は、改行タグで、今回は無視します。

このように、して下さい。

<a href="http://stat.ameba.jp/user_images/20140803/00/awantan52/7a/3c/j/o0800060013022622572.jpg"><img border="0" alt="" src="http://stat.ameba.jp/user_images/20140803/00/awantan52/7a/3c/j/o0800060013022622572.jpg" width="400"/></a>


そして[表示を確認する]をクリックすると、
このように表示されました。

渡辺麻友


ちょうど記事幅いっぱいに、端が切れずに
表示させる事が出来ました。

width="400"の数字の部分は、御自身のブログの
記事幅や、お好みで調整してみて下さい。

こんな事もちょっと憶えておくと
便利かな~なんて思います。

よかったら参考にしてくださいね。


☆ブィブィゝ(^_^)v


ねこジャンプの修行中なの。