2009年09月16日

XHTMLとIE6

ウェブサイト制作に興味のない方にはまったく関係ない話題ですいません。。。

ふくいわ耳鼻咽喉科クリニックのウェブサイトで画像表示機能を取り入れましたが、そのために導入したshadowboxというJAVAスクリプトをうごかすために、ウェブのDOCTYPEをXHTMLに変更しました。

ところが、これをIE6で確認すると文字の大きさや表示が崩れる不具合がわかりました。。。
もともとウェブサイトといいますのは、ブラウザの違い、さらにはOSの違いなどでデザインやフォントなどが大きく崩れがちなのですが、当クリニックではCSSをつかって極力どのパターンでも同じに見えるように調整していました。
今回の問題は、「CSSの設定が以前のDOCTYPE(transitional)に比べてより厳密に判断されるため」だそうです。

IE6は普段使わないPCに入れてあったので、確認が遅れてしまいました。。。

なので、IE6でアクセスされた方には一部見にくい部分があるかと思いますがあらかじめお詫びしておきます。でもIE7、firefox、Safariでは大丈夫だと思います。

昼間はクリニック院長、夜はウェブデザイナーという生活がまたしばらく続きそうです。。。

2009年09月13日

shadowbox 3.0bの設定

ふくいわ耳鼻咽喉科クリニックのウェブサイトに、画像表示用の設定変更を行いました。
今回から画像をクリックすると、ポップアップで大きな画像が表示されるようになりました。まだ1ページのみの対応ですが、今後整備を進めていきます。

ふくいわ耳鼻咽喉科クリニック・ウェブサイト「院内の設備」

この表示方法は従来、lightboxというJAVA scriptで行われていたものですが、最近新しく出たshadowboxというスクリプトを見つけたので、今回はこちらを導入してみました。

導入は非常に簡単で、本家HPでの指示通りにセッティングすると、Firefox3ではあっさり表示されました。
しかし、IE7ではうまく動かず。ここではまってしまいました。。。。

結果的には、「DOCTYPEの設定でIE7が互換モードになっていた」ことが原因で、shadowboxのスクリプトは「標準モードにしなければ動かない」という縛りがあったのです。散々紆余曲折を経てようやく動くようになったので、ここでは備忘録として必要な設定を記載しておきます。

1.DOCTYPEはXHTML1.0にする。
2.「!DOCTYPE」の前のXML宣言は入れてはいけない(IE6で表示されなくなるため)。
3.文字コードはUTF-8とする。
4.shadowboxの言語設定は日本語(ja)とする。
5.METAタグで「"Content-Script-Type" content="text/javascript"」を指定する。
6.ローディングアニメーションはshadowbox.css内の#sb-loadingに「background:url」で画像を直接指定する(画像は自前で用意する必要あり)。

特に5番目は最後まではまったところで苦労しました。非常に基本的なことなのですが、いままで設定ミスに気づかずに来ていました。。。

ウェブサイト制作、まだまだ奥が深いです。。。

2009年09月11日

こっそりアクセスカウンター

ふくいわ耳鼻咽喉科クリニックのウェブサイトは、Googleのウェブ分析ツールである「Google Analytics」でアクセス分析を行っています。さらにレンタルサーバのアクセス分析機能によりアクセス集計を行っていました。しかしこれらのデータは管理者しか見ることが出来ず、一般には非公開です。

そこで、「アクセスカウンターがウェブサイトにあったほうがいい」という多数のご意見もありまして、ようやく今回アクセスカウンターを設置することが出来ました。

下記のHPを参考に、Pearlで動作するCGIを用いてカウンター設置しました。
日計カウンタの設置方法

なるべく目立たないように、しかし誰の目にもとまるように、という相反する目的を達成すべく熟考した結果がこちらです。
新・ふくいわ耳鼻咽喉科クリニック・ウェブサイト

9月9日の段階で、既に10,176人のアクセスがありました(昨年11月1日開院)。ここからカウンタをスタートさせています。

今後ますますのウェブサイトご来訪を、スタッフ一同心待ちにしております。