旅行記をスマホでも見やすくしようと考えた。
大きく方法は二つ。
このバンコク生活日記のようにWordPressを使う方法。
WordPressは標準では階層構造をとれないようでマルチサイト化という工夫が必要。
こちらを採用した場合、すでに結構な量になっている既存のサイトに変な影響を与えないかが心配
もう一つは旅行記のHTMLページの方をレスポンシブデザインを採用する方法。
こちらは旅行記一つ一つ対応していく必要があるが何か問題が出てもそれだけ直せば元に戻せることがメリット。
ということでレスポンシブデザイン化を行うことにした。
ググってみると変更するのは対象とするHTMLファイルとそれに対応するCSSファイルということでさっそく取り掛かってみたのでその手順をメモっておく。
1 CSSでメディアクエリ(@media screen and (){})でデバイスサイズごとにimgタグのクラスを作成してそこでサイズ指定。
@media only screen and (max-width: 1080px) {
img.photo{
width: 100%;
height: auto;
}
}
@media only screen and (min-width: 1081px) , print {
img.photo{
width : 480px;
height : auto;
}
}
2 HTMLファイルのほうでそれに合わせたい画像のimgタグに対してclass=”photo”のように指定。
<img src=”IMG_2773s.jpg” class=”photo>”
3 HTMLフのヘッダー部でmetaタグを指定。
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
どうもうまくいかないといろいろいじっていたがどうやらiPhoneのキャッシュのクリアにひと手間必要なことに気が付いた。
テーブルがまだうまく設定できないがこれで全体レイアウトと画像サイズは対応できた。（ゴ・チャーン 2022/1）
これでスマホで見ても老眼にやさしいw
あとはおいおいやって行こう。
