« さようなら、現デザイン! | Home | デザインリニューアル第二弾! »
2007年8月15日
デザインリニューアルしました
本日、当ブログ初の、デザイン全面リニューアルをしてみました。どうでしょう?
ちなみに前のはこれです。
旧デザインの時代が長かったので(開始後ずっと)、ちょっと違和感あるかもしれません。
ただ、まだ確定ではないです。
この後、Google AdSense入れたり、いろいろ微調整したり、使いにくい部分変えたりという作業を、まったりと進めていくと思います。
一番悩んでいるのは、段組部分。
はっきりいって、三段組の一番右にメインの記事部分を持ってくるのって、ユーザビリティ的にというかアクセシビリティ的に・・・
よくないよな、と。
解像度1024×768ピクセル以上のディスプレイの人が、ブラウザを最大化して見ている分にはいいけど、ウィンドウを少し小さめに開いて見ている人や、800×600ピクセルの画面で見ている場合、記事が途中で切れてしまい、下のスクロールバーをいちいち右にスライドさせないと、記事が読めなくなってしまうんです。
横幅も、800ピクセルくらいにしておいたほうがいいはずなんだけど、これは「実」部分で900ピクセル。両脇に少し余白とっている分を入れると960ピクセルになります。太めすぎかもです。
なので、仕事でブログレイアウトを考えるんだったら、絶対こうはしてなかったんだけど、個人的には、マウスが画面右半分にあることが多いので、記事内のリンクをすぐクリックできるよう、右側のスクロールバーと、記事本文の間に、余計なものがないほうがすっきりするんです。
両側をサイドバーではさむと、
ちょっと閉塞感を感じるというのもあります。
個人的な「すっきり感」か、アクセシビリティか。
どっちを優先すべきかと言ったら、間違いなく後者なはずなんだけど、ちょっともう少し悩んでみようかなと。
変更は、スタイルシートを数行直すだけで簡単にできるので。
試しに、段組の中の要素を入れ替えたものも、
この後作ってみます。
+++
配置変更したものを作ってみました。
「position: absolute」とか、マージンとかきちんと理解してないので、ブラウザによってぼろぼろになってしまってる可能性ありますが・・・(ちゃんとチェックしてないもので)

現在のレイアウト(記事を左端)
悩む~!
コメント(15)
コメントする
検索
カテゴリ
- バイク&クロスカブ (3)
- [旅]いわき海辺ウォーキング2014年3月 (10)
- [旅]座間味島2014年2月 (6)
- [旅]中国生活2013-2014<広東&雲南旅行編> (47)
- [旅]中国生活2013-2014<海南島編> (16)
- FUSION IP-Phone SMART (6)
- 中国インターネット事情 (6)
- [旅]中国生活2013-2014<北京編> (49)
- デュアルソーダブルカッター利用体験 (5)
- [旅]八重山離島めぐり2013年1月 (9)
- 年賀状用の干支着ぐるみ (2)
- ランニング (2)
- マンション (1)
- ビデオ&カメラ&撮影 (3)
- 家庭用ウォーターサーバ (3)
- 大槌町「おおつちありがとうロックフェスティバル」 (2)
- 鳩の抱卵 (1)
- フォトシルクプラス (8)
- マラソン (5)
- 大槌町「きらりベース」 (5)
- [旅]余市マイウイスキー作り2012年4月 (6)
- コカ・コーラ ロンドンチャレンジ (3)
- [旅]与論島2012年3月 (2)
- 各国語でひとこと! (4)
- [旅]東日本一周旅行2011年末年始 (21)
- アイランダー (7)
- アイランダー2011 (7)
- ダイエット合宿 (15)
- 小型船舶免許&ボート (8)
- 備蓄 (4)
- 自宅でヘナ・タトゥー (2)
- ビジネス・ブレークスルー757ch (5)
- PR (50)
- 節電・節約 (7)
- 復興支援ボランティア (43)
- マイ・プロジェクト (1)
- 大人の「工場見学」 (26)
- 発酵食品を作るよ! (8)
- [旅]LLC乗りまくりの旅 (12)
- バリ島&ランカウイ島旅行2011年 (18)
- レビューその他 (2)
- ラー油鍋 (3)
- ラサーナ (1)
- 共同購入型クーポンサイト (6)
- ルミネスエアー (7)
- [旅]上海旅行2010年 (13)
- ミニサイト作りワークショップ (9)
- 各種サービス (4)
- [旅]さいたま市観光資源プレスツアー (11)
- スタイルプラス パワージューサー (5)
- [旅]東海道53次ウォーク (15)
- 趣味&遊び (7)
- [旅]エジプト・ギリシャ旅行2008年 (45)
- ハイボール (9)
- プチ断食 (8)
- コアリズム(動画) (4)
- オーダーメイド紳士靴 (14)
- Windowsムービー メーカー (5)
- 40代からの健康&ダイエット&美容 (4)
- インタビュー企画 (8)
- 美容 (60)
- 目指せ!中国語ぺらぺら (18)
- スピードラーニング中国語 (18)
- ファッション (41)
- 札幌ビアガーデン2007年 (9)
- 山崎蒸留所 (29)
- コンデンス除湿機 (4)
- N700系 試乗会 (14)
- ビリーズブートキャンプ (34)
- ロデオボーイ (7)
- リンクシェア見本市2007 (18)
- 育毛 (6)
- お花見 (41)
- パソコン&ソフト活用 (5)
- フランクリン・プランナー (9)
- ベドウィン・モバイラー (7)
- VAIO type R master (20)
- 動画編集 (92)
- WEBマーケティング (4)
- 飲食店 (31)
- インターネットで便利&お得&賢く (69)
- MacBook体験 (37)
- MONO-PORTAL (102)
- 健康&ダイエット (125)
- 参加レポート (241)
- [旅]韓国旅行2005年 (18)
- ホテル (4)
- 旅行 (168)
- [旅]中国旅行2004年 (11)
- [旅]シルクロード旅行2007年 (62)
- 本執筆 (45)
- 新型インフルエンザ対策 (17)
- 生活雑貨いろいろ (206)
- 本&音楽 (72)
- サイト運営マネタイズ (94)
- 気になるニュース (16)
- インテリア (7)
- 日記・コラム・つぶやき (436)
- フード&ドリンク (259)
- パソコン&周辺機器 (208)
- サイト運営 (253)
- LLP設立 (8)
- Movable Type (27)
- [旅]八丈島撮影旅行 (3)
- アフィリエイト (171)
- インターネット (1)
- クレバートリック2 (3)
- 汁なし坦々麺 (6)
- 鳥が大好き♪ (10)
月別 アーカイブ
- 2014年4月 (1)
- 2014年3月 (22)
- 2014年2月 (7)
- 2014年1月 (49)
- 2013年12月 (1)
- 2013年11月 (14)
- 2013年10月 (6)
- 2013年9月 (7)
- 2013年8月 (9)
- 2013年7月 (16)
- 2013年6月 (4)
- 2013年5月 (9)
- 2013年4月 (5)
- 2013年3月 (11)
- 2013年2月 (20)
- 2013年1月 (9)
- 2012年12月 (13)
- 2012年11月 (10)
- 2012年10月 (13)
- 2012年9月 (19)
- 2012年8月 (23)
- 2012年7月 (18)
- 2012年6月 (23)
- 2012年5月 (23)
- 2012年4月 (16)
- 2012年3月 (12)
- 2012年2月 (20)
- 2012年1月 (31)
- 2011年12月 (35)
- 2011年11月 (26)
- 2011年10月 (19)
- 2011年9月 (41)
- 2011年8月 (23)
- 2011年7月 (26)
- 2011年6月 (22)
- 2011年5月 (38)
- 2011年4月 (27)
- 2011年3月 (25)
- 2011年2月 (7)
- 2011年1月 (29)
- 2010年12月 (21)
- 2010年11月 (27)
- 2010年10月 (21)
- 2010年9月 (28)
- 2010年8月 (19)
- 2010年7月 (19)
- 2010年6月 (6)
- 2010年5月 (10)
- 2010年4月 (24)
- 2010年3月 (19)
- 2010年2月 (23)
- 2010年1月 (25)
- 2009年12月 (36)
- 2009年11月 (24)
- 2009年10月 (8)
- 2009年9月 (28)
- 2009年8月 (33)
- 2009年7月 (40)
- 2009年6月 (27)
- 2009年5月 (21)
- 2009年4月 (15)
- 2009年3月 (24)
- 2009年2月 (22)
- 2009年1月 (43)
- 2008年12月 (35)
- 2008年11月 (23)
- 2008年10月 (29)
- 2008年9月 (38)
- 2008年8月 (28)
- 2008年7月 (29)
- 2008年6月 (32)
- 2008年5月 (36)
- 2008年4月 (59)
- 2008年3月 (62)
- 2008年2月 (37)
- 2008年1月 (45)
- 2007年12月 (37)
- 2007年11月 (42)
- 2007年10月 (32)
- 2007年9月 (37)
- 2007年8月 (42)
- 2007年7月 (46)
- 2007年6月 (25)
- 2007年5月 (44)
- 2007年4月 (69)
- 2007年3月 (55)
- 2007年2月 (14)
- 2007年1月 (60)
- 2006年12月 (55)
- 2006年11月 (76)
- 2006年10月 (37)
- 2006年9月 (40)
- 2006年8月 (39)
- 2006年7月 (29)
- 2006年6月 (44)
- 2006年5月 (43)
- 2006年4月 (59)
- 2006年3月 (40)
- 2006年2月 (35)
- 2006年1月 (22)
- 2005年12月 (49)
- 2005年11月 (31)
- 2005年10月 (74)
- 2005年9月 (11)
- 2005年8月 (6)
- 2005年7月 (14)
- 2005年6月 (28)
- 2005年5月 (30)
- 2005年4月 (22)
- 2005年3月 (30)
- 2005年2月 (20)
- 2005年1月 (26)
- 2004年12月 (26)
- 2004年11月 (14)
- 2004年10月 (27)
- 2004年9月 (16)
- 2004年8月 (36)
- 2004年7月 (20)
- 2004年6月 (18)
- 2004年5月 (25)
- 2004年4月 (31)
- 2004年3月 (19)
- 2004年2月 (26)
- 2004年1月 (1)
- 2003年12月 (1)


IEだとちょっと上の画像タイトルがずれてるのかな。。
tomonoさん、
あ、ありがとうございます!
余計な改行を入れて、それきりにしちゃっていたので、そのせいかも。。。見直してみます。
Firefoxだと1カラムで縦に一列です。
しかも背景はグレー。
青のりさん、
それはひどい・・・。
途中でFirefoxでも確認したつもりだったんですが、だめだめですね。ありがとうございます。
> しかも背景はグレー。
考えてみたら、背景がグレーになるのは、今のブログのテンプレートと、以前のスタイルシートが組み合わさった時のような気がしてきました。(今のスタイルシートは、一部にしか背景グレーを使っていないので)
やはりリニューアル時は、スタイルシート名を変えて作った方がよかったのかもと反省。
こんにちは~!
わださんのレビューが左端からわかりやすく読むことができるようになって、レビューfanとしてはとっても嬉しいです。
が・・・トップの画像2枚がガクッとずれてますね・・・。
私はルナスケープってタブブラウザで見てます。
偉そうにすいません
私は普段ブラウザの横幅を800ぐらいにしています。
個人的には、本文が切れてしまって読みにくいので本文が左だとありがたい。。。
トップ上部の画像は、どっかで見たことのあるラベンダーですね(笑
FireFox2.0で見てますがOKです。
あ、替わった♪
(。・・。)(。..。)うん、記事本文中の気になることをサッとクリックできるのは、このデザインですよね~。
そういう感じでは使いやすいなぁ~と。。。
けど、わたしが今目指してリニュしているのも3番目の記事左デザイン。
でも2番目のが万人受けする気がして悩んでたところでした。
サイトを作るとき、私はまったくPCがわからない母に印象を聞いて決めるのですが、どうしても2番目のタイプが馴染みがあるようです。
ちなみに「この3つのブログ、どれが見たい?」と聞いたらやっぱり2番目の記事が真ん中のでした。
新しいデザイン、すっきりしましたね。
以前のも、落ちついた感じで良いと思っていましたが…。
今度のは、整理が良く出来ていて、使い勝手が良いなと感心しています。
私は、全くの素人ですので、とやかく言う資格はありませんが、左側に二列並んだのは、ちょっと違和感がありました。
慣れれば少しも苦にはならないと思いますが…。
変わりましたね。
個人的には2カラムがブログの最終形と思っている私ですが、
すきなデザインは2番目の記事中央タイプです。
MacBookで見てます。
OperaやFirefoxでは、表示に問題は無いようです。
Safariでは全然ダメ。
青のりさんの言われるように、1カラムで背景グレーです。
どうかSafariでの表示確認もよろしくお願いします。
オレンジスカイさん、
ありがとうございます!
トップ部分、大きさぎりぎりなのに、余計な書き方してしまっていたような気がします。シンプルに書き換えてみます。
たけにゃか、
やっぱそうだよね。で、800ピクセル以内で記事がでるよう、変更することにしました。
しんさん、
はい。あの時ローアングルで一生懸命撮影してたやつです♪ ただここ、時期見て色気のないバナーになる可能性大です。
みにぃさん、
悩みますよね・・・好みでやるより、一般的に使いやすくてなじみのある配列がいいんだろうなあと思いつつ、やっぱ好みに走りそうになってしまったり・・・。
hbritさん、
ありがとうございます。結局、左側に二列はやめることにしました。記事読みにくい人がいたのでは、意味ないなということで。今、新しい配列で作り直し中です。
yousay7さん、
2カラムか3カラムか、悩みますね。
つい欲をだして、あれもこれも入れたくなっちゃうのですが、それだと元のと同じになってしまうので・・・再度「すっきり」重視で考え直してみます。
takeshiさん、
ありがとうございます。
それで、自分もMacBookのSafariで見ているのですが、1カラム背景グレーという状態が、どうしても再現できないのです。もしかしたら、スタイルシート名を変更していないので、背景グレー指定にしていた前のスタイルシートが、キャッシュで残ってしまっているのかもと思いました。
もしか、どなたかSafariで背景グレーになってしまう方がいたら、試しに「キャッシュを空にする」試していただけると助かります。
たびたびすみません。
Safariでの表示問題解決しました。
和田さんのおっしゃる通り、以前のキャッシュが残っていたようです。
キャッシュを空にしたら、正常に表示されるようになりました!
ご報告します(笑)
takeshiさん、
ご報告ありがとうございます!
おかげでひとつ勉強になりました。ブログリニューアルする時は、スタイルシートの名前を変えないと、キャッシュが残ってしまう可能性が高いと言うこと。
普通、リニューアル直後のブログが崩れまくっていても、「古いスタイルシートがキャッシュで残っているのが原因」って思わないですもんね。
ありがとうございました。