サイトリニューアル進捗状況 ― 2008/04/02 22:35
サイトデザインの部分的変更が、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によるサイト作成などを、取り上げていこうと思っています。
ブログレイアウトの変更 ― 2008/04/07 01:04
当ブログのレイアウトも、本サイトに合わせ、コンテンツが中央揃えで表示されるように変更しました。
また、左側のナビゲーション部分は、従来はInternet Explorer専用のスタイルシート（filterプロパティのalpha）を使って、背景を透過させていましたが、透過PNGファイルを背景画像に使用する方法に変更しました。このため、FirefoxやOperaでも透過表示されるようになりますが、反対に、IE6以前では透過されなくなります。これは、PNG画像の透明度に、IE6以前が対応していないためです。
しかし、日本でもWindows UpdateでIE7への自動更新が始まったので、ブログ、本サイトともに、IE7以降で利用可能なCSSを積極的に取り入れることにしました。
もちろん、IE6での表示にも考慮しつつサイトデザインを設計しています。たとえば、本サイトのほうでは、IEの「コメント分岐」を利用して、透明PNGを使う部分には従来のfilterプロパティによる別のCSSを適用させる、といった方法を採っています。ただし、このブログではHTMLコードを変更することはできないので、コメント分岐は使えません。CSSコードの記述内で使える、いわゆる"CSSハック"という手法は、個人的に好みではないので、利用していません。結果として、IE6以前とIE7以降で、完全なデザインの一致を目指すよりも、より標準に準拠したIE7重視の姿勢で、サイト制作をしていくことにしました。
ゆえに、当サイトで完全な表示を再現するには、IE7以降の利用をお奨めします。
