goo blog サービス終了のお知らせ 
サイト制作日誌
歴史系サイト「南風博物館」の制作に関する感想、途中経過、その他の情報を日誌形式で掲載します。
 



どうも、「南風博物館」館長の南風です。

本日は、わたしのサイトに使おうと考えている、タイトルグラフィックについてです。
やはりタイトルは目立たせたいわけで、そのためには色遣いとか大きさとか、いろいろと
考えるのですが、やはり「ドロップシャドウ」という手法が一番、手っ取り早いと思います。

ドロップシャドウは、ロゴなどに影をつけて、背景から浮き上がっているように見せる手法です。
この処理を行えるソフトは、昔は限られていましたが、最近はどのソフトでもできるように
なってきたと思います。しかしながらそのプロセスはソフトごとにバラバラで、その結果も
一定していないように思うのです。すごく細かく設定できるものから簡単な設定で自動的に
影を入れることのできるものまで、他社にないものをと求めた結果、そうなってしまったのです。
どのソフトでも同じ結果を得るようにすることは、経験の多いベテランでも難しいことなのです。

 

ここで、ドロップシャドウの設定についての実例を示したいと思います。
上に掲げたグラフィックは、どちらも同じ画像に異なるドロップシャドウを適用したものです。
ちなみに、作成に使用したソフトはAdobe Photoshopです。分からない方はごめんなさい。

左の画像が距離8、スプレッド3、サイズ8という設定で作成されたドロップシャドウです。
この場合はボケ足が長く、より浮き上がり方が顕著に表れます。しかしこれをGIFの形式に
変換したとき、図のごとくまるでシミが広がったようになってしまいました。この弊害は保存の
とき、GIFではなくPNGにすることである程度は解決しますが、対応していないブラウザがまだ
あることと、やや画像のデータ量が大きくなってしまうことがボトルネックになってしまいます。
これは、やや暗い色をした背景が全面に敷いてあるか、写真を背景にしたときなら使えるでしょう。

右は、距離3、スプレッド0、サイズ3で作ったドロップシャドウです。ボケ足がほとんどありません。
これではあまり浮き上がって見えることはなく、ほんの縁取り程度に影がつけられている、といった
感じだと思います。しかしこの程度の影ならば、シミのようなものの広がりがないため、白い背景でも
このまま使えます。もちろん、PNGなど使わずにGIFで充分、影の効果が期待できるはずです。
ただし、この程度のボケ足では、背景に色があった場合にはほとんど目立ちません。

今回はやや難しいテーマでしたが、自分なりに作ってみて思った感想を述べてみました。



【本日の一曲】
「Wait For Sleep」 by Dream Theater

アメリカ出身のプログレッシブ・ハード・ロック・バンド、Dream Theaterが1992年にリリースした
2枚目のアルバム「Images And Words」に収録されていたバラードで、このアルバム全体の中では
ホッと一息つけるアクセントとして絶妙な存在とも言える一曲です。このアルバムには他にも多くの
優れた作品がありますが、わたしは敢えて話題に上ることのない、こうした小品を掲げることにします。
澄んだピアノの旋律で始まるこの曲は、そこにヴォーカルが無理なく重なってよりシンフォニックに、
かつ物悲しげに展開していきます。この曲も、夜空にかかる満月の優しい光を見上げなから聴くと、
思わず感涙してしまうほどに美しい、バラードとしては一級品の作品に仕上がっています。
また前後に配された長めの曲に挟まれるように位置したこの小品は、両方の曲をスムーズにつなぐ
役割を充分に果たしています。ちなみにこのアルバムはコンセプト作ではなく、個々の曲は
あくまで独立した作品として並べられています。これもまた、考え抜かれた秀作のゆえんなのでしょう。

プログレッシブ・ハード界において代名詞のような存在となり、世界的なスターにまでのし上がった
Dream Theaterですが、現在はよりヘヴィな展開を指向しているため、昔のよりプログレッシブな
曲調を好むリスナーたちにとっては、この「Images And Words」はまさに名盤中の名盤と言われます。
「奇跡の名盤」というレビューも見かけるほど、このアルバムには今でも数多くの支持が集まります。
特に日本のファンの間ではその傾向が強く、リリースが今から14年も前であるにもかかわらず、
CDが店頭に並び続けるというほどの人気を得ています。ここで紹介した「Wait For Sleep」以外にも
特筆すべきは、「Pull Me Under」(1曲目)、「Another Day」(2曲目)、「Take The Time」(3曲目)、
「Under A Glass Moon」(6曲目)などといった優れた楽曲群が並んでおり、まさに「捨て曲のない」
完璧な作品だと言われていることです。ヘヴィさとシンフォニック性を同居させたようなその作風には、
現在のDream Theaterには見られなくなった純粋な叙情性や、研ぎ澄まされた感覚が散見されます。

以下のDream Theaterのオフィシャル・サイトで、MIDI音源によるサンプルを聴くことができます。
http://www.dreamtheater.net/
またこのバンドには、日本語版の公式ファンサイトが準備されています。最新情報が得られます。
http://dreamtheater.jp/

コメント ( 0 ) | Trackback ( 0 )




どうも、「南風博物館」館長の南風です。

わたしは現状のサイトをリニューアルしようと思い、いろいろと勉強しているのですが、
それがなかなか進みません。仕事が忙しくて、勉強しているヒマがないというのが現状です。

そんなわたしの状況をよそに、現状で公開されているわたしのサイト「南風博物館」は、
ついに40,000ヒットを迎えることができました。こんな怠慢なわたしですが、この記録は、
訪れてくださる皆さまのおかげで達成できたのだと思います。どうもありがとうございます

思えば、わたしがこのサイトを立ち上げたのは、今から4年も前の2002年のことでした。
きっかけは、その前の年に購入したパソコンに、「ホームページ・ビルダー2000」が
バンドルされていたことでした。それまでわたしは、Webデザインというものにまったく
無関心でしたが、印刷会社に勤務していましたので、グラフィックデザインそのものには
いくらか興味がありました。でもそれより先に興味を抱いたのはページレイアウトの方で、
最初に買ったページレイアウトソフトは「Microsoft Publisher 2000」というソフトでした。
それは1万5000円くらいで買えるもので、当時のわたしの財政状況でも充分に
支払える程度のものだったのを覚えています。しかしそれでは、チラシなどは作れても、
もっと多くの人に自分のデザインを見てもらうことができない…それが何となく不満でした。

そんなとき、出会ったのが「ホームページ・ビルダー」だったわけです
当時はまだ自分でホームページを開設することが、それほど主流ではなかった時代でした。
考えてみれば、このソフトが登場したことがきっかけで、誰もがホームページを自由に
作れるようになったのだと思います。そんなソフトに最初に接したわたしは幸せでした。
まるでワープロソフトのように柔軟に、そして簡単にホームページを作ることができるように
なったのですから。とかくホームページは難解だと思っていたわたしにとっては、まさに福音でした。

ところが現在のわたしは、ホームページ・ビルダーから卒業しようとしています。
あの当時のようにワープロソフトのような手軽さでできたデザインでは、もはや時代遅れ
なのは前からわかっていました。しかしホームページ・ビルダーでは、あれ以上のデザインは
もはや荷が重いのです。しかもソフトそのものがより大きくなり、動きが鈍くなってきたのも
またわたしを離れさせる原因だったと思います。仕方がありませんが、時代の流れですね。

わたしはその後、「Adobe GoLive」に移りましたが、開発元による開発中止の示唆を受け、
将来性のなさを理由に、今度は「Macromedia Dreamweaver」に乗り換えました
現在はDreamweaverの練習中ですが、まだまだ慣れていないところがあります。
便利なソフトだということは使っていてよく分かりますし、やりたいことを効率的に
実現させてくれそうな高い機能を持っていることも、参考書などを見てわかっています。
しかしわたしは心のどこかで、「これはホームページ・ビルダーならアイコンをクリックする
だけでできたな…」とか、「この機能は、GoLiveならパレットを呼び出さなくても済んだな」
など、いろいろと比較してしまうのです。どんな道具にも、一長一短はあるものですよね。

でもわたしは、どんなソフトに移ろうとも、原点は忘れずに行きたいと思います



【本日の一曲】
「Memento Mori」 by Kamelot

アメリカで結成されたメロディック・ヘヴィ・メタル・バンド、Kamelotの通算7枚目となる
アルバム「The Black Halo」(2005年)に収録された大曲で、前作も含めてこのアルバムを
形成するコンセプトの最終章となる壮大な一曲です。導入部分はピアノの音色でイントロが
始まり、重厚な歌声がそれに続きます。その歌声はあくまでメロウに、エモーショナルに響きます。
クライマックスとなる大曲だけに造りがゆったりしていて、アコースティック・ギターやキーボードなどが
重厚に絡み合い、そこに女声コーラスが重なって壮大な雰囲気をもり立てています。
そしてこの曲で特筆すべきなのは、それに続くソロ部分です。女声コーラスだけでなく、
悪魔を表現するためのデス・ヴォイスまで挿入しています。何といってもソロ部分のメロディは
「カッコイイ」のひと言です。わたしはKamelotのオフィシャル・サイトでこの曲を試聴し、
それだけで一気にファンになってしまったくらいです。もちろん、この曲はソロだけでなく、
その他の部分(ヴァースもコーラスも)もまたいろいろなバリエーションがあり、楽しめる作品です。

ここで紹介したアルバム「The Black Halo」は、前作「Epica」から続くストーリーをもとにした
コンセプト・アルバムです。ゲーテの代表作「ファウスト」をモチーフにしたというその物語が、
曲の歌詞やメロディに表現されています。その楽曲群はどれもすぐれたメロディで統一され、
「Epica」は今でも語り草になるほどの名盤とされています。「The Black Halo」はその物語を
引き継ぐコンセプトを持っており、ここで紹介した「Memento Mori」はその物語の最終章として
位置づけられています。もし本格的にお聴きになるのでしたら、前作「Epica」から順番に、
歌詞を追いながら楽しまれるのがいいと思います。わたしはそうした聴き方をしたところ、
感動のあまり思わず目頭が熱くなるのを覚えたほどです。とにかく、この2枚のCDはオススメです。

Kamelotのオフィシャル・サイトには、日本語版が用意されています(一部英語)。
そこではアルバム「The Black Halo」の成り立ちを中心にバンドを知ることができます。
また「Downloads」から「Audio - Video」を選ぶと、ここで紹介した「The Black Halo」の
ソロ部分だけを抜き出したMP3形式のサンプルを聴くことができます。周波数が高い高音質の
MP3ですが、ほんの少ししか収録されていません。しかし、わたしは衝撃を受けました。

日本語版オフィシャル・サイト:http://kamelot.jpn.org/kamjapan/main_en_mephisto.htm
MySpace内のKamelotページ:http://www.myspace.com/kamelot

コメント ( 0 ) | Trackback ( 0 )




どうも、「南風博物館」館長の南風です。

Webデザインの話は久しぶりですが、今日はわたしの感じたことをお話ししたいと思います。

企業のホームページなどでよく、検索ボックスを見かけることがあります。
中でもサイト内検索は、もっとよりよくサイトを見てほしいと思っている企業サイトでは、
必須の技術と言えますね。ただしそのほとんどはベンチャー企業などが運営している
独自の技術を使っていたり、自社で開発したWebアプリを使っていたりもします。
個人が独自の検索ボックスをサイトに入れることは、なかなか難しいことなんですよね

そこでわたしは、プロバイダが提供しているサイト内検索の機能を利用しようと思いました。
そのサービスは有料で利用するものですので、月あたり300円ほど払わなくてはなりません。
とりあえず登録し、先月あたりから使用料を支払っていますが、まだ導入できていません
それはこのサイト内検索が、ボックスを設置する方式ではなく、リンクを置くタイプだからです。
わたしの理想としては、トップページにボックスを置いておいて、そこから入力することで
ダイレクトに検索ページに移行することだったんですが…この方式はリンクをクリックして、
検索専用ページにアクセスしなければならないのです。どうも、想像していたのと違います。

トップページにボックスを置くためには、Googleあたりの検索サイトのものを利用するより
他はないようです。さいわい、Googleには「フリー検索」というサービスが用意されていて、
直接ソースをコピーして持って行くこともできます。ただし、広告が表示されるそうです。
別に広告が表示されたとしても、便利に使うことができればいいかな…とも思っていますが。

しかし、ここで問題が。
フリー検索を利用するには「Google」のロゴを一緒に表示するルールになっていますが、
そのロゴの背景色が白なのです。すでに壁紙を適用しているわたしの現状のサイトでは、
置くことができないのです。仕方なく、新しいサイトができるまでは契約を控えています。
それまでは、古い方のサイトにリンク式のサイト内検索を置こうかな、と考えています。

実をいうと、契約しただけでまだ置いていないんですけどね



【今日の一曲】
「Promisses」 by Adagio

フランス出身のシンフォニック・ネオ・クラシカル・メタル・バンド、Adagioの第2作目にして、
最高傑作の呼び声も高いアルバム「Underworld」に収録された、美しいバラード曲です。
キーボードとサウンドエフェクトが奏でる流麗なピアノとヴァイオリン、そしてフォークギターの
素朴な音色を背景に、ヴォーカルのデイヴィッド・リードマンのエモーショナルな歌声が
聴く者の心を捕らえ、幻想的な世界に誘ってくれる名曲です。この曲は誰もいない部屋で夜に、
窓越しに見える星空を眺めながらお聴きになることをお勧めします。何とも言えない気分になります。

第1作「Sunctus Ignis」でヨーロッパおよび日本のファンを獲得したフランスのバンド、Adagioは、
ギタリストのステファン・フォルテが作曲を担当し、クラシック音楽をベースとした音楽性を追求する
ことを身上にしています。この第2作「Underworld」では、この曲の他にもたくさんの名曲がありますが、
「Next Profundis」「Missa Aeterna」といったラテン語の曲名もあり、古き良きクラシック音楽の
世界をヘヴィメタルの分野で実現させようとしています。これからに期待が集まるバンドです。

最新作「Dominate」ではヴォーカリストが代わり、さらにややゴシック・メタル的なダークさが
加わった作風になっていますが、音楽性は変わっていないはずです。以下のサイトで試聴できます。
http://www.adagio-online.com/

コメント ( 0 ) | Trackback ( 0 )




どうも、「南風博物館」館長の南風です。

本日は、Webサイト作成にあたって使用している、画像処理ソフトについてお話しします。
イラレについては以前書きましたので、今回はそれ以外のソフトについて書こうと思います。

Webサイト作成について書かれた参考書を読むと、どの画像処理ソフトを使うべきか、
まるで開発元の根回しででもあるかのように、同じようなソフトが出てきます。

テキストエディタを使ってコーディングさせようとする本なら、「Adobe Photoshop Elements」
Dreamweaverの本なら「Macromedia Fireworks」、そしてホームページ・ビルダーの本なら
「ウェブアート・デザイナー」というように、読者にそれを買わせようと導いているのです。
でもウェブアート・デザイナーは、ホームページ・ビルダーに無料で付いていますので、
わざわざ買わなくても使うことができます。別売りしていませんので、外部の人は買えません。

わたしは以前から、Dreamweaver 8を使うようになりました。
難しくて奥の深いソフトですが、思ったより便利に使えるソフトだ、ということが、
今になってようやくわかってきたところです。お世辞にも使いこなせるようになったとは言えません
そして当然ながら、このソフトでは画像処理ソフトとして、Fireworks 8を推奨しています。
同じ会社の製品なんですから当然ですよね。同じ会社といえば、Flashなんかもそのひとつです。

ところが、わたしはFireworksを持っていません。単品で買う気もありません。
Flashなら同系列品(Flash Makerとか)以外にアニメーションを作れるソフトがありませんので、
場合によっては買ってもいいかとは思っていますが、Fireworksにはなぜか手が伸びません。
ウェブアート・デザイナーという、多機能で手軽で、簡単な画像処理ソフトがあるからです。

ウェブアート・デザイナーは、独自にMIFという形式で画像を保存するようになっています。
このデータ形式はまったく汎用性がなく、仲間のホームページ・ビルダーでもそのまま
貼り付けることはできないくらいです。しかしこの形式はイラレのAIやEPSと同じような
ベジェ曲線を描かせるもので、ベクトルデータを作ることができます。つまりこの形式で
保存してさえおけば、いつでも高画質で伸縮自在なデータを、別に流用することができます。

ただしデフォルトでは、GIFやJPEGなどに変換した際、ホームページ・ビルダーに直接貼り付ける
という設定になっているので注意が必要です。「ファイルに保存」をその都度選べば、
バンドルソフトでありながら、別の独立した画像処理ソフトとして使うことが可能になります。

これなら高い金を出してまで、Fireworksに走る必要がなくなるわけです



【本日の一曲】
「Here I Am」 by Shaaman

ブラジル出身のメロディック・ヘヴィ・メタル・バンド、Shaamanのファーストアルバム「Ritual」に
収録されていた、疾走感あふれるスピード・チューンです。でもメロディには哀愁があり、
何度聴いても飽きさせないほどの名曲です。タイトル・チューンである「Ritual」もまた名曲ですが、
わたしはこの曲のサビのメロディが大好きです。もう何度聴いたかわからないほどです。

Shaamanというバンドは、元Angraのヴォーカリストだったアンドレ・マトスが同バンドを数人とともに
突然脱退し、不足のメンバーを加えて発足したバンドおよびプロジェクトです。このバンドは
ライヴ活動も行い、一時期は精力的に活動していましたが、現在では活動を休止しています。
音楽性は彼が以前いたAngraとそれほど変わるものではなく、民族楽器やメロディを前面に押し出した
メロディック・パワーメタルを演奏するグループでした。アンドレ・マトスの作曲した曲にある
特徴として、サビに入る前にいったん休止符を入れるといったものがありますが、この曲でも
その特徴は変わらずに生きています。往年の彼の曲に触れたい方には、オススメのアルバムです。

コメント ( 0 ) | Trackback ( 0 )




どうも、「南風博物館」館長の南風です。

今回はまた、Webデザイン上で必要になると思われるテクニックについてお話しします。
「切り抜き」というのですが、わたしは印刷屋ですのでおなじみの用語なのですが、
デジタルの世界では「トリミング」というほうが通じる、という方々もいらっしゃるでしょう。

写真などをホームページなどにアップロードする際、余分な部分は切り取らなくてはなりません。
そこで必要になるのが「切り抜き」なのですが、この機能はPhotoshopなどのペイントソフトに
準備されているものです。切り抜きだけであるなら、Photoshopなどという超高価なソフトを
使わなくても、最近増えてきたフリーウェアの画像処理ソフトにも標準で付いていますし、
わたしが今でも使っている「ウェブアート・デザイナー」(IBMのホームページ・ビルダーに
バンドルされてきたプラグインの一種)にも普通に付いています。すでにおなじみですよね

それにしてもPhotoshopの切り抜きは、高機能なのですがそれを使いこなすのが難しい。
たとえば画像を決まった大きさで切り抜きたい場合、どうしていいかわたしはわかりません。
参考書もそれなりに持っていますが、どれも基本的なことばかり説明しているだけで、
そうした「やや中級」なレベルに関しては説明不足なのではないかと思うことがあります。
それでいて上級者向けの本を見ると、レベルが高すぎるし、わたしには役に立たないことばかり。
わたしが知りたいのは、基本を踏まえた上でいかに便利に使うか、そのレベルのことなのに…

仕方がないので、便利な使い方は自分で見つけるよりほかにありません。
ヘルプファイルもありますが、基本的なうえにユーザーズマニュアルと内容が同じです。
そうしているうちに、わたしは切り抜きツールよりも、矩形選択ツールがいいのではないかと
思うようになりました。切り抜きツールは範囲を決めてしまうと切り抜いてしまうだけですが、
矩形選択ツールなら、複数の切り抜き場所を同時に設定できるので便利なのです。

複数の箇所を同時に切り抜きたいのであれば、「選択範囲に追加」のボタンをオンにして、
新たにドラッグすれば大丈夫です。Shiftキーを押したりする必要はありません。
このようにすれば、同じ写真から複数のトリミングをすることができますよ

ちなみに切り抜くときは、選択範囲を決めてから、イメージメニューで「切り抜き」を選びます。



【本日の一曲】
「Falling Angel」 by Opus Atlantica

スウェーデン人シンガーソングライター、ピート・サンドベリ(Midnight Sun、Silver Seraph)
が2002年に結成したネオ・クラシカル・メタル・プロジェクトOpus Atlanticaの最初のアルバム
「Opus Atlantica」に収録されていたミドルテンポでヘヴィなナンバーのひとつです。
往年のAt Vanceを思わせる哀愁のメロディを基底にしつつも、エッジの効いたリフはまさに
ネオ・クラシカル・メタルのお手本ともいうべき作品です。このジャンルのファンは必聴でしょう。

このアルバムには、かつてMidnight Sunでともに叙情あふれるメロディを次々と発表し続けた
ピート・サンドベリの盟友、ヨナス・レインゴールドも参加しています。スウェーデンにおける
メロディック・ヘヴィ・メタルを語る上で欠かすことのできない両者を迎えた本作は、実験とは
いいながらも好きなだけ好きな音楽性を追求した、ファンにはたまらない一枚といえます。

コメント ( 0 ) | Trackback ( 0 )




どうも、「南風博物館」館長の南風です。

今回は久しぶりに、サイト作成のお話です。
先週は忙しくて制作(勉強しながらですが)ができなかったので、昨夜やったのです。
そこでとても、嬉しいことがありました。また問題が解決したのです。
これでわたしもやっと、先に進むことができる…正直そう考え、ホッとしたものです

Macromedia Dreamweaver 8の練習はいよいよ佳境、CSSの設定のところまで来ました。
これで、あとは自分のデザインセンスを思う存分発揮できるわけです(センスあるのかな)。
しかし、ここでまたもや問題発生。テーブルのスタイルをCSSで設定すると、罫線が出ないのです。
いやこの状況は、出ているようで出ていない、といった方が正しいのかもしれません。
ソフトの作成画面上では出ているのに、ブラウザでプレビューすると、罫線が出ないです。
作成画面では表示できても、ブラウザに表示できないのでは、作っている意味がありません。
先週はそこで作業が止まってしまい、そのまま忙しさにかこつけて放置していたのです。

しかし、これを解決しないことには、先に進むことはできないのです。
ところが、この内容はどの参考書を見ても、詳しく解説していないのでした。
あまりに基本的すぎて、こんなことを書くまでもないという内容なのでしょうか…
そうであるなら、わからないながらも自力で解決するより他はない! ということで、
わたしは時間のあるときを見計らって、練習というより検証(問題解決)に取りかかりました。

わたしは以前、Adobe GoLiveを使っていました。ソフトが変わっても設定方法そのものは
それほど変わらないだろう、と思って同じように設定していたのです。慣れって恐ろしいです。
CSSの設定ダイアログでは、GoLiveと同じようにスタイルの欄を空白にしておいたのです。
GoLiveではそれを自動的に、デフォルトである「実線」だと判断してくれましたので。
だからわたしは、Dreamweaverも同じようなものだと勘違いしていたわけです。

結論から言うと、Dreamweaverではきちんと「実線」だと指定しなければならないのです。
それを知らなかったわたしは、何がおかしいのだろうと思って、いろいろいじってみたのです。
「スタイル」の欄に「実線」を入れたのは、最初は何となくでした。ダメでもともと、という
気持ちもあったかもしれません。でも、それがこの問題の解決方法だったのです。

ふと見ると、ブラウザでもきちんと罫線が出ているではありませんか

深夜でありながら、わたしは「やったーーー!」と叫んでしまいました。
何でもやってみるものです。そして、誰も教えてくれないからといって諦めないことです。
そして先入観というものは極力排除し、まっさらな気持ちで勉強することが大切なんですね。



【本日の一曲】
「Undertow」 by Chroma Key

もともとDream Theaterのキーボーディストだったケヴィン・ムーアのソロ・プロジェクトである
Chroma Keyの最初のアルバム「Dead Air For Radios」に収録されていたプログレッシブの名曲。
この曲はまったくハードではなく、キーボードとドラム、そしてサウンドエフェクトが
いい味を出しているかっこいいナンバーなのです。しかも歌詞はさすらう男がメキシコを旅し、
世の中のしがらみや煩雑なことを捨て去り、車で高速道路を飛ばすといった内容です。
特に歌詞の「Maybe I'll call on the place, maybe I'll write you a letter,
that's what I meant when I said GOODBYE」(多分電話口に呼び出すよ、多分手紙も書くよ、
それが、「さよなら」を言ったときに僕の言いたかったことなんだ)という部分に、わたしはやられました。

曲はサンプリングですが、以下のサイトで試聴することができます。3曲目ですよ。
Chroma Keyは現在までに、3枚のアルバムを出しています。
しっとりとした大人のプログレッシブを聴きたい方は、ぜひチェックしてみては。
http://www.chromakey.com/

コメント ( 0 ) | Trackback ( 0 )




どうも、「南風博物館」館長の南風です。

こうしてみると久しぶりですが、サイト制作に関する記事を書こうと思います。
最近は忙しくてサイト制作ができなかったんですが…このことであれば書けます。

わたしはずっと前から、Adobe Illustratorのオフィシャルユーザーをしております。
初めて使ったのはバージョン8で、最初からWindows版だけを使っています。
Macintosh版もいくらかは覚えましたが、今は職場にMacがないので、使う機会がありません。
でもバージョン8は、現在主流のOS Xでは使えないんでしょうね…。わたしの会社では
いまだにバージョン8を主役として使っていますが、そのために、OSがまだ9.2から上に
ならないのです。得意先はもうすっかりOS Xを使うようになったというのに…

それはともかく、わたしはIllustrator(以下イラレ)のバージョンが上がるごとに、
バージョンアップ版を買い続けてきました。買ったバージョンは9、10、CS、CS2です。
まさにわたしは、発売元のAdobe社にとっては、理想的なユーザーというわけなのです

しかしわたしは、バージョンが上がるごとに、機能がどんどん進化していくことに舌を巻き、
そればかりでなくじっくり使いこなして、イラレの使い方で遅れを取らないようにと、
必死で覚えました。ですから会社でバージョン8を使っても、あれはできない、あの機能もない、
ということを何度感じたかわかりません。機能が増えることは、便利さが増すということです。

でもわたしは、いまだにペンツールで満足な曲線を描くことができません。
以前はかなり練習し、自由自在に描ける寸前にまでなったのですが、ふと休んでいるうちに、
すっかりできなくなってしまいました。それ以来、曲線は「鉛筆ツール」でペンタブレットを
使って描いています。簡単に描けるのはいいのですが、アンカーポイントが多くなるので、
それに比例してファイルサイズが大きくなってしまいます。ほんの小さな画像でも、
イラレのファイルは2メガバイト…などということも実際にありました(本当です)

それにしても、イラレのバージョン9から登場した「サブレイヤー」の機能は、本当に
便利なものだと思います。あれがないバージョン8だと、マジで素材づくりができません。



【本日の一曲】
「Fable Of Dreams」 by Lunatica

スイスのプログレッシブ・ゴシック・メタル・バンドLunaticaの2枚目のアルバムにして、
日本でのデビュー作となるアルバム「Fables & Dreams」に収められた一曲です。
女性ヴォーカルによる伸びやかで優しいハイ・トーンな歌声に、男性のややダークな
コーラスが混じっています。主旋律はキーボードで組み立てられ、あまりギターでの
エッジを際だたせないのが特徴です。疲れたときや気分を落ち着けたいときなどに、
ゆっくり聴きたい曲でもあります。ちなみにこのアルバムには、日本版ボーナスとして、
この曲のリミックス版が収録されています。ギターでのリフをより際だたせ、時間もやや
短縮させた内容になっています。聞き比べてみると面白いかもしれません。
http://www.lunatica.ch/

コメント ( 4 ) | Trackback ( 0 )




どうも、「南風博物館」館長の南風です。

サイト制作の段階を追って、さまざまな技術に関してコメントをしております。
今回はロールオーバーという、簡単なようで難しい技術について語りたいと思います。

インターネットをしているとき、ボタンの上にマウスカーソルを重ねると、いきなり
色が薄くなったり、文字の色が変わったりしますよね。あれを「ロールオーバー」といいます。
正式には「ロールオーバーイメージ」といいまして、JavaScriptという特殊な方式を使って、
マウスカーソルが重なったときに画像を入れ替えるようにという命令を与えているのです。

今までわたしが使ってきたソフトは、どれもきちんとロールオーバーが作れるもので、
簡単な操作で自動的に、JavaScriptの構文をコードの中に書き込んでくれましたが、
それぞれのソフトの間で、作り方はまったく違っていました。覚えるのも大変です。
現在わたしはDreamweaver 8というソフトを使っていますが、今まで使ってきた中では、
これが一番少ない手順でロールオーバーを設定できるような気がしています。
ホームページ・ビルダーではウィザード方式になっていて、初心者でも簡単に
ロールオーバーを作ることができましたが、いくつも作るとなると、ウィザードでは
正直言って面倒で時間がかかるのです。その反面、Dreamweaverではウィザードといった
気の利いた機能はありませんでしたが、「参照」ボタンで連続的に画像を選ぶことができ、
同じダイアログの中でジャンプするページのURLまで設定できるのですから、早いです。
でも、わたしはまだその他のページを作っていませんので、ジャンプさせるべきURLを
設定することまではできないんですけどね。それはまだ先の話だと思います。

ところが、ここからが問題です。
どういうわけかDreamweaverでロールオーバーを作り、実際にブラウザで見るときになると、
Windows XP SP2だと警告が発生し、「このActiveXを許可しますか?」が出てくるのです。
JavaScriptが遮断されることは予想していましたが、ロールオーバーのスクリプトまで
遮断してしまうとは思いませんでした。ホームページ・ビルダーでは警告が出ないのに、
これはなにゆえ? ということで、わたしは思わず頭を抱えてしまいました。
トップページの段階でActiveX警告に引っかかっていたのでは、とても公開できません。
「JavaScriptはVBScriptなどよりも、ずっと安全なはずだ!」と思っても始まりません。
それとも、Dreamweaverが生成するJavaScriptが特殊で、IEの警告に引っかかるのだろうか?
わたしなりにいろいろ試してみましたが、どうしても警告が出てしまうのです。

いくらやっても自力ではどうにもならず、ついに参考書とネットに頼ることにしました。

参考書を見ると、この現象がどうしても起こることが、前提として書いてありました。
それなのに、それを回避したり起こらなくするような方法は、どこを見ても書いてありません。
起こる不具合を避ける方法ではなく、一時的に解除する方法だけを解説しているのを見ると、
どうやってその不具合をわたしのトップページで伝えようか…と思ったものです。

どうしたものか…と何気なくネットを探していたとき、Dreamweaverで作ったロールオーバーを
含むページをIEで閲覧すると、ActiveXコントロールのエラーが出てくるのでどうすればいいか、
そういう内容が書かれた技術情報を集めた掲示板を見つけたのです。それを見ると、
公開前のページをブラウザで見るときに限って、この警告がでるのだそうです。
本当かな? とは思いましたが、考えてみれば世界中の数多くの人がこのソフトで
Webサイトのトップページをデザインしたわけですし、多分アップロードすれば大丈夫…
だと思うことにしました。今ではまだアップロードするべきページがなく、確かめられませんが。

このボタンには、JavaScriptだけでなくDHTMLの機能も付ける予定です。
難しいことはないですよ。参考書を見ながらやれば、早く覚えられますし。

コメント ( 0 ) | Trackback ( 0 )




どうも、「南風博物館」館長の南風です。

今日は、「外部スタイルシート」というものについてお話ししたいと思います。
機能としてはものすごく便利なものなのですが、作り方は一筋縄ではいかないのです。

スタイルシートの設定というのは、そのページの中に、そのページだけで動くように
書き込むことができます。こうすることで、各ページで個別のレイアウトを作れます。
通常はそうするのですが、それだけでなく、いくつものページに共通のレイアウトを
適用したい場合は、スタイルシートを別のファイルにし、ページはそれを参照することで
いくつものページで共通の設定を反映させることができるのです。この便利な機能を、
「外部スタイルシート」といいます。これの作り方は、ソフトによって違います。

わたしの知る限りでは、Adobe GoLive CS2ではサイトを作ると、それのトップページに
関連づけられた外部スタイルシートを勝手に作ってくれます。名前も「basic.css」に
デフォルトで決まっていました。こうすれば、いちいち外部スタイルシートを作らなくても
いいのです。これは便利でしたが、初心者で外部スタイルシートのことがよくわからないと、
ページ内のスタイルシートと外部スタイルシートを使い分けるとき、内部か外部か、
どちらで設定をするべきか迷うことになってしまいました。わたしは便利だと思いましたが

ところがMacromedia Dreamweaverやホームページ・ビルダーなどでは、初期設定だと
外部スタイルシートを自動で作成してくれるわけではなく、あらかじめ自分で作成して
おかなければならない仕組みでした。もしくは特定のページで作った内部スタイルシートを、
外部スタイルシートとして書き出すという方式になっています。これはこれで便利なのですが、
スタイルシートというものの特性をしっかり理解しておかないと、こんがらがってしまって、
ページの中でのレイアウト設定がめちゃくちゃになってしまう恐れがあるのです
その面では、GoLiveの方式が一番無難で、わかりやすいのではないかと勝手に思っています。

わたしは今回、ページを新規作成するときに、文字の大きさや色、行送り、フォントといった
基本的なことも決めてから作り始めました。Dreamweaverではこうした設定も、基本的には
スタイルシートで決めることになっているのです。今までのソフトではHTMLで決めていました。

そのうち、わたしはレイアウト設定をページごとにチマチマやるよりも、外部スタイルシートで
横断的に決めておいた方が楽かな、と思うようになったのです。でもこういうことは、
作り始める前から気づいておかなければならなかったんでしょうけどね…。
でもそうとは気づかないわたしは、既存のページのスタイル部分を選んで、外部へと
書き出すことにしました。Dreamweaverには、書き出して新たにCSSファイルを作るという
機能が用意されているのです。いい名前が浮かばなかったので、「basic.css」にしました

それなのに…外部スタイルシートに参照しても、レイアウトが適用されません。
「これは、なにゆえ?」と、原因の分からないわたしは、あれこれやってみた結果、
どうにか設定を複数のページに適用させることができました。そこで原因もわかりました。

ページ全体にフォントや文字の大きさなどを適用するときは、「body」というタグに
設定を反映する書式(クラスとプロパティ)にしなければなりません。しかしわたしは、
外部スタイルシートに書き出す前、基本設定をbodyではなく「table」というタグに
適用していたのです。これではページ全体ではなく、表組だけに適用されるレイアウトしか
設定できていないことになります。これはわたしが以前からの癖で、ページのレイアウトを
表組の形で作っていたために起こったミスでした。以前であればそれでよかったのでしょうけど。

それでも、外部スタイルシートは便利な機能です。
これからは個別設定を極力抑え、ページ横断的な外部スタイルシートを使いたいと思います

コメント ( 0 ) | Trackback ( 0 )




どうも、「南風博物館」館長の南風です。

「サイト制作日誌」なんですから、もっとサイト制作に関する内容を書こう…。
わたしはつい先日、そう思いました。でもたまに時事ネタや歴史ネタに脱線することは
変わらないと思います。どうかご諒承のほど、よろしくお願いします

今回は、イラレのデータについて熱く語ろうと思います

サイトを作るうえで抜きにできないのは、画像の制作と加工だと思うのです。
グラフィックデザインに関しては誰からも習わず、数年前までは「どこの世界だ」と
言わんばかりの門外漢だったわたしでも、どうしても避けては通れません。
だからといって、高価で多機能なソフトを使ったとしても、いいデザインを実現できるとは
限りませんし…。むしろそうした安易な考え方をするならば、ウィザードを使うことで、
対話形式で流れ作業のように高精度な画像ができてしまう…そんなソフトを使えば
いいのです。実際、わたしもホームページを作り始めた当時は使っていました
IBMの「ホームページ・ビルダー」にバンドルされていた「ウェブアート・デザイナー」は
今から考えてもすごく秀逸で、簡単で、完成されたソフトだったと思います。
保存形式に汎用性がまったくない、ということを除いては…ですけどね。

というわけで、わたしは現在、サイト用のアイコンにはAdobe Illustratorを使っています。
しかも最新版のCS2ですよ!(自慢)使いこなせているかは、別の話として…

イラレは高性能です。しかもそうした精度の高いアイコンやイラストを、すごく精緻に
描くことができます。「ベジェ曲線」という、加工が容易な形式を使っているからです。
前バージョンのCSからは、立体画像を簡単に作れるツールも登場しました。
わたしも一度使ってみましたが、「今はまだ、いらないかな…」という感じでした。

ところがどうしても人間というものは、前に使っていたものと現在使っているものを
比べたがるものなのです。高いソフトを買ったのに、以前の安価なソフトよりも性能が
劣っているとは考えたくない…という心境(or願望)がそう思わせているのでしょう。

確かにイラレのデータは伸縮自在、色の適用や文字の乗せ方、高度な曲線の描き方など、
ぞこらのソフトには絶対に真似できない機能が揃っているのですが、わたしとしては、
「ウェブアート・デザイナー」にはあった、テクスチャの適用と縁取りのカスタマイズといった機能が
弱いのがどうしても気になってしまいました。できることはできるのですが、そのための
プロセスが異様に難しいのです。いろいろなことができる反面、選択肢が多すぎて、
逆に煩雑になってしまっているのです。プロ用のソフトだから、仕方ないか…

仕方なく縁取りやテクスチャのある画像を作るときは、Photoshopを使っています。
Photoshopには「レイヤースタイル」という、すごく親切で簡単な機能が揃っています。
これを使えばどんな画像も「あれよあれよ」という間に作られてしまうのですが、
所詮フォトショはペイントソフト。文字やシェイプ以外はピクセルとして扱われます。
保存するときはどうしてもラスタライズしなければならず…それが不便なのです。

またわたしは、Fireworksとかに流れてしまう運命なのでしょうか…

コメント ( 0 ) | Trackback ( 0 )




どうも、「南風博物館」館長の南風です。

今回は、Webサイト作成の勉強をしていて感じたことを書こうと思います。

HTMLには、「リスト」というタグが用意されています。箇条書きができます。
単なる黒丸で箇条書きすることもできますし、番号を付けたり、特定の図形を先頭に
置くことだってできます。この先頭に置かれるものを「ブレット」といいます。

このブレットは、CSS(Cascading Style Sheets)では画像に置き換えることができます。
この機能を「リストアイテム」といい、CSSの構文の中でその画像のURLを示すことで
ブレットを画像にすることができるのです。ですから単なる黒丸を赤丸にしてみたり、
矢印マークにしてみたり、何かの似顔絵にしたりもできるのです(しないかな?)。

ところがここで、問題発生
リストアイテムを文字の大きさに合わせて作ると、どうしても上に寄ってしまうのです。
もちろんそのためには文字を大きくするよう指定すればいいのですが、あまりに大きいと、
デザイン的にどうかな、というところもあります。わたしの場合は基本的に文字の多い
サイトを作る予定ですので、あまりに文字が大きくては、サイトの面積が広すぎて
しまうのです。せっかく文字の大きさを指定できるようになったのですから、
今度こそわたしの思うがままの大きさにさせて欲しい…というわけで、どうしても、
新たに作るサイトでは「文字は13ピクセル!」を譲ることはできなかったのです

そこでやむにやまれず、わたしは小細工をすることにしました。
文字の大きさ(13ピクセル)と同じ大きさのリストアイテムを作るとズレるのであれば、
少し大きめなものを作ってやれば、ズレても視覚的にはわかるまい、と考えたのです。

しかしこれが、大誤算。上に寄ってしまうことには変わりがないので、大きくすると、
行送りが固定しているだけにリストアイテム同士がくっついてしまったのです
というわけで、リストアイテムそのものを大きくするという方法は諦めました。

しかしわたしは諦めません。こうなったら最後の手段です

小細工もここまできたら職人芸です。以下の方法で作ってみることにしました。

1.まず行送りを広めに作る。13ピクセルならline-heightを18ピクセルくらいに。
2.今度はリストアイテムを下に片寄ったものにします。リストアイテムそのものの大きさは
以前のまま13ピクセルとしますが、画像自体の大きさは天地15ピクセルに設定し、
リストアイテムを2ピクセル分だけ下にずらします。これで2ピクセル分、下に寄った
リストアイテムを作ることができたわけです。あとは透明ありのGIF形式で保存。
3.最後に、これをCSSで関連づけて、リストアイテムとして設定します。

上記の画面写真は、こうして作り上げたリストアイテムです
横向き三角が、きちんと文字の真ん中に来ていることがわかりますよね?
もしかしたらこの方法は、ハックと同じで業界では常識なのかもしれません。
でも参考書などではそんな「裏技」は載せてくれませんので、自分で見つけるのです。

とりあえず、これでひとつクリア…というところでしょうか

コメント ( 0 ) | Trackback ( 0 )




どうも、「南風博物館」館長の南風です。

昨夜、Dreamweaverで初めてのサイトを作ってみました。
でもまだアップロードしていません。あくまで「自分のパソコンに」作っただけです。

どのソフトも、手持ちのパソコンに「ローカルサイト」を作らせる仕組みになっています。
ローカルサイトとは逆の言葉は「リモートサイト」といい、すでに公開されているサイトです。
わたしはすでに公開されているサイトを持っているのですが、それを運営する傍ら、
新たなサイトをオープンさせようとしています。もちろん公開後は、旧サイトは消します。
でも旧サイトも、それはそれで努力して作ったものですので、どこかに残したいのですが…
だからといって残すにしても、自分のパソコンのローカルサイトとしてになるでしょうね。
わたしはプロバイダが運営するホームページスペースに登録している身ですので、
保存容量には限りがあります。自分でサーバを持っているなら話は別なんですけどね…。

サイトを作るとまず求められるのが、トップページの作成です。
Dreamweaverではそういう規定はないのですが、すでに自分のURLを持っていますので、
それと同じディレクトリを維持するためには、同じフォルダで同じファイル名に
しておこうと思い、先にトップページのアウトラインだけでも作ろうと考えたのです。

そういうとき、トップページの名前はどうしようか…と考えてみました。
ブラウザにもよると思いますが、URLの最後を「/」にした場合、ブラウザは自動的に
トップページと思われるファイル名を探しに行くのだそうです。またそれはCGIなどによって、
プロバイダがシステム化していることもあります。わたしの場合は後者です。
わたしの場合は、「index」にすることにしました。以前もそうだったからです。
プロバイダの中には「welcome」や「top」でもいいというところもあるそうですが、
indexの方が一般的だし、よく見ますのでこれを選んだわけです。

それと最後は、拡張子ですね。
Macintoshをお使いの方には特に注意が必要です。Macには拡張子がありませんから。
拡張子とは、ブラウザがそれをWebサイトだと判断するために必要な接尾語です。
識別子というものもありますが、それと意味は同じですね。Macでは拡張子に頼らず、
ファイルに作成アプリケーションの情報も埋め込むので、その必要がないのです。
わたしの場合は、「.html」という4文字のものを選ぶようにしています。
最近ではそうでもないのかもしれませんが、サーバのOSがWindowsなら3文字、
それ以外なら4文字にするべきだと教わった経験があります。Windowsにおいては、
.htmでも.htmlでも両方をHTMLだと判断してくれます。しかしUNIXやLinuxの中には、
3文字の.htmではHTMLだと判断してくれないものもあると聞きました。今は違うかな?

ちなみにこの頃みんなが使っているXHTMLも、拡張子は.htmlのままだそうです。
構文の最初にあるDTDの部分で、そう宣言すればみんなXHTMLになるのです。
以前のHTML 4.0との互換性を考えるなら、「XHTML 1.0 Transitional」がいいです。

ともあれ、わたしにとってこれが初めて作る、XHTMLのサイトになるわけです。
少しずつでも勉強しながら、サイトを構築していきたいと思っています。
あとはスタイルシートを外部参照にするか、埋め込むかの判断をしなければなりません。

コメント ( 0 ) | Trackback ( 0 )




どうも、「南風博物館」館長の南風です。

先日ついにDreamweaverを買いましたが、まだサイトを作り始めていません…。
というより、平日では仕事が忙しくて、なかなか集中できないのです。
まとまった時間ができたら作り始めようと思っていますが、まず勉強から入りたいと思います。

よく「使っているうちに覚えるよ」とはいいますが、わたしはそれが信じられません。
あれこれ試しているうちに上手になるというのはあくまで昔の話で、現在ではそれは
通用しないように思います。なぜなら、あまりにも多機能になってきたからです。
せっかくの機能も、誰にも習わずに試しているだけではその存在に気づきませんし、
正式な使い方がわからなければ、たとえ高性能な機能でも宝の持ち腐れなのです。
…というわけで、わたしはそのソフトを使い始める前に、予備知識を得るようにします。

でも実のところ、ソフト自体は少し使ってみたんですよね

使ったといっても、パレットやツールバーの位置をカスタマイズしたり、基礎表示の
フォントや色を少し変えてみただけなんですけどね。特にソース表示の部分を。
わたしは「ホームページ・ビルダー」での表示の美しさに惚れ込んでおりまして、
新しいソフトを導入しても、その表示形式をどうにか継承できないかと模索するのです。
無駄な努力に見えますが…決してわたしにとって、無駄な努力などではないのです
たとえ同じにできなくても、タグの色を青にし、CSSのセレクタを紫色にし…といった、
色調の面はどうしても譲れません。それでいくらかでも見やすくなるのでしたら。
でもそれで、書き間違いがなくなるという保証にはならないんですけどね…。

それにしても、Dreamweaverの「プロパティインスペクタ」は使いやすい機能ですね!
画面下にいつも表示されている横長のパレットなんですけど、わたしのお気に入りです。
デザイン上のあらゆる設定を取り扱うことのできるパレットなのですが、クリックしたものが
画像であれば画像用の、テキストであればテキスト用のプロパティが表示されます。
サイト作成ソフトにはいろいろなパターンがあり、ホームページ・ビルダーでは、
物体を選択してから「属性」ダイアログを呼び出す形式でした。
(でも最新版の10では、プロパティインスペクタらしき機能が登場しましたが)
それがいちいちダイアログを呼び出さなくても、その場で変更できるんですよ!

そこで思ったことがひとつ。
プロパティインスペクタの中に、釣り竿につけるリールのようなアイコンがあります。
試しにクリックしたところ、黒い糸のようなものが引き出されてきました。
「こ、これはもしや…ポイント&シュートではッ?」と思ったのは、わたしだけでしょうか

ちなみにポイント&シュートとは、GoLiveにあったファイル選択用の機能です。
糸を引っ張って目的のファイルにドロップすれば、リンクが張れるというものです。
わたしはあの機能が面白くて、便利なのかどうかわかりませんが好きでした。
それがDreamweaverでもできるなんて…何だか夢のようです(大げさですが)。

…どちらのパクリなのか、ここでは詮索しないことにしましょう

コメント ( 0 ) | Trackback ( 0 )




どうも、「南風博物館」館長の南風です。

CSS(Cascading Style Sheets)の必要性をとみに感じるようになったわたしですが、
これは聞きかじりだけで制作を進めると、どうにもならなくなるという悪い例です

CSSはホームページの見栄えを設定する言語で、元となるHTMLのコードの中に書き入れる
こともできますし、外部にCSSだけのファイルを作っておいて、そこにリンクさせて、
その設定をホームページに反映させるという方法もあります。前者ではページの
部分部分で細かい設定ができますし、後者では複数のページで一貫したデザインを
保つのに便利です。最近ではその両方を併用するのが流行になっているようです。

わたしは以前、ホームページ・ビルダーで外部にリンクさせるCSSを作りました。
ブラウザの設定で文字を大きくされると、デザインが崩されてしまうため、わたしの方で
強制的に文字の大きさを一定にさせてしまおうと考えたのです。その外部CSSでは、
文字の大きさを「13px」、フォントを「MS UIゴシック、OSAKA」に設定し、行間も
「22px」にするなど、なるべく読みやすい環境を全部のページに適用しようとした
わけです。こうすればページごとに一定のデザインが確保されるのです。

ところが、どういうわけか設定が反映されず、以前とほとんど変わりません。
でもその中でもわずかに、設定が反映される場所もあるのです。これはおかしい。
原因を調べてみると、わたしは以前から、知らずにCSSを使っていたのでした。

わたしのサイト「南風博物館」でページのソースをテキストエディタで見てみると、
「span style」というタグがたくさんあるのにお気づきのことかと思います。
このタグを使えば、「p」というタグで区切らなくても、文字単位で色を塗ったり、
大きさを変えたり、行間隔を設定できたりします。まるでワープロの書式みたいに。
「b」とか「color」とかいったいろいろなタグの代わりにもなるのです。

「これは便利だ!」というわけで、わたしもさっそく使い始めました。
確かに文字単位で書式の設定ができます。こんなに便利な機能があるんだ、とばかりに、
わたしは自分のコードの中にこのタグをどんどん書き入れていきました。
ちなみにホームページ・ビルダーではこのタグを自動筆記すると面倒ですので、
自分でわざわざソース編集モードにし、自分でタグを入力していたわけです。

ところがこれは、CSSの一種で「インラインスタイル」というものの仲間だそうです。
つまりHTMLの中で独立的に機能するCSSのことで、その周りでいくらスタイルを設定しても、
インラインスタイルがすべてに優先します。全体を一定にした書式の中で、
その部分だけ太くしたい、色文字にしたい…といった要求を満たすためです。

だからわたしのページには、外部CSSの設定が反映されなかったのです。
もし反映させたければ、span styleのタグをすべて削除するか、そのタグの中で、
新たなプロパティとして書体、大きさ、行間、色…などをいちいち設定しなければ
なりません。わたしは行間だけを設定していたので、その他のCSSでの命令が
届かなくなっていたのです。しかもわたしは、このタグでほぼすべての文字を
囲んでしまっていたのでした…。律儀というか、完全主義というか

今度リニューアルするときは、そういった面にも気を配って作ろうと思います。

でもそれまでは、現在の状態のままで更新し続けなくてはなりません

コメント ( 1 ) | Trackback ( 0 )




どうも、「南風博物館」館長の南風です。

わたしは今、ホームページのリニューアルを進めています。
しかしまだ始まったばかりで、デザインの勉強をしながらといったペースです。
勉強の内容は、CSS(Cascading Style Sheets)についてが大半です。
CSSについての参考書は、以前に比べて本当にたくさん発行されるようになりました。
それほど普及したということなんでしょう。今ではCSSで作られたサイトをどこでも、
普通に見られるようになりましたからね。Web標準とも言われていますから。
そしてわたしのサイトも、Web標準に準拠しようと思い立ったわけなのです。

そのためには、サイト作成ソフトを使います。
一般的にはMacromedia Dreamweaverというソフトが有名で、ほとんど世界標準です。
しかしわたしはどういうわけか、Adobe GoLiveというソフトを使っています。
決して安くはないソフトですが、わたしが昔から使っていたPhotoshopとか、
Illustratorとかいったソフトと同じメーカーが作ったもので、上記のソフトと
親和性がすごくいいのです。Dreamweaverを買うと、それと親和性のいい、
Fireworksというソフトを新たに買わなくてはならないと考えたのです。
でも結局Macromedia社は、Adobe社に買収されてしまいました。
いつかはDreamweaverでも、Photoshop画像がバリバリ動くかもしれませんね。
そうなったらわたしは、迷わずDreamweaverを買うでしょう。便利ですしね、あれ。

GoLiveでCSSを使うとき、上に掲げた画面を使います。
作るときは便利ですが、なかなか習熟するのに時間がかかってしまいます。
本当はテキストエディタなどで書くのが、CSSの正しい姿だと思います。
しかしコーディングを必要とせず、直感的に記述することができるのであれば、
そんな便利な機能を使わないのはもったいないじゃないですか。
ただし、その便利な機能を覚えるのですら、難しいんですけどね。

試しにわたしは、このブログの画面をカスタマイズしています。
CSSで作られたもので、自分で簡単なカスタマイズができるものを使っています。
といっても、変えることができたのはほんの少しで、フォントとか色調だけですが。

このCSSファイルを、GoLiveとかで編集させてくれないかな~、などと思います。

コメント ( 0 ) | Trackback ( 0 )



« 前ページ