画面デザインの進捗

今日は午前中、昨日書いたフリーの画像処理ソフトGIMPを用いて、TOPページのEnterの文字がマウスオーバーの際にネオンが光るように縁取りされる画像を描いてみました。参考に添付しますので、ご参考ください。マウスオーバーする前、後の２枚を本記事の末尾に付けます。
同様にして、WingBrainのサイトもEnterの２パターンを作成しました。（こちらはまだ非公開）

その上でさらに、画像のサイズ調整について調べてみました。具体的には、ご覧いただく皆様のPC環境（モニターサイズ）により、当方の画像サイズを任意に調整できるようにする方法があるかどうか、またその方法についてです。結論としては、JavaScriptを用いれば、今ご覧いただいているブラウザのウィンドウサイズ、およびモニター画面のサイズ（言い換えれば、ブラウザのウィンドウを最大化したときのサイズ）が分かるようなので、それを用いることにしました。

やはりJavaScript（JQuery）は必須ですね。ウィンドウサイズをJavaScript側で強制的に変更するのはご覧いただく皆様に失礼なので、モニター画面サイズによって、画像を何段階かに分けて縮小表示するようにしようと思います。背景画像がフルスクリーン状態で表示されることを前提に、マウスオーバー時の画像切替を制御するため、ウィンドウサイズに合わせて任意に画像サイズを拡大縮小してしまうと、おかしくなってしまいます。そうならないための対策として考えた次第です。

引き続き、JavaScript（JQuery）の記述付きでのTOPページ、目次ページの試作に取り組んでみます。