ページの改装工事(書きソフトを換えてみた) ...03.12.30ずっと愛用してきたHP-Editorの「ホタル」でしたが、しばらくVersion-Upもしてないなぁと思って調べてみたら、制作?会社が消滅してた。 これはまずい(何が?)と急に思い立って、ちがった書きソフトを考えてみることにした。 で、HP-Builderは個人ユーザーにもっともスタンダードに使われているようだけど、 HOTALLを使い始めたときでさえ、わざわざすでにちょっとマイナーにも見えていたHOTALLを選択したぐらいのへそ曲がりなこともあり、今回も万人向けのHP-Builderには目を向けず、ちょい敷居の高いDreamweberでやってみることにしたのが今回の顛末。 Dreamweberは、かなり難しいソフトというイメージがあり、以前にも何度か挑戦してみては「やっぱりやめた..」の繰り返しだったけれど、今回は背水の陣。(^^;; 近頃になって、やっとなんとか使えるようになったかなぁ..といったところ。 プロ仕様というだけのことあって、ちょっと取っつきにくいけど、やれることはかなり奥が深い。 HTMLでの小技や、JavascriptやStylesheetなど勉強して、 これまでもいくつかはシコシコ書きながら表現できる部分を広げてきたつもりだったけど、 それらの殆どはDreamweberでアッサリできてしまうことに驚きと溜息。 使いこなせるかどうかは別として、これからはできるだけ使い込んでいってみましょう。 |
Toppageとその他のページの改装 |
HOTALLをベースにページを作っていて、Toppageに残しておきたい部分やTopics的な内容が多くなってきており、なんとか整理したいと思ったことも動機のひとつ。 メニューを階層化できないことや、ちょっとした動きをつけるのに限界を感じていたこともあった。 あまり表示画面をスクロールさせずに、表示部分をコンパクトにまとめる…が、今回の改装のコンセプト。 Toppageだけでなく、その他のページも(修正や)整理などしていこうと思ってるけど、 古いページにはまだ変なところも残ってるかも知れない。徐々に。 |
Rolloverイメージ |
サムネイル画像にリンクを張って、マウスを合わせることで画像のイメージをRolloverさせながらジャンプさせることは、(Javascriptを別に記述する必要はあったけど)以前からできていた。 けっこう大変な作業だったけれど、Dreamweberではこれが簡単にできてしまう。 GIFなどで保存した小さなデータを２つ用意する必要があるだけ。  「ふぁみり〜ＰＣ」のRolloverイメージは、マウスを合わせたときの画像イメージの変化だけでなく、(表示)画像サイズを大きくしてみることで面白い効果が出てるんじゃないかと思う。 これも、ファイルサイズの小さなGIF画像だけど、ただ画像のサイズを変えたのではページレイアウトがマウスの動きでギコギコくずれてしまう。 画像の丸いイメージから想像できると思うけれど、透過GIFで作り、小さい画像は透過部分を大きくしたまま、キャンバスサイズは同一のもので仕上げることで表現できた。 |
Pulldown
menu と Popup menu |
これまでズラズラッとテキストのまんまで表示していたTopicsだったけど(あれはあれで分かりやすくてイイという向きもあるけど)、Toppageの内容と表示領域がだんだん大きくなってしまい、かえって見づらくなってきていた嫌いもあった。  で、Topicsとなる部分をPulldown menuに格納してしまうことにした。新しい内容の書き換えなど、簡単に更新できるのと、表示領域をとらなくて済むメリットがある。 比較的最近の(それとちょっと面白い)ネタにはこれから飛べるが、Rolloverからジャンプさせていたサムネイル画像にPopupメニューを加えられることを発見し、これで時系列だけでなく、ジャンル別に該当ページにジャンプできるようになった。 古いネタなどポコッと出てきて懐かしい。 本来のメニューであり大分類かけてあるToppage左側のボタンからでは、中身が多すぎて(混乱しすぎていて?)Popupでメニューを階層化することができないといった事情もあったのだが。 大分類のボタンメニューからは、これまで同様、分類かけた小メニューのページに飛ぶことにしてある。 ただ、これはソフトのバグなのか仕様なのか、それともワタシができないだけなのか分からないが、Popupメニューの階層表示がPulldownの枠の下に隠れてしまうという不具合がある。 で、仕方なく、あまり格好良くはないような気もするけど、Popup表示を上に出したり斜め下に出したり、はたまた横に出したりして、Pulldownの枠に触らないようになんとか収まりをつけている。 |
Flash |
|
|
Flashはファイルサイズもそれほど大きくなく、ムービーに近いような表現ができて面白い。 できればそのうち自作で面白いものができたらとも思っている。 いくつかのページにFlash(サンプル)を埋め込んでみたが、今はToppageに、害のない(ただの飾りの)小さいのをひとつ使っているだけ。m(_ _)m ←(ボタンメニューとメインのメニュー領域とのテーブルのすき間を埋める効果...!?) Broadbandが普及して、たいがいの重さのページも軽々表示できるようになっているが、やはりページは軽いのにこしたことはないだろうし、Flashのplug-inが入ってないPCも結構あるだろうと思い、ここはしばらく自重することにしている。 |
レイヤーをタイムラインで動かす |
 |
「いいはなし」のメニューページに二羽のセキセイインコを飛ばしてみた。(^^ゞ タイムライン、難しそうなchipだったがやってみると大変面白い。 動かす画像にもよるのだろうけど、ちょっとしたものなら可愛らしいし楽しくなってくるんじゃないかと。(自分だけか..?) これとは別に、画像を部分的に重ねたり、自由に配置したりしているページなど、レイヤーを使っている。 ex (ちょっと見つけた便利な小物) & (メインPCをDDR333に) 表現の幅は広がるのだけれど、レイヤーはページのどこに収めるか、位置決めが困難なのであまり多用できない。 ブラウザを開くウィンドウのサイズによって、表示される位置が全然違ってしまう。 (左上に重なりの画像があるはず...!? 左右位置はWindowsサイズの大小でも動かない。) ページのレイアウトを考えると、レイヤーを多用するよりはテーブル(表)を使って構成した方が、作るときのイメージがそのまま再現できる。 |
タイトルの入ったテーブル(セル)枠の角を丸くする |
Toppageは、テーブルを使ってレイアウトしている。レイヤーはここでは使わない。 で、テーブル枠をHTMLで表示させると、どうしても角張った印象ばかりが目につく。 なんとかタイトル部分だけでも画像っぽい丸まった表現ができないものかと悩んだ末に、弄ったあとが現在のデザイン!? 少しは格好良くなったんじゃないかと自分では思ってる。(^^ゞ デカイ画像で処理してしまう手もあるけど、それでは今回の改装コンセプトとも異なってくるので、ここは、HTMLの処理だけでなんとかしようと一工夫してみた。 内側のcorner部分と外側のcorner部分を小さいGIFで作り、画像(タイトル部分..GIF)の背景色と同一の背景色を使ってまとめてみた。 外側のcorner部分は画像を埋め込んだのでは位置がずれてしまうので、画像を背景イメージとして取り込んだ。けっこう苦労したんです、ここは。(^^;; |
外corner    内corner |
その他…おまけ |
いくつかファイルサイズの小さいアニメGIFを使ってある。 もとから埋め込んであるものもあるけど、今回のはタイムラインで位置を動かすことで小鳥が飛んでいるような表現ができている。 たった４コマのアニメGIFだけど、使い方によっては面白い効果が生まれる。ちょっと自作してみたくなってきた。 で、いくつか、簡単に作れたものをご紹介。(^^; アニメにするための元画像をデザインするのがちょっと大変そうなので、今はまだ、ベース部分とテキストで表現できるものや比較的簡単そうなのだけ。 こいつら、案外イイかも..(^^ゞ もちろんDLフリーです。 |
