2017年12月17日日曜日

[ブログ]モバイル、PC両対応のため、画像の幅をHTMLタグで指定[挙動まとめ]

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

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

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

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


編集すべきはHTMLタグ

ブログ、ホームページの正体はHTMLファイル。タグがずらずら並ぶただのテキストファイル。
HTMLタグとは、
<br>
<h1>見出し</h1>
<b>太文字</b> 
など<>で囲まれたタグのこと。

各ブログサービスは、↓のように編集画面を切替えられるようになっています。(Seesaaのように、両対応していて画面を切替不要なものもあります。)
アメブロの編集画面切替え
Bloggerの編集画面切替え

このようにしてHTMLタグを編集できるようにし、タグの書き換えで画像の表示のさせ方を制御してやります。


画像の表示は<img>タグ

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

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

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

各ブログサービスの<img>タグ
アメブロ

<img alt="" height="100" src="画像のURL" width="20%">
Seesaa

<img alt="画像のファイル名" src="画像のURL" width="20%" height="100" border="0">
Blogger

<img border="0" data-original-height="117" data-original-width="100" height="100" src="画像のURL" width="20%" />

上の三種しか例を挙げていませんが、どのサービスも基本同じです。よく見つめてみて下さい。


こうするとこうなる

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



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


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

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

なし、または、width="auto"
自動を指定します。画面が元画像より広い場合は元画像表示、狭い場合は画面幅の100%で縮小表示。一番両対応に適しています。

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

ですが、使い分けるために頭に入れておくとよさそうです。



使い分けると幅が広がります。例えば↓。

とにかく馬鹿でかく表示したい場合は、width="100%"を指定します。

でも、こんな馬鹿なことするの俺くらいかw


【関連記事】
[インストール不要]画像の背景を透過、加工できる色々サイトまとめ
メールフォームってHTMLで簡単に作れるんだ
[Seesaa]ソーシャルボタンの並びがガタガタ






シェアされると喜びます。

0 件のコメント:

コメントを投稿