記事に投稿する画像のサイズを変更する

画像のサイズ変更は記事を書いてる欄でも直接小さくできるのですが

これでは大きさがバラバラになってしまう上、縦横の比率も変わってしまって少し美しくありません＾＾；

そこでhtmlタグを記述しなおして画像サイズを変更する方法です。

[記事を書く]→[HTMLタグを開く]

この中のwidth="画像の横幅"の横幅を変更してheight="画像の縦幅"を削除します。

幅の値はプレビューで見ながら調整してください。

横幅500pxにしたい場合は

width="500px"

とします。

img（画像）のwidth（横幅）は500px（サイズ）という指定をしたことになります＾＾

この作業をする前に記事欄で画像を直接サイズ変更した人はstyleというタグが増えているので

の赤字の部分は削除してください。

ところで

アメブロさんではたくさんのスキンが用意されています。

便利ですよね～

私もこの3日ほどでcssをいじってオリジナルのスキンに変えてしまいましたが

実は一年以上もアメブロさんのスキンを使っていました。

そこで

アメブロさんの配布しているスキンを使っている場合

レイアウトが崩れるという問題に直面することがあります。

その原因のひとつに記事に投稿する画像が大きすぎるという場合があります。

画像をサムネイルで投稿すればどれだけ大きくても問題ないのですが

オリジナルサイズで投稿する場合この問題が発生するスキンがあります。

投稿された画像のサイズを記事内でおさまるようにcssで記述されていないスキンの場合です。

解決方法は

・記事を書いている欄で画像の横幅を小さくする

・上記のようにhtmlで投稿する画像の横幅を小さい値に変更する

・最初から記事欄の横幅サイズ以下で画像を作る

なのですが

最初から記事幅のサイズの画像を作る場合

記事投稿欄の横幅を知るには上記のような方法でhtmlで画像の横幅を小さくしていき

”何pxであればレイアウトが崩れないか”で判断するとよいと思います。

cssを見てちゃんと計算をする方法もありますが

これは初心者ではどことどこを足して引けばいいのか難しいと思います。

探し出して計算ができる人はこのブログのcssやhtmlの項目は読む必要がないと思うので

・・・今回は書きません。

（そのうち書くかもしれませんが＾＾；）

アメブロを自分で素敵にデザインしちゃおう