サイトリニューアル

サイトリニューアル

Posted at July 18,2005 11:55 PM
Tag:[Blog, Record, Renewal]
リニューアル画像サイトリニューアルしました。以下主な変更内容です。ブラウザは WindowsXP+IE6.0/Netscape8.0/Firefox1.0/Opera8.0で確認しています。Mac 環境では確認できておりませんので予めご容赦ください。以下、主な変更内容です。
  • 3カラムスタイルはこれまで通りですが、絶対値指定ではなく float 指定によって可変3カラムを実現しています(IEでは幅を狭くし過ぎると中央のカラムがおちることがありますのでご注意ください)。また左右にマージンをつけ、下部にフッタを与えてコンテンツ全体を括るようにしてみました。随分前からこのスタイルにしてみたかったのですが、スキル不足でできませんでした。そういう意味では目標達成というところです。
  • 中央カラムのコンテンツを折りたためるようにしました。タイトルまたは概要後方にあるリンクをクリックすることで切り替えられます。折りたたみ状態も保持します。また折りたたみによって過度なスクロールを避けられるので、カテゴリーアーカイブと月別アーカイブはページ分割をなくしてみました。メインページは逆にページ分割を導入して1ページ毎の件数を減らしてスクロール量をさらに絞ってみました。
    なおこの機能はIEのみで、Mozzila系は不具合(またはスキル不足)のため折りたたみできない設定にしています(詳細は別途エントリーします)。
  • ページ内の空白を増やしたので左右のサイドバーを折りたためるようにして、コンテンツの情報量を確保できるようにしました。ナビゲーションバーの「«」「»」で切り替わります。これにより3カラムおよび仮想的な2カラム/1カラムを実現しています。状態も保持します。
    本当は折りたたんだ場合に反対のカラムへメニューを表示する予定でしたがIE系のブラウザで正常に動作しないことと、ページを切り替えた際に状態を保持する実装が面倒なため、とりあえず隠すだけにしました。
  • タイトルバナー下にナビゲーションバーを追加しました。ナビゲーションからのジャンプ時はロールオーバー状態を保持してユーザビリティを向上させています。右サイドバーの「menu」をクリックすると折りたたむこともできます(お遊びレベル)。
  • 各アーカイブページにパンくずリスト(らしきもの)を追加して現在位置を把握できるようにしました。
  • スタイルシート切り替えにより公開テンプレートのデザインを表示できるようにしています。右サイドバーの「Stylesheets」の "Original" で選択できます。
  • トップページは XHTML1.0 valid にしました。ただしコメントやトラックバックについてはスコープ外ですのでご容赦ください。また過去のエントリーは文法違反のコンテンツが満載なため、これからボチボチ修正していきます。
  • BlogPeople/MyBlogList等のリンクは独立したページに移動しました。これは float による3カラムの場合、中央カラムを最後に表示しなければならないため、リンクリストの影響で中央カラムの表示を遅延させないための考慮です。2005.07.23 追記:中継君を使って表示しています。

リンク誤りがありましたらお知らせください。それでは今後ともどうぞよろしくお願い致します。

追記:
リニューアル中に不具合があり、コメント・トラックバック受信を一時停止していました。7/19 2:10頃回復しています。

2005.07.19 追記
不具合の対処後、文法エラーが多発していましたので修正しました。またトップページは valid XML1.0 になりましたので記述の一部を削除しました。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

小粋空間さんリニューアル from Mistgrass Weblog
 テンプレートを使わせてもらっている小粋空間さんのサイトがリニューアルしてました... [続きを読む]

Tracked on July 19, 2005 10:27 AM

小粋空間 from Luna's*PaPa
この度、いつもお世話になっている小粋空間さんのサイトがリニューアルしました。独自ドメインも取得されたようで、URLも下記の様に変更になっています。 小粋空間 h... [続きを読む]

Tracked on July 19, 2005 2:45 PM

注目サイト"小粋空間"がサイトリニューアル from Zero Cool の独り言
先日、個人的に推薦させて頂きました "小粋空間" が、この度全面的に!?サイトを... [続きを読む]

Tracked on July 20, 2005 2:58 AM

小粋空間様が新デザイン発表! from D'sDinner@Blog
今朝見たら小粋空間様が新デザインに・・・。 しばらく見とれてしまいましたが、タイ... [続きを読む]

Tracked on July 20, 2005 5:50 PM
コメント

コメントのテスト

[1] Posted by yujiro : July 19, 2005 12:21 AM

お世話になっておりまーす。
http://www.koikikukan.com/archives/2004/10/27-003127.php
ここにコメント入れようとしたらコメント欄がなくなって、
確認 と 送信 のボタンだけに
なってしまっています。
環境はIE6です。

[2] Posted by take : July 19, 2005 12:49 AM

>takeさん
こんばんは。
ご指摘ありがとうございました。
MySQLのエントリーサイズの変更がもれていたため、長文の記事が途中で途切れていました。

ただいま復旧しました。ご迷惑おかけ致しました。

[3] Posted by yujiro : July 19, 2005 1:59 AM

リニューアルおめでとうございます。
って、ぎゃっ! カッコええ! スッキリしてるし、動きもありますね!
あの、2カラムになったり3カラムになったりするの、カッコイイ! ちょっとそれ魅力でございます!
これからも末永くバイブルのように勉強させていただきます。

[4] Posted by towoko : July 19, 2005 2:33 AM

リニューアルおめでとうございます。
しかしかっこいいですねぇ、このデザイン。
クールな感じが自分は好きです。

[5] Posted by なかざ : July 19, 2005 2:41 AM

リニューアルおめでとうございます。

ひゃ?? すっごいステキですね。
どんな風にデザインされるのかとても楽しみだったんです。
クール&スタイリッシュになってカッコイイ!

これからもよろしくどうぞお願いします。(フッと我に返る^_^;)

[6] Posted by miaow : July 19, 2005 2:52 AM

yujiroさま

ご対応ありがとうございました。
おっけーです。
(一時はとんでもない画面になって心配していたのですが、起きたら直っていたので安心しました<^_^;;)

あっ、そうそう。
「リニューアルおめでとうございます」
この感じ好きです
このテンプレは配布されないんですか?

[7] Posted by take : July 19, 2005 4:34 AM

おはようございます。
COOLでステキにリニューアルされてビックリしました!!
お疲れ様でした!!
デザインも機能的にもすんごくいい感じです♪

あ…
日別アーカイブがデッドリンクでしたー
とりあえずご報告いたします。

[8] Posted by lomo : July 19, 2005 7:37 AM

(〃▽〃)キャー♪

すんごくステキですねっ
お疲れ様ですー。

うちも、こんな風に格好良くリニュしたい?
けどスキルないしな?

だもんで、指加えて眺めるだけですっ(つД`)

[9] Posted by ミッチ : July 19, 2005 7:57 AM

きゃー!かっちょよすぎますって。
まさかこう来るとは思いませんでしたわぁ。
前々からもれ聞いていた希望が全て叶った上でさらに使いやすく!って感じですねぇ。
リンクリスト系が別ページになったので、すごく軽くなったしユーザビリティも完璧で(*´д`*)ハァハァ
こういうのを見ると自分もいじりたくなってしまうという…。

[10] Posted by もそ : July 19, 2005 8:12 AM

お世話になってます。
リニューアルおめでとうございます\(^o^)/
すごいCoolで、感動です!

私のサイトもこのような感じに出来ればなんて(スキルがないけど)。カスタマイズの方法、使われている画像についてエントリーをあげていただければ、なんてずうずうしいことを思ってしまいます。

[11] Posted by mistgrass : July 19, 2005 10:37 AM

こんにちは。
今朝見て感動です!とっても素敵なデザインになりましたね?。
サイドバーの折りたたみ?え、前からできてる奴でしょ?と思ったら
3カラムが擬似2カラム可能になるなんて・・・。>>ボタンおして一人で声上げてしまいました(汗。

この感動はブログのネタにさせていただきます!

[12] Posted by dai : July 19, 2005 1:19 PM

yujiroさん、こんにちは^^
すごーい、とても素敵なテンプレですね♪
まさに小粋です(゜∇^d)

[13] Posted by moo : July 19, 2005 2:38 PM

お久しぶりです。
この度は、独自ドメイン取得及び際とリニューアルおめでとうございます。
早速拝見させていただきましたが、サイドバーの折り畳みは凄いの一言ですね。今まで見たことも無かったので、斬新なアイデアに脱帽です。
またお世話になると思いますが、今後ともよろしくお願いします。

[14] Posted by Take : July 19, 2005 2:48 PM

yujiroさん、リニュおめでとうございます!
いつものようにお気に入りの「小粋空間」をクリックしたら、突然クールにリニュされていてビックリ!!
一瞬どこかの海外のサイトに来ちゃったのかと思っちゃいました・・・
これから落ち着いて(笑)アチコチゆっくり拝見したいと思います。

小粋空間さんの今後ますますのご発展をお祈りいたします。
ぷぷぷなシャレと楽しいカスタマイズ、これからも楽しみにしてますょ^o^

[15] Posted by mai : July 19, 2005 3:00 PM

↑ごめんなさい、ヘンなURLで送ってしまいました。

[16] Posted by mai : July 19, 2005 3:03 PM

祝!リニューアルです。
クール且つ洗練されたサイトデザインに脱帽です。ワタシのサイトはますます汚れていく一方で・・・(笑)。
もはやブログデザインのスタンダードとなりつつある「小粋空間」様には今後もお世話になると思いますので、どうぞよろしくお願いいたします。

[17] Posted by toycozy : July 19, 2005 11:20 PM

(@^^@)/コンバンワ、yujiroさん
サイトのリニューお疲れ様でした。

雰囲気がガラリと変わりましたね
デザインのセンスが良いです。

毎日大変だと思いますが頑張って下さいね。

[18] Posted by mituru : July 20, 2005 12:45 AM

うぎゃっ!すばらしい!
なんか、yujiroさんらしくなく、かっこよすぎるんですけど。(笑)

[19] Posted by Border. : July 20, 2005 2:13 AM

コメントのご返事遅くなってすいませんでした。

>towokoさん
こんにちは。
早々のコメントありがとうございました!
カラム切り替えは結構気に入ってます。
バイブルとまではいきませんが、今後も参考にして頂ければ幸いです。

>なかざさん
こんにちは。
早々のコメントありがとうございました。
配色は色々悩んでいるうちにこうなりました。地味好きなのかもしれません(笑)。

>miaowさん
こんにちは。
早々のコメントありがとうございます。
大変お待たせしました。とりあえず無事に公開できてホッとしていますが自分の家ではないみたいです。(笑)
あ、我に返っても問題ありません(笑)

>takeさん
こんにちは。
コメントありがとうございます。
また先日はご指摘ありがとうございました。
今のところ配布は予定していませんが、各種の技については記事にしていきたいと思います。

>lomoさん
こんにちは。
早朝のコメントありがとうございました。(笑)
そういえばlomoさんのサイトも素敵にリニューアルされえてましたね。コメントできず失礼致しました。
あとデッドリンクの件、ありがとうございます。
実は素人です(笑)。

>ミッチさん
こんにちは。
コメントありがとうございました。
技は伝授致します?ので是非チャレンジしてみてください。

>もそさん
こんにちは。
コメントありがとうございます。
ようやく公開できて一安心といったところです。
密かに色々と参考にさせて頂いてます。
Another lint も99点まではなんとか(笑)。

>mistgrassさん
こんにちは。
コメントありがとうございました。
また記事にしてくださり、ありがとうございます。
テンプレートのカスタマイズについては別途エントリーしたいと思いますのでよろしくお願い致します。

>daiさん
こんにちは。
コメントありがとうございます!
エントリーもあげて頂き感謝です。
カラム切り替えはコンテンツをまとめて読みたい時に結構重宝しています。

>mooさん
こんにちは。
コメントありがとうございました!
はい、さらに小粋になりました(中粋くらい?(笑))。

>Takeさん
こんにちは。ご無沙汰してます。
コメント&エントリーありがとうございます。
とりあえずこれまでに思いついた技をあれこれ盛り込んでみました。
こちらこそ今後ともどうぞよろしくお願い致します。

>maiさん
こんにちは。
コメントありがとうございます!
配色は変わりましたが文書構造はたいして変わってなかったりします。(笑)
ダジャレは相変わらずですのでお楽しみください。

>toycozyさん
こんにちは。
ご無沙汰してすいません。
コメントありがとうございました!
誰が「スタンダードにしたんだー」と(笑)
toycozyさんのカスタマイズ力にも期待しています。

>mituruさん
こんにちは。
コメントありがとうございました。
はい、本当に疲れました(笑)
今後も頑張りますのでどうぞよろしくお願い致します。

>Border.さん
こんにちはー。
コメントありがとうございました。
いえ、とても私らしいかと(笑)。
正直自分のサイトでないみたいで落ち着きません(笑)。

[20] Posted by yujiro : July 20, 2005 1:22 PM

実は、両サイドバーの文字は目を細めてみなくてはならなかったので、これでずいぶん見やすくなりました=。ありがとうございます!
あと、小粋、空間の意味が想像以上にいっぱい詰まっていたのに感動しました。!
クリエイティブに携わるお人ととして、私も刺激を受けつつ精進していきたいと思いました。
今後とも、よろしくお願い致します。
私のWebDesign師匠の坂本龍一氏もブログはじめましたです。
http://blog.sitesakamoto.com/

[21] Posted by goron : July 21, 2005 1:44 AM

昨日きてビックリして一度閉じちゃいました。
おうち間違えたのかと笑

かっこよく、りぬりましたねー。
すごい洗練されてエントリーも折りたためてしまうってスゴイと思いました。
画像も自分で作られたんですか?
こんな才能まで隠し持っていたとは。。。ズルイです。
ワタシにもください。。。

ちなみに、このテンプレートもそのうち出されるんですか?

[22] Posted by やむ : July 21, 2005 10:58 AM

>goronさん
こんばんは。
ご無沙汰しております。

コメントどうもありがとうございました。
プロのデザイン関係の方にお褒め頂けるとは光栄です。
坂本龍一氏のブログはCOOLですね。

>やむさん
こんばんは。
コメントありがとうございます。
実は違うサイトです。(嘘)

画像は適当に切り張りして作りました。
私の方法はかなり陳腐なので、他の方がどうやって作られているのか知りたいところですね。

テンプレートは今のところ今のままです。

[23] Posted by yujiro : July 21, 2005 8:28 PM

リニューアル、おめでとうございます。・・・・って、ちょっと出遅れましたが。。。
おしゃれでクールでハイセンスな仕上がりにビックリしています。
みなさん似たような感想を書かれてますが、あたしも一瞬 違うサイトさんに
間違えて来ちゃったかと思いました。

[24] Posted by さえら : July 22, 2005 8:21 AM

リニューアルおめでとうございます。
さわやかなサイトでセンス感じます。。

可変カラムで横が少しスペース開いてるように見えるのですが
これはどのようにしてやるのでしょう?
既出ならすいません、(*_ _)人ゴメンナサイ

[25] Posted by slyme : July 22, 2005 3:00 PM

リニューアルおめでとうございます^^
サイドバーごと折り畳めるのはいいですね。
こういう技もデザインも大好きです。
これからもよろしくお願いします。

[26] Posted by さっちん : July 22, 2005 3:09 PM

>さえらさん
こんばんは。
コメントありがとうございます。
3日ほど経って私もようやく慣れてきました(笑)。

>slymeさん
こんばんは。
コメントありがとうございます。

横のマージンは、端的には body にpadding を与えているだけです。いずれエントリーする予定ですが、お急ぎでしたらスタイルシートをご覧ください。

以上です。
それではよろしくお願い致します。

>さっちんさん
こんばんは。
コメントありがとうございます。
お褒めくださり光栄です。
こちらこそ今後ともどうぞよろしくお願い致します。

[27] Posted by yujiro : July 23, 2005 1:00 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)