当ブログを少しだけスマホ対応にしました: "Haniwaのページ"作者のblog

台風も去り、帰省の混雑も終わったと思ったら、今度はあんまり天気が良くないという。なんだかなぁ。

さて、以前からこのブログをスマホで見ると小さく表示されてしまい、字を読むためにはピンチアウトなどして拡大しないといけないのが気になっていた。

このブログのHTMLやCSSはアサヒネットのアサブロが提供しているテンプレートを自分で少し手直しして使っている。

このテンプレートはまだPCのディスプレイの解像度が小さいときの標準なので、ブログの横幅が760pixelの決め打ちとなっていた。これ自体はそんなに悪くはない値だと思うが、最近のスマホは解像度がFHD+の2340×1080ピクセルとかになっていて（P20 liteの場合は2280×1080px）、縦画面でこのブログを表示すると1080ピクセルのうち760ピクセルだけを使って余白があるのに字が小さくて読めないということになる。

それで、画面一杯に表示する設定にしようかと思ったが、世の中には色んなディスプレイがあるのでそれでいいのか分からない。画面解像度に応じてCSSを変えるというやり方もあるのだが、どのくらいの解像度で変えればよいのか分からない。検索した上位の記事では640ピクセルで切り替えるみたいな内容になっていたが、いまどき横640ピクセル以下のスマホってあるのかとも思った。Zaurusだったら丁度よさそうな値だがあれは10年以上前の端末だしねぇ。

ということで、とりあえずCSSの方はいじらずにHTMLの方だけ1行追記して、スマホで字が読める大きさに表示されるようにした。P20 liteだと、いままで横1080ピクセルのうち760ピクセルで左上に寄って小さく表示されていたのが、読める字の大きさで画面の部分が表示される状態になっている（横1080ピクセルのP20 liteのChromeやFirefoxで確認）。文章を読むのにはスクロールしないといけないが、こっちの方が以前よりもマシかなぁ。横幅100%表示の方がよいのかなぁ。

HTMLに加えた1行は以下の通り。 アサブロの管理画面からは、「HTMLカスタマイズ」の「head要素 閉じタグ直前」に以下のmetaタグを貼付ける。アサブロユーザーの方の参考になれば。

<meta name="viewport" content="width=device-width,initial-scale=1.0">

【追記：2019年9月11日】
Google様に「コンテンツの幅が画面の幅を超えています」と言われるので、

<meta name="viewport" content="width=760">

にした。記事本文のフォントサイズを18pxにしました ― 2019年09月10日参照。
【追記ここまで】

写真は記事とは関係ない。
K2型蒸気機関車134号（千葉県習志野市 津田沼1丁目公園）：HUAWEI P20 lite（ANE-LX2J）、3.81mm（35mm判26mm相当）、プログラムAE、AWB、パノラマモード。シャッタースピードや絞り値・ISO感度はパノラマの場合EXIFに記録されていない（機種名や撮影日時は記録されている）。

HUAWEI P20 lite（ANE-LX2J）、3.81mmの画角って27mm相当ぐらいかなぁと思っていたら、本体の裏側に"1:2.2/26 ASPH"と書いてあるのに気づいた。35mm判の26mm相当らしい。なお、パノラマモードの時はRAWの記録はできない。

旧日本陸軍鉄道第二連隊が演習線内で使用していた蒸気機関車だそうだ。その演習線はいまは新京成線になっている。その関係からか、JR津田沼駅と新京成電鉄新津田沼駅の間の津田沼一丁目公園に保存されている。

これは中心被写体が中央にきてちゃんと合成されている作例。元のパノラマ画像は6464×2176ピクセルで撮影されている。クリック後の画像はそれを2376×800ピクセルに縮小したもの。クリック前の画像はそれをアサブロがサムネイル用に300×101ピクセルに縮小したもの。