まりふのひと

はてなブログ/画像をきれいに見せる|見るには IE11 は力不足か…

目次

f:id:ogohnohito:20130520050353p:plain

§1.いきさつ

  1. はてなダイアリーからブログに移行した記事、Internet Explorerでは表示がずれることも
    (引用:まりふのひと 2018-12-23)
    ≪今日の結論≫
    1. 表示が重なる原因は、はてなダイアリー時の記事の幅と、はてなブログの記事の幅の違いだと思われるが‥‥
    2. IE11以外のブラウザーではその現象が見られないので、はてなと言うより IE 側の問題と思われる。
    3. 日暮日記さんの 2014/12/25 の記事に ":plain" を加えたらどうなるか‥‥ 興味あるところだが、他人様のブログなので叶わない...

  2. はてなブログに移行した はてなダイアリー時の記事の幅が違っていた(日暮日記 - 2018-12-23)
  3. はてなブログ/テスト用に非公開のサブブログを作った(まりふのひと - 2018-12-27)

ということで、3. で作成した非公開サブブログを 2. の日暮日記さんと同じデザインにし、「表に入れた画像」の出方を自分の目で確かめた、、、、、、、、、


§2.はてなダイアリーから移行した「表に入れた画像」の見え方(ブラウザーによる違い)

 日暮日記さんの はてなダイアリーから移行した記事 「ミニ門松作り」初体験を楽しみましたー!! を代表的なブラウザーで見たらどうなるか‥‥

Internet Explorer (IE11) Microsoft Edge Mozilla Firefox Google Chrome
f:id:ogohnohito:20181227165905p:plain f:id:ogohnohito:20181227165952p:plain f:id:ogohnohito:20181227171036p:plain f:id:ogohnohito:20181227170034p:plain
拡大レベル:45% 拡大レベル:40% 拡大レベル:40% 拡大レベル:50%
  • IE11
    • 表に入れた画像が右サイドバーに掛かっている。
    • 2014-12-25(はてなダイアリー時)にはチャンと見えてたのに…(移行に伴い、記事の幅が変わった?)
  • IE11以外
    • 画像がサイドバーに掛かることなく表示されている。
    • f:id:ogohnohito:20181228145808j:plain:right:w320Firefoxで画像のサイズをみる‥‥ と、幅は 300px.ではなく269px.に縮小されていた。
    • Edgeや Chromeでは、画像のサイズはわからない。(右クリックメニューに無い)


§3.はてなブログでは

 はてなブログでは、

  • はてな記法: "|[f:id:miyakebito:20141225225115j:plain]|[f:id:miyakebito:20141225225157j:plain]|"
    • 表の中に「写真を投稿」する。

で、IE11以外は きれいに納まることが判った。

◆IE11で見る

f:id:ogohnohito:20181227191831p:plain

  • 現寸(幅 800px.)で表示され、スクロールしないと全体が見られない。
  • 写真全体を見るには 50%まで縮小表示する必要があった。
  • クリックした時の画像幅は 540px.で、「拡大」にならなかった。

Firefoxで見る

f:id:ogohnohito:20181227192547p:plain

  • 「普通」に表示される。
  • 画像の幅を Firefoxで調べると 269px.であった。
  • クリックした時の画像幅 586px.で、オリジナル画像の 800px.には届かなかったが…


§4.幅の違う画像

 §3.では同じ大きさ画像を並びたが、幅の違う画像ではどうなるか‥‥ と思っていたら、日暮日記さんが先を見通して作ってくれたので、早速、引用させてもらった。

はてな記法

  1. オリジナル
    "[f:id:miyakebito:20181225201529j:plain:w320] [f:id:miyakebito:20181225201639j:plain:h351]"
  2. オリジナルのまま表に入れた
    "|[f:id:miyakebito:20181225201529j:plain:w320]|[f:id:miyakebito:20181225201639j:plain:h351]|"
  3. 表+plainのみ(サイズの指定を取る)
    "|[f:id:miyakebito:20181225201529j:plain]|[f:id:miyakebito:20181225201639j:plain]|"

◆画像のサイズ

はてな記法擬似日暮日記*1日暮日記さん*2
左側右側左側右側
1. オリジナル320×351
(Firefox)
201×351
(Firefox)
320×351
(IE11)
201×351
(IE11)
2. オリジナル のまま表320×351201×351  
3. 表+planのみ330×362208×362  

≪今日の結論≫

 Internet Explorer(IE11)で画像を取り入れた記事を編集する時、はてな記法/fotolife記法で、画像のサイズや文字の回り込みを行っていたが、はてなブログではチョッと事情が変わっているようだ‥‥

  1. 画像を表に入れた記事を IE11で見ると、画像がサイドバーに被さっている(はてなダイアリーから移行した)記事でも、Microsoft EdgeGoogle ChromeMozilla Firefoxで見ると「正常」に見えた。
  2. 表に2枚の画像を並べた場合、幅(または高さ)を指定せず plainのままで、記事の幅に納まるよう自動的に調節くれる‥‥ ようだ。
     但し、ブラウザーが IE11の場合、原寸で表示されてしまい、意図した構図にはならない。
  3. Edgeや Chromeでは、画像を右クリックしても画像のサイズが判るメニューがない。(たぶん)


※反省

  • あ~でもない、こ~でもないと下書きに数週間滞在してしまい、まとまりのない記事になってしまった…
  • 初めて「目次」を作ってみた。

f:id:ogohnohito:20130520050353p:plain

*1:日暮日記さんと同じデザインの非公開マイブログ

*2:https://miyakebito.hatenablog.jp/entry/2018/12/25/203434