完成

梅雨だけあって、不安定な天気ね。

基本、日中は曇だったけれど、午後はちょっと雨が降ったり。

と、そんな中、やっと完成した！

自分のWebサイトを刷新した。

masayaohara.com

作り直したいと思いながら、ずるずると・・・

時間を見つけ、ちまちまと修正作業をしていた。

以前のものと中身はそれほど変わっていないけれど、外観を変えた。

以前は黒ベース。

今回は白ベース。

姫路城も白くなったし。(笑)

中身はほとんど変えていないけれど、一番大きな変更は、スマホ対応。

以前のものは、ちょうどタブレットが出始めていた。

それに合わせて、クリックというか、タップしやすいような画面にした。

でも、今はスマホ全盛。

以前のものだと、文字がとても小さくなって読みづらかった。

スマホの画面自体が小さいから仕方ないんだけれどね。

で、ふと思って調べてみると、今はレスポンシブデザインというのが流行なのだそうだ。

画面が大きい用、スマホのような画面が小さい用に、CSS(場合によっては、Javascriptで対応)を読み替えるというもの。

これはこれで面倒だけれど、ちょっとコツを掴むとそうでもない。

でも、PCのブラウザで表示していたものをそのまま表示できないものも出てきた。

例えば、「写心集」のページ。

PCのブラウザではこういう風に表示。

それを、スマホでは、こうやって画像の表示位置を変更している。

これで、狭い画面でも、それなりに効率よく表示できるというわけ。

僕は、特別、スマホとか区別せず、ブラウザのサイズで画面構成を変更している。

よって、PCブラウザであっても、ブラウザの横幅を小さくすれば、スマホ対応の画面になる。

興味のある人はやってみてね。

以前は、IEのバージョンの違い、他のブラウザの違いが出て、それ対応をしていた。

今は、もうIEの古いバージョンは切り捨ててしまい、その代わり、スマホやタブレットのようなものに対応する必要性が出てきた。

ほぼ問題ないのだけれど、スマホのブラウザの種類によっては、表示のされ方が微妙に違っていたりする。

これも困ったもの。

さすがにスマホはブラウザの数が多すぎるので、全て対応するのは不可能！

2,3種類でそれなりに表示されていればよしとするしかない。(笑)

こうやって新しくなると、気持ちも一新されるね。

残るは、New Zealand追っ掛け隊やHayleyのサイト。

この2つは読み物が多すぎるので、対応するのはかなりしんどい。

データがDBに入っていれば、随分楽に移行できたんだろうけれど。

この2つのサイトをスマホで確認してみたら、文字は小さいけれど、タブレットには対応させていたから、まだ見られないことはない。

だから、それはそれでよしとしとこう。(苦笑)

色々とネットでレスポンシブデザインのサンプルを見てみたけれど、かっこいいのが一杯あるね。

僕は僕らしくこういう感じでいこうと思う。

今回のWebサイト刷新で、更にWebサイト構築の知識を得ることが出来た。

写真する人で、ここまでWebサイトを作れる人もそうそういないでしょう。(笑)