画像幅を指定するHTMLタグ挙動まとめ|無料ブログのモバイルPC両対応

訪問者の画面幅によって画像の表示が崩れてしまうので、編集すべきHTMLタグとその特徴をまとめました。

ポク太郎です。

記事内に画像を使用するとブログが華やかに。が、訪問者はPC、タブレット、スマホと多様な解像度(画面の広さ)でアクセスしてきます。

そんなとき困るのが、画像の表示幅。どんなデバイスで見ても綺麗に整然と並ぶページにしたいものです。

そんな訳で、タグをどう書くとどうなる?をまとめました。


1. 編集すべきはHTMLタグ

ブログ、ホームページの正体はHTMLファイル。HTMLタグがずらずら並ぶただのテキストファイル。

HTMLタグとは、

<br>
<h1>見出し</h1>
<b>太文字</b>
など<>で囲まれたタグのこと。

各ブログサービスは下のように編集画面を切替えられるようになっています。

Seesaaのように両対応していて切替不要なのもあります。

画像幅を指定するHTMLタグ挙動まとめ|無料ブログのモバイルPC両対応

アメブロの編集画面切替え

画像幅を指定するHTMLタグ挙動まとめ|無料ブログのモバイルPC両対応

Bloggerの編集画面切替え

上記でHTMLタグを編集し画像の表示のさせ方を制御してやります。

2. 画像の表示は<img>タグ

URLを内包してたりと、ごちゃごちゃ長いので見難いですが、落ち着いて眺めます。

画像を表示させる部分は<img>。このタグ中にパラメータがいくつか設定されています。

注目すべきは、height=””width=””

各ブログサービスの<img>タグ
アメブロ
<img alt=”” height=”100″ src=”画像のURLwidth=”20%”>
Seesaa
<img alt=”画像のファイル名” src=”画像のURLwidth=”20%” height=”100″ border=”0″>
Blogger
<img border=”0″ data-original-height=”117″ data-original-width=”100″ height=”100″ src=”画像のURLwidth=”20%” />

上の三種しか例を挙げていませんが、どのサービスも基本同じです。タグを凝視してみて下さい。

3. HTMLタグをこうするとこうなる

height=””width=””の値をそれぞれ書き換えてやると、こうなります。

3-1. height=”10px”、width=”500px”

縦横比が狂い横に間延びした絵になります。
本WordPressサイトでは実現できませんでした。

元画像の縦横比を変えない場合(上記が目的ではない場合)は、まずheight=””を削除し、横幅だけで制御します。width=””をそれぞれのパターンで書き換えたものを以下に。

3-2. width=”200″、または、width=”200px”

ポックさん-できるかな

横幅をドット数で指定します。固定なので画像幅より画面幅が狭い場合(スマホなど)、画面からはみ出します。

3-3. width=”5%”

ポックさん-できるかな

横幅を記事枠の%で指定します。画面からはみ出しませんが、横幅の狭いスマホと広いPCで大きさがかけ離れ、両対応の調整に苦労します。

3-4. なし、または、width=”auto”

ポックさん-できるかな

自動を指定します。画面が元画像より広い場合は元画像表示、狭い場合は画面幅内に収まるように縮小表示。一番両対応に適しています。

なので、一番楽なのはheight=””width=””の両方を削除してしまうこと。

が、使い分けるために頭に入れておくとよさそうです。使い分けると幅が広がります。とにかく馬鹿デカく表示したい場合は、width=”100%”を指定。

コメント

タイトルとURLをコピーしました