きつつき工房 ブログ

きつつき工房の職人の独り言

ホームページのスマホ対応

2022-11-25 16:13:18 | 工芸

 私がホームページをつくったのは22年も昔の2000年のことで、htmlのタグを「メモ帳」に手打ちで打って、アナログ電話回線でアップロードしたものです。その後のWEB技術の進歩はすさまじく、とても追いつけるものではなく、スマホでの閲覧が一般化するに至って、もはや対応するのはあきらめていました。

 定年退職してちょっと時間ができたので、スマホ対応の方法を少しだけ調べてみました。

 スマホでは、WEBページの幅全体を表示しようとするので、パソコン用の幅の広いページは文字や画像がすごく小さくなってしまうということがわかりました。

 そこでページソースのHEADのなかに、

 <META name="viewport" content="width=device-width,initial-scalea=1.0">

 というタグを埋め込むと、スマホ画面の幅程度(400px強)で表示されるようになるので、画像・文字などが極端に小さくなりません。もっとも、画像や表組みで幅が400px以上に固定されているコンテンツがあると、それを表示するように、ほかも合わせて縮小されてしまうようです。

 したがって、どうしてもページ自体を、幅の狭い縦長に再構成しないといけません。

 これがなかなかたいへんで、とりあえず花アイコンの拡大版をつくったのに合わせて、花アイコンの関連ページだけはなんとかスマホ用に再構成しました。

 こちらです→花アイコンのページ

 ついでに秋の花、ノコンギク、コウヤボウキ、ススキを追加しました。

 ノコンギク

 コウヤボウキ

 ススキ

 膨大にあるGIFアニメのページはまだ手つかずです。

 GIFアニメも、基本が32×32pxなので、原寸はこんなものです。スマホだと小さくて見えない。

  シマリス

 これを倍の64×64pxに拡大した試作品がこんな感じになります。

  シマリス

 しかし、アニメは原画が何枚も必要で、それを直すのは、あまりにたいへんな作業なので、いつかできるものかどうか・・・、思案中です。

 

コメント
  • X
  • Facebookでシェアする
  • はてなブックマークに追加する
  • LINEでシェアする