ライフスタイルをデザインする建築家の・・・ライフスタイル

ライフスタイルをテーマに建築家の日常を綴っています。
最近は子育てを中心に時々建築話、旅行記や映画の事を綴っています。

■CSSレイアウト崩れ対処でハマル~safariに対応しました。

2009-10-07 22:55:43 | ■デジデジトーク
やっとなんとかblogの体裁が整いました。
(HPの一部・建築情報コーナーも変更済み)

gooブログの場合,
Javaスクリプトはもちろん、インラインフレーム(ページの中に窓を設ける)やFlash(アニメーション)が使えない為、満足のいくレイアウトにするのにとても苦労しました。

一部、gooが利用を許しているブログパーツもあるには有るんですけど・・・
デザインがかっこ悪くてイロイロ改造を試みましたが、ことごとくタグとよばれるHTML言語を跳ね除けられ(利用できないタグは変換して消されてしまう)、うまく利用する事が出来ませんでした。

とりあえず、本来張り込む位置でないものを、座標入力で命令を与えて、擬似的にHPっぽく見せる事になんとか成功しました。

しかし、曲者がsafari(サファリ)とMozilla Firefox(モジラ)対応。
一般的なブラウザはIE(インターネットエクスプローラー)ですが、商用?でも利用する為にはこれらのブラウザ(インターネット閲覧ソフト)利用者をないがしろにするわけにはいきません。
特にモバイル端末での利用で爆発的に?利用者の増えているiPhoneのブラウザであるサファリにはキチンと対応したい所です。

しかし、なんでこんなにもブラウザによって見え方が変ってしまうんだろう。
その原因の一番は、ブラウザによってレイアウト枠の余白の考え方が全く違うんですよね。
その為、レイアウトを綺麗に見せようとタイトな設計をしていたページほどデザインが崩れてしまったりして・・・

直すのはなかなか容易ではありませんでした。
透明のピクセルを利用して表のレイアウトが崩れないようにつっかえ棒にして使ったりと見えない裏技を使ってみたりも。
ドキュメントタイプという宣言文が古いままだった為上手く表現されなかったり原因はいろいろ。

じつは、まだipodtouchでblogを見た時のメニューの位置の調整が上手く出来ていないのだけど、コレは諦めました・・・

---

HPの方も改定を進めています。
約10年前ごろに旅行写真を友人らに公開するのが目的で作ったHPですが、徐々にコンテンツを増やし膨大なページ数になってしまいました、
作り始めた当初は知識も余りなく、適当に作り始めたんですけど・・・

コレがいけませんでしたね。
昔は主流だったフレーム構成のHP。
今は検索エンジン(googleやyahoo)がこの種のページを推奨していないんですよね。検索に引っかかりにくくなる・・・

シンプルにかっこよくと思い、1ページにダラダラと書くのが嫌いなのでページをめくる感じで作っていたため、ページが増え過ぎてしまった私・・・
その一つ一つのを直すのは膨大な作業量になります。

---

とりあえず、まだページの増えていないところから本格的にレイアウトチェンジをしています。
CSSという外部スタイルシートを利用して、一括してページデザインを変更できる構成に変更中です。

しかし、今までのフレーム処理のHPは大変見やすく、感覚的に使いやすく、さらに作るのが簡単なすばらしいものだったんですけど・・・
そのフレームを使わずにフレームと同じような動作を出来ないかなぁと考えに考え抜いたデザインになりました。
でも、本職の方が見たら見劣りするかとは思うのですが・・・

---

ポイントは、
情報ページとして1ページに大量の情報を載せたい。
しかし、だらだらと文章だけのページにもしたくない。
ページ内のコンテンツを簡単に探せるようにしたい。
動くHPでありたい。
目的のものを探す楽しみのあるHPにしたい等等。

とりあえず、独学でのWEB造りなのでコレが今の限界。
後は少しづつ他のページにも反映していきます。

■まずは住まい造りの情報コーナーのみ変更しました

しかし、アルファベットだの記号だの眺めながらの変種作業はとても目が疲れます・・・
手で書く感覚で作れたらいいんですけどね。
ホームページビルダーでは機能が足りなくほとんど手打ち・・・

最新の画像もっと見る

post a comment

ブログ作成者から承認されるまでコメントは反映されません。