【WordPress】画像の幅をスマホやPCのウィンドウ幅に自動調整させる方法

スマホで記事を読んでいるときに、
画像の幅が大きすぎてときどき画面からはみ出しているのを目にすることがあります。

じつはこの画像を、
閲覧しているプラウザに合わせて自動調整させることが可能です。

画像の幅をスマホやPCのウィンドウ幅に自動調整させるCSSタグ

では具体的な作業手順です。
下記の枠内のタグをコピーします。

img {
max-width: 100%;
height:auto;
}

WordPressの「外観」→「テーマの編集」から
目的のCSSを探します。

スタイルシートの一番下のスペースに
先ほどのタグを貼り付けて保存します。

以上で設定完了です！

スマホでチェックすると、このように表示されます。

スマホの幅に画像が丁度良くおさまっています。

地図やYoutube動画もスマホやPCに合わせて自動調整できるタグ

さて、記事に画像幅を自動調整して表示することはできましたが、地図やYoutube動画を掲載する際は、また別のCSSタグの設定が必要になります。

下記の枠内のタグをコピーします。

iframe { width : 100% ; }

 

先ほどと同様にスタイルシートの一番下のスペースにタグを貼り付けて保存します。

以上で設定完了です！

スマホでチェックすると、このように表示されます。

地図の場合

Youtubeの場合

これらの設定を行っておくだけで、スマホで閲覧したサイトやブログの見栄えは随分と良くなります。ほとんどコピペ作業なので設定も簡単ですので、興味があれば挑戦してみてください。

スポンサードリンク