予告していた改装工事、先程漸く完了しますた。
こんばんわ、ニート万歳ぼっこし屋です。
基本的な段組は替えずにデザインを弄るだけのつもりだったのが、大幅なソースの修正を強いられることに。いやもう、ホント疲れますた。最初にサイトを作る際に、リニューアルまで視野に入れたコーディングが必要だってのを痛感したよ。
ついでにHTML文法チェックを通して、ソースに不備が無いかもチェック。改装前の段階で、40点という低評価のページがあったことも発覚し、やっぱ改装に着手してよかったなと晴れ晴れとした心境になった元旦だったのです。元旦かよ。
ついでに名称もチェンジ。前の名前が読みづらいという苦情の声が全国から3000万通ほど送られたんで。
読み方は「カイ」です。「カイカイ」じゃないよ。それじゃ怪物くんだ。
しかし、今度は「χが打ちづらい」という声が上がるじゃないかと戦々恐々。
あとはカウンターの数字を前のに戻すだけ。
つか、もうじき5周年だってのに、まだ15000ちょいですか。
「マメに更新してるけど、年間平均アクセス数が世界一少ないサイト」としてギネスに載るんじゃないかと思えてくる少なさだな。
つか、8割は巡回ロボットなんじゃないの、このアクセス数。なんか泣けてくるなあ。
(関連リンク：1日6hotだけれど...）
現在のサイトの仕様
俺の覚書なので、興味がない方はスルーして下さって結構でございます。
■構造
「壊χ」は、左右分割の2カラム構成になっている。
レイアウトの制御は全てCSSで行っている。htmlソースは4.01 Trandisionalに準拠（JAVAは組み込んでおらず、loose.dtdは指定していない。理由は後述）。
左のカラムは固定し、width、height値は共にpxで指定。
右カラムは擬似フレームとし、リキッドレイアウトとする（そのため、カラムにwidth属性は組み込んでいない。Operaではウインドウが文章量に応じて変動するが、IEやFirefoxやSafariでは問題なし）。
frameによる分割にしなかったのは、言うまでもなくSEOを意識してのこと。
■左カラム
position:fix（IEはCSSハックでabsoluteに指定）で固定。
bodyで指定したoverflow:hiddenが継承されているため、スクロールバーが出ないようになっている。
■右カラム
カラム本体は、position:fix（IEはCSSハックでabsoluteに指定）で固定。
メイン表示部分にのみoverflow:autoを指定してやることで、擬似インラインフレームが実現する（JAVAなしでloose.dtdを指定すると、この効果が現れない）。
左カラムをfloat:leftで左寄せにしても同じ効果は現れるが、ブラウザの大きさを変化するとカラム落ちが生じるので不採用。
画面左上を基準座標とし、そこから右に280px移動させて表示している。
margin-left:280pxでも同じ表示になるが、左カラムのナビゲーションバーが反応しない（反応するが、バー全体にhoverの効果が現れない）不具合が生じる。
これは、右カラムのボックスが左カラムに重なっていると解釈されることによる現象と思われる。
この干渉を防ぐため、left:280pxで右カラムを移動させている、というわけである。
また、IEではheight:100%でメイン表示部分を問題なく表示できるが、firefoxやoperaではウインドウが画面下にはみ出し、スクロールが効かない現象がおこる。そのため、:rootハックを利用し、height:90%に指定することでこの現象を回避させている。
■文字サイズ
bodyでfont-size:62.5%を指定。
実際の文字サイズは、emで指定。
これにより、1em＝10pxとなり、サイズの指定がしやすくなる。
右カラムは、margin、padding共にem値で指定。
ゆくゆくは、文字サイズに応じて画像の大きさも変動するようにする予定（これは、imgのwidth数値をemで指定してやることで実現する）。
■色
基本色は、黒（背景）、白（文字）、オレンジ（ボーダー）。
タグは、カテゴリーごとにborder色を変化させている。
��そのため、将来カテゴリーを拡張したくても、6種類までしか設定できない、ということになる。classを使えば問題は解決するのだが）
水平線は、濃紅色と灰色の二種類。状況に応じて使い分けている。
■リンクアクション
・左カラムのナビゲーションバーは、擬似クラスhoverでのみ背景色ならびに右ボーダー色が変わるように設定。
aタグにdisplay:blockとwidth数値を指定してやることで、バーのどこにカーソルを乗せてもロールオーバー効果が出るようになっている。
バーの上下余白は、line-heightで調整。
・メイン表示部はアンダーラインあり、文字色は表示色に同じである。擬似クラスhoverにのみ、文字色を赤くするプロパティを盛り込んである。
・強調したいリンクは、オレンジないしは黄色にしている。hoverについては上項と同じ。
■パンくず
各ページにおいて、パンくずリストをメイン表示部上部に表示。
ただし、リンクは設定していないので、ユーザビリティの面で不満である。
■その他
メールアドレスは、スパム対策のため画像で表示。
サイトバナーは88×31サイズ。
ファビコンを使用。
基本的に、divによるmargin調整は、ネストで判定処理している（サイト更新の利便性を慮って）。
■構造
「壊χ」は、左右分割の2カラム構成になっている。
レイアウトの制御は全てCSSで行っている。htmlソースは4.01 Trandisionalに準拠（JAVAは組み込んでおらず、loose.dtdは指定していない。理由は後述）。
左のカラムは固定し、width、height値は共にpxで指定。
右カラムは擬似フレームとし、リキッドレイアウトとする（そのため、カラムにwidth属性は組み込んでいない。Operaではウインドウが文章量に応じて変動するが、IEやFirefoxやSafariでは問題なし）。
frameによる分割にしなかったのは、言うまでもなくSEOを意識してのこと。
■左カラム
position:fix（IEはCSSハックでabsoluteに指定）で固定。
bodyで指定したoverflow:hiddenが継承されているため、スクロールバーが出ないようになっている。
■右カラム
カラム本体は、position:fix（IEはCSSハックでabsoluteに指定）で固定。
メイン表示部分にのみoverflow:autoを指定してやることで、擬似インラインフレームが実現する（JAVAなしでloose.dtdを指定すると、この効果が現れない）。
左カラムをfloat:leftで左寄せにしても同じ効果は現れるが、ブラウザの大きさを変化するとカラム落ちが生じるので不採用。
画面左上を基準座標とし、そこから右に280px移動させて表示している。
margin-left:280pxでも同じ表示になるが、左カラムのナビゲーションバーが反応しない（反応するが、バー全体にhoverの効果が現れない）不具合が生じる。
これは、右カラムのボックスが左カラムに重なっていると解釈されることによる現象と思われる。
この干渉を防ぐため、left:280pxで右カラムを移動させている、というわけである。
また、IEではheight:100%でメイン表示部分を問題なく表示できるが、firefoxやoperaではウインドウが画面下にはみ出し、スクロールが効かない現象がおこる。そのため、:rootハックを利用し、height:90%に指定することでこの現象を回避させている。
■文字サイズ
bodyでfont-size:62.5%を指定。
実際の文字サイズは、emで指定。
これにより、1em＝10pxとなり、サイズの指定がしやすくなる。
右カラムは、margin、padding共にem値で指定。
ゆくゆくは、文字サイズに応じて画像の大きさも変動するようにする予定（これは、imgのwidth数値をemで指定してやることで実現する）。
■色
基本色は、黒（背景）、白（文字）、オレンジ（ボーダー）。
��そのため、将来カテゴリーを拡張したくても、6種類までしか設定できない、ということになる。classを使えば問題は解決するのだが）
水平線は、濃紅色と灰色の二種類。状況に応じて使い分けている。
■リンクアクション
・左カラムのナビゲーションバーは、擬似クラスhoverでのみ背景色ならびに右ボーダー色が変わるように設定。
aタグにdisplay:blockとwidth数値を指定してやることで、バーのどこにカーソルを乗せてもロールオーバー効果が出るようになっている。
バーの上下余白は、line-heightで調整。
・メイン表示部はアンダーラインあり、文字色は表示色に同じである。擬似クラスhoverにのみ、文字色を赤くするプロパティを盛り込んである。
・強調したいリンクは、オレンジないしは黄色にしている。hoverについては上項と同じ。
■パンくず
各ページにおいて、パンくずリストをメイン表示部上部に表示。
ただし、リンクは設定していないので、ユーザビリティの面で不満である。
■その他
メールアドレスは、スパム対策のため画像で表示。
サイトバナーは88×31サイズ。
ファビコンを使用。
基本的に、divによるmargin調整は、ネストで判定処理している（サイト更新の利便性を慮って）。
サイト工事日記
はい、今日が工事完了予定日ですね。
無理ですた！
orz
ようやく作品群を移し終わったものの、日記過去ログが全くの手付かず。divに変なclass属性しちゃったもんだから、作業時間が半端ない。駄目ね、無計画なコーディング。
そして今週末は用事が入ってるので、更新作業はムリムリ。つかいつ就職活動始めるんだろ俺。
無理ですた！
orz
ようやく作品群を移し終わったものの、日記過去ログが全くの手付かず。divに変なclass属性しちゃったもんだから、作業時間が半端ない。駄目ね、無計画なコーディング。
そして今週末は用事が入ってるので、更新作業はムリムリ。つかいつ就職活動始めるんだろ俺。
工事ガガガガ
ケッケ、こんちわ。
今日から再び、ニートという社会の最底辺に属することになったぼっこし屋でっす。
就活はひとまず先送りにして、ちょいとバーストアウト中。半年以上仕事してないのにまだ休むか貴様は、というツッコミは無視させてもらおうか、ダグラス君。
現在、サイトの全面改装工事中。
合間にサイト巡回したりパラニュークの小説読んだり漫画読んだりまたサイト巡回したりしながら、着々と進捗してます。息抜きの時間の方が長いようにも思えるけどキニシナイ。
ひとまず枠組みは完成。現行のソースだとfirefoxやoperaなどで非常に前衛的なデザインに変貌するという由々しき状況なわけだけど、それもハックなどを駆使して解決。俺も随分成長したもんだ。
黒基調のカラーデザインは継承しつつ、差し色にオレンジを組み込んで、ソリッドでポップなイメージを持たせてみる。うん、いい感じだ。ここ数ヶ月で色々仕込んだテクが見事に顕現している。天晴れ。時間がかかりすぎてるのが玉に瑕だが。
今は、創作や日記の内容を移動してる最中。つか、量多い。俺泣きそう。classも書き換えなきゃだから、手間が半端ない。Deam Weaver導入してなかったら、今頃泣きながら作業してると思う。
明日中には何とか完成させたい。てか、更新履歴のとこにもう2007.9.1サイト工事完了って書いちゃったし。自分の首絞めて楽しいのか俺よ。
けど今日は眠いからもう寝る。残るコンテンツは100ページちょい。血吐くよ、マジ。
今日から再び、ニートという社会の最底辺に属することになったぼっこし屋でっす。
就活はひとまず先送りにして、ちょいとバーストアウト中。半年以上仕事してないのにまだ休むか貴様は、というツッコミは無視させてもらおうか、ダグラス君。
現在、サイトの全面改装工事中。
合間にサイト巡回したりパラニュークの小説読んだり漫画読んだりまたサイト巡回したりしながら、着々と進捗してます。息抜きの時間の方が長いようにも思えるけどキニシナイ。
ひとまず枠組みは完成。現行のソースだとfirefoxやoperaなどで非常に前衛的なデザインに変貌するという由々しき状況なわけだけど、それもハックなどを駆使して解決。俺も随分成長したもんだ。
黒基調のカラーデザインは継承しつつ、差し色にオレンジを組み込んで、ソリッドでポップなイメージを持たせてみる。うん、いい感じだ。ここ数ヶ月で色々仕込んだテクが見事に顕現している。天晴れ。時間がかかりすぎてるのが玉に瑕だが。
今は、創作や日記の内容を移動してる最中。つか、量多い。俺泣きそう。classも書き換えなきゃだから、手間が半端ない。Deam Weaver導入してなかったら、今頃泣きながら作業してると思う。
明日中には何とか完成させたい。てか、更新履歴のとこにもう2007.9.1サイト工事完了って書いちゃったし。自分の首絞めて楽しいのか俺よ。
けど今日は眠いからもう寝る。残るコンテンツは100ページちょい。血吐くよ、マジ。
投稿
