戯れ言葉

FC2ブログの画像サイズのことを色々書いてみる

カテゴリ:FC2ブログの色々とカスタマイズとか
タグ:

FC2ブログでの記事の画像の大きさのことについて幾つか。

画像の大きさを記事内で指定する時

<img src="https:// ・・・・.jpg" alt="" style="width: 900px; height: auto;">

なんて記述します。heightautoにしておくと、元の画像の縦横比を自動的に保ってくれるので便利。

style指定なしで記述したりとかもありますが。

ところが、ここでテンプレート側で適切な処理がされていないと

こんな具合にテンプレート作者が確保されている記事の横幅から画像がはみ出してしまいます。

青矢印の位置がテンプレートで確保されている記事の横幅で、文章はその横幅で収まっていますが、記事エリアより大きな pxで指定された赤矢印の画像は記事エリアからはみ出しています。

こんなことにならない様に、画像には max-width: 100% を指定して指定された横幅に納めるのですが、それを度々個々の画像に指定することなど面倒くさくて、しかもHTMLを使いこなせない殆どの人たちはそんなことは知らない。

これはテンプレートのCSSで書いてしまえば個々の画像で書く必要が無いので、テンプレート作者がそんなふうにならない様に 作って ま す?。

例に挙げたのは、そんなことを考慮していないテンプレもあるというお話です。そんな例は少ないはずですが。FC2側はそんなことは判断してないので、FC2ブログの共有テンプレートにはそんな困ったちゃんのテンプレートが混在しているようです。

テンプレートを選択する時は、こんなふうにプレビュー画面とか、自ブログやWEBサイトの表示を狭めてみれば、そのWEBサイトのデザインは今時のWEB事情にどんな対応になってるのかが簡易に確認できます。

そこでちゃんと記事や画像が切れずに収まっているかを確認して下さい。

上記画像はFC2謹製の公式テンプレートですが、レスポンシブと謳いながら、実は画面が切れてしまってレスポンシブになっていない症状

この様に記事や画像が自動縮小されず、どんどん隠れていくのであれば、特定の端末でしか全表示されない昔のデザインという評価になるということです。

ブログを含むWEBサイトは、標準的なPCだけでなく、スマホやタブレット等の多様な画面サイズで見られています。

また、PCでも全画面ではなくて、私が普段やってる様に分割=縮小画面で複数のアプリを開くという使い方をされてる方も多いのでは。

今後、ますます固定の横幅で正常表示というサイトは無くなっていくと思われます。

そんな設定がきちんとされてるテンプレートでは、画像の横幅をpxで指定するか%で表現が微妙に変わってきます。

%で画像の横幅を指定すれば、例えば width: 50% で画像の横幅を指定すれば、PCのどんな画面サイズでも、スマホでも画面の横幅の50%で画像が表示されます。

画像の横幅を例えば 500px とピクセルで指定すると、記事欄の横幅が500px 以上の場合は画像は500px で表示されそれ以上の大きさにはなりません。記事欄の横幅が 500px 以下の場合は記事欄の横幅一杯に表示されます。

写真の画像を掲載する時に、 縦位置たていち の画像は旨く処理しないと閲覧者のディスプレーからはみ出てしまいます。

通常のディスプレーは高さが1080px、更に画面の上下にブラウザのメニュー領域やタスクバーがあるので適切に設定してほしいものです。

あなたのブログ上の画像、欠けてて全部が見えませんが。

Comments 2

There are no comments yet.

Nerv  

訪問有難うございました。

ブログ始めたばかりの初心者オヤジなんで、足跡から訪問させていただきました。

まだまだ使いこなせない部分ばかりなので、知識として覚えておけば、このような記事はとても役に立ちそうです。

2019/08/27 (Tue) 12:31 | 再編集 | 返信を書く |   
hige

hige  

To Nervさん

 コメントありがとうございます。
 お役に立ちましたでしょうか。

 ブラウザで自分のブログを縮小(分割)表示させて、ブラウザの横幅を狭めていきます。
 その時に記事中にある画像がどうなっていくかを観察すればよく解ります。
 一度、お試しあれ。

 画像が自動的に縮小されずに、記事欄からはみ出たり画像が隠れてきたりすれば、テンプレの変更をお勧めします。
 また、昨今はスマホの閲覧者も増えています。その事を考慮に入れたテンプレも増えてきています。

Heart on my sleeve/Janedoe1471
https://janedoe1471.blog.fc2.com/
さんとか

The other way round /Akira
https://vanillaice000.blog.fc2.com/
さんとかの記事のレスポンシブ対応のテンプレの記事が役に立つと思います。
 

2019/08/27 (Tue) 15:26 | 再編集 | 返信を書く |   

Leave a reply
コメントをどうぞ

ブログやホームページのURLをどうぞ

パスワードを入力すると投稿後、訂正・削除が出来ます