サイトのデザインをブラッシュアップしてみました。
iPhoneに最適化
どうも、a-tak.comはiPhoneで見たときに見づらい・・・、ということでiPhoneでも見やすいページを目指してデザインをいじってみました。 もしかしたら気づいている人もいるかもしれませんが、昨年末あたりから微妙にデザインが変わったり、なんか少しずつパーツが無くなったりしているのはそのせいです。 一気にいろいろやる暇無くて、家に帰って地道に少しずつ変えてました。
まず、見にくかったのは、ブログの記事。 ダブルタップして拡大してもコンテンツの幅が広すぎて文字が見づらかったのですね。 そんなわけで、iPhone用のcssを用意して、iPhoneの時はメインコンテンツを狭めに表示するようにしました。
本来なら
<link media=”screen and (min-device-width: 481px)” href=”https://a-tak.com/xoops/xoops.css” type=”text/css” rel=”stylesheet” /> <link media=”only screen and (max-device-width:480px)” href=”/css/iphone.css” type=”text/css” rel=”stylesheet”/>
という感じで、画面の横幅で480pxかどうかで判断してcss切換をするらしいのですが、なぜか上の行のPC用のCSS設定が有効にならなかったので、
<link media=”screen” href=”https://a-tak.com/xoops/xoops.css” type=”text/css” rel=”stylesheet” /> <link media=”only screen and (max-device-width:480px)” href=”/css/iphone.css” type=”text/css” rel=”stylesheet”/>
こんな感じでPC用CSSはiPhoneでも読んでおきつつ、iPhone用で設定必要なCSSを追加で読み込み、上書きして対処しました。
全体的にシンプルにしてみた
ついでにPC用も3カラム構成から2カラム構成に変えて、思い切って不要な要素は排除した。 トップのバナーも横幅とりすぎてiPhoneで見るといまいちだったので排除。 他にも何があったかすでに覚えてないけど、削除、または、左のカラムに統合した。
全体的な幅が狭くなったので、CSSのボーダーで囲んでグラデーションの背景を入れて上品な感じにしてみた。 背景は縦長?いグラデーションの画像を作って幅1ピクセルで切り抜いて、それをx-repeatで背景に設定した。 さらにInternet Explorerでは真四角でおもしろくないけど、ChromeやSafariやFirefoxで見ると、角丸のWeb2.0的なデザインで表示されます。 CSSって便利ね。
しかしIEでみると背景のグラデーションに変な切れ目がある。 なぜ?!
Twitterの引用ボタンをつけた
時代はTwitter! ということで、Twitterに簡単にRTできるボタンを追加しました。 こちらを参考にさせていただきました。 ありがとうございます。
一応一段落
これで、だいぶ前よりもごちゃごちゃ感がなくなったかな。 今までバナーがあったところがあいて、妙なスペースが空いてるのでここをどうしようかなってとこだな。
#下にPHPのエラーがたくさん出ているのはご愛敬
