C.D.R. ニュース

サイトデザインの部分的変更が、8割ほど終了しました。

見た目上の変更部分は、ページ内容が中央揃えになるようにした点です。旧来の記事ページは、ほぼこのデザインに直しました。

また、各記事ページでは、JavaScriptを使い、全見出しのリストが自動生成され、さらにリストから各見出しへのリンクも自動的に生成されるようにしています。このリストは、ページ左上（サイトロゴの下）に「contents」として表示されます。

「展示」コーナーの記事ページは、レイアウトを少し変更し、ページ上部に7つのサムネールを並べるようにしました。その下に画像と解説記事も載せていますが、サムネールをクリックすると画像が表示されるようにもなっています。おおよそ、1024×768のウインドウサイズに、このサムネール部分が収まるようにしてみました。

サムネールのクリックで拡大画像が表示される機能は、やはりJavaScriptで実現しています。こうしたスクリプトでは、「lightbox」がよく使われているようですが、その動作を参考に、自分でスクリプトを書いてみました。とはいっても、lightboxのソースコードは、私にはまったく理解できないので、「画面がブラックアウトして画像が表示される」にはどうすればよいかを自分なりに考え、CSSとの組み合わせにより実現したスクリプトです。同様に、自動見出しリストも、私のオリジナルです。もともと、プログラムやスクリプトは苦手で敬遠していたのですが、なぜか3月ごろに突如としてアイデアが閃き、簡単なJavaScriptであれば、私でも書けるようになりました。

なお、展示の記事ページは、新しいデザインに合わせて画像を作りなおさなければならないので、今のところ、「ハナちゃん」のイラスト集だけがリニューアルされています。

その他、目に見えないところでは、サイト作成に利用しているMicrosoft Expression Webの、「ダイナミック Web テンプレート」（DWT）機能を活用しています。各コーナーの扉、一般記事、展示用記事は、それぞれ統一されたフォーマットなので、この元レイアウトをDWTで作成し、それをひな形として各ページを作成しています。これによって、CSSによるデザイン管理のように、HTMLコードの部分も一括変更が容易になります。

JavaScriptやDWTの活用は、講師を担当している職業訓練校の授業内容に反映させる目的もあって、取り組んでいるのですが、C.D.R.サイトの記事でも、今後、こうした内容を取り上げていこうと考えています。そのため、最近はほとんど質問のこないQ＆Aコーナーの扉は廃止し、そこを「Webデザイン」コーナーに変更しました。まだ、新規掲載記事はありませんが、HTML、CSS、JavaScript、そしてWeb画像作成やExpression Webによるサイト作成などを、取り上げていこうと思っています。