サイトデザインの続き

明日９月７日（火）分として先ヅモで書きます。

９月に入りましたので、そろそろペースアップして進めたいと思います。
仰せつかっているWingBrainのデザインはJPEG版で、ウィンドウサイズに合わせて目次ページの画像サイズを動的に変更する方法を実装しかけているところです。

目次ページについては、Javascriptをなるべく使用しないと書きましたが、それはあくまでボタンのクリックなど基本的な機能面についてのことで、TOPページともども、その点ではJavascriptを使わないように統一する予定です（現状の試作版ではTOPページではクリッカブルマップを使っているため、基本的な機能面でJavascriptに頼った形になっています）。

一方、画像サイズの動的変更はJavascriptなどを使わないとどうしようもないため、その部分のみ記述することとしました（この部分はTOPページ、目次ページと共通化を図る予定です。詳細は本記事で後述）。
これにより、Javascriptの使用をオフとしているＰＣ環境であっても、画面サイズに合わない画像サイズになるだけで、ボタンの操作など基本的機能はそのまま実現できます。

さらに、CSSも未使用の設定にしている場合は、画像類は一切表示されず、シンプルにテキスト文字のみの説明とリンクが表示されるようにします。これは先日書いたように、目次ページの現試作版で実装済みです。TOPページも新たにそのようにする予定です。
また、上述のJavascriptコード上で画面サイズの取得の際、携帯サイズであった場合も、強制的に画像類は一切非表示、CSSオフでテキストのみ表示としようかと考えています。こちらも合わせてこれから実装します。


既存のTOPページ試作版と異なり、目次ページでは、ロールオーバー時のボタン画像類（裏画像類）を一つの画像ファイルにまとめていることなどもあり、imgタグを使用できず、CSSのbackground-image属性の変更により対処することとしています。

この場合、imgタグのように、動的に画像を拡大縮小指定できないため、Javascriptの上で、予め画面（ウィンドウ）サイズを読みとり、それに合わせて、サーバ上の最も画面（ウィンドウ）サイズに近い縮尺の画像を取得するようにする（background-imageで指定する画像のURL、ならびにCSSを外部ファイルとしてそのリンク先をも動的に変更する）ことで対処する予定です。


先日も書いたように、画面・ウィンドウサイズのパターンに合わせて、それぞれに合った縮尺の画像やCSSを用意しなければならないのが面倒ですが、頑張って地道に作ります。。まずは代表的な画面サイズのバージョンを２～３通り作ることにします。

次に、やっと当サイトのデザインですが、TOPページはURLは変更しますが、現行と同様にGoogleサイトとして、目次ページと本文の各ページはGoogleドキュメントとして構築する予定です。

GoogleサイトではCSSが使用できないという致命的な弱点がありますが、先日掲載したTOPページのデザイン仕様ならば、CSS無しで問題ありません。また、Javascript部分はガジェットとして外部ファイル化しリンクを貼ることで対処できることが分かったので、これで行く予定です。TOPページは画像の内容自体を除き、WingBrainと殆ど同じなので、すぐ実装できるかと思います。追って公開します。

Googleドキュメントは、逆にJavascriptが使えず（ガジェットも今のところ不可）、CSSは使用可能なので、画像サイズの動的変更をしなければ、やはりこのままで大丈夫と考えています。
デザイン案（しかもボタンになる画像部分の一例）を公開しているように、今のところ当サイトの目次ページは背景にフルサイズで画像を入れることはしない予定なので、動的変更は考えておりません。
今現在、公開したデザイン案を作ったのみなので、追って作成してゆきます。

これら合わせて、何とか今月中には完成させたいと思います。