【ブログ】画像サイズが合わない？簡単にウィンドウサイズに合わせる方法

こんにちは、さむです。

今回は画像サイズの設定で困っている人のための記事になります。

設定はとても簡単ですので、是非最後まで読んでくださいね！

サイズが設定されていないと、こうなる。

今回、サイドバーに直接画像の貼り付けを行ったところ、こんな感じになってしまいました。

この画像サイズをウィンドウサイズに自動で合わせるように設定していきましょう！

設定の際にすることは2点のみ

設定作業は、

になります。

CSSに一行追加

CSSに追加するコードはこちらになります。

.resizeimage img { width: 100%; }

 

これだけ！

このコードをコピーしてペーストするだけです。

入れる場所は、どちらでもOKです。

ペーストしたら、更新は忘れずに行ってくださいね！

HTMLに追加

次に画像が記載されているHTMLソースまで移動します。

私はサイドバーに画像を挿入していますので、

「外観→ウィジット→サイドバー」まで移動します。

修正前は

<p><img class="aligncenter" src="sumsan.png"></p>

 

p要素には何も記載されていません。

修正後は

<p class="resizeimage"><img class="aligncenter" src="sumsan.png"></p>

 

p要素にCSSに追記したresizeimageを追記します。

するとこのような表示になります。

参考にしたサイト

今回のサイズ変更について参考にしたサイトは「all about デジタル」さんです。

もっと画像を調整したいなど考えている方は是非チェックしてみてください。

まとめ

ブログに載せる画像の設定は意外と難しくありません。

することは、CSSでサイズ設定をして、HTMLでその情報を読み込むということだけ！

是非、参考にして楽しいブログライフを送ってください☆

他のブログ運用情報はこちらをご覧ください↓