よいこのみんなー。
はたらくうぇぶ屋さんのじかんだよー。
きょうは、うぇぶ屋のさるささんのぶろぐがどうできていくか、おべんきょうしていくよー。

え？「うぇぶ屋ってなんですかー？」って？
それはねー。

儲かる人は儲かるけど、そうでない大多数の人は薄給と過酷な労働状況、つまり厳しいヒエラルキーの中でもがき苦しみ、それでも上を目指して絵を描いたりソースとにらめっくらしたり徹夜したり栄養ドリンクの瓶を机に並べたり、クライアントに怒られたりしながら働く人たちのことだよー。うーん、ちょっと難しかったかなー。

あ、どうもサルサです。
最近切り売り系、赤裸々系の記事が多いと自負しております。そんなわたくし今日は、今回の毎日考ブログテンプレートをどういう感じで行っていったか、面白いんだかつまらないんだかわかりませんが、書いていこうと思います。

まずはIllustratorでデザインをお絵かきしていきます。今回は、サイド部分とのコントラストを少し強めに付けてみました。日付の表示領域を確保する分、またしても幅を広げざるを得ませんでした。非常にスンマセン。

旧テンプレートでは個別記事は1カラムにしておりまして、割と気に入っていたので個別記事だけサイドバーの部分を上に配置しようかとも思ったのです。けれど見る人がアクセスするとき、ナビなどの使い勝手がページごとで変わるのはよくないという理由から、今回は全部同じにしました。

前はこういうのをPhotoshopで作っていたんですが、慣れるとIllustratorのほうが楽しいし自由度が高い。まだ機能は使いこなせていないんですが、ちょうど会社でもデザインリニューアルにかかっておりまして、やたらとお絵かきしまくってます。

そのデザインをもとにして、XHTMLでページを組んでみます。背景色を付けておくと、余白や領域の把握がしやすいです。この時点ではまだ、Safariくらいでしか表示を確認していません。CSSも、XHTMLに直に書いています。

デザインからかきだした画像をはめ、CSSで装飾します。ここらへんで、CSSもちゃんと分けていきます。今まで1枚で用を足していましたから、いじりたいときなどメンテナンス性が悪かったんです。CSSの管理にはいろいろな分け方があると思いますが、毎日考の場合は共通のcommon.css、サイド用のside.css、中身用のcontents.css、一覧表時用のarchive.css、それにインクルードファイルが二つ…のような感じで、あまり厳格には分けてないですね。ハックはほとんど使わないので、ブラウザ振り分けのCSSなどは無しです。

と、ここまで来てやっぱりサイドバーは左がいいかしら？と浮気。いろいろあててみましたが、やっぱりイメージが違うなぁ、というボツ案。

やっぱり右でしょ、と再度戻します。フォントの大きさとか、サイドバーの角丸部分とか、サイドバーの幅とか、細かいところを調整します。そしてこれをベースに、個別記事用、一覧表示用のサンプルhtmlを作ってみます。これ、そもそもちゃんと組んであればCSSの調整だけでいけるのが本当なんですが、まあ、微妙にそうでない、やっつけとごまかしで作っていた部分もあったわけでして…。

全部できたら、各種ブラウザで表示確認。ここからが時間かかりましたね。やっぱり、こういうものをいじるときはWindows作成→Macで確認という手順の方が、早かっただろうなあ。結局Windowsで崩れを直して、またMacで表示確認することになるんだもの。微妙に問題のある部分もありつつ、とりあえずはWindowsのIE、Firefox、Opera、MacのIE、Safari、Firefox、Operaで表示確認をしています。ただしWindowsIEの7.0は確認しておりません。

そのWindowsで今回ひっかかったのは、「毎日考ブログ」のところです。ここ、h1見出しにあててるんですが、場所は右でもXHTMLのソース上では一番上。なわけで、「毎日考ブログ」の部分はサイドメニュー（紫部分）のブロックに含まれているように見えますが、ここだけは別個に配置しています。

しちめんどくさいことをしていますが、これなら携帯等で見ても、しょっぱなからメニューがえんえんと続いてスクロールが大変と言うことはありません。そのかわり音声リーダーにはちょっと不親切ですよね。ちょい崩れている部分もまだ野放し、幅が前より縮まっていることによる記事ページの崩れも放置プレイ。おいおい調整していこうと思います。

ここまできたらあとは、ブログのテンプレートに当てはめて、と。独自タグがはき出すタグとの関係もあって、管理画面のプレビューで出力されたXHTMLを見ながら、あとはCSSのみの調整となります。できあがったら再構築。記事ごとに確認をしていき、変に削っちゃったりしたスタイルを調整したりですとか。もう一個ディレクトリを切って、ページをちゃんと確認できてからそっくり差し替えというのも考えたんですが、まあいいってことですよ。

そうそう思い出した。去年はクリスマスイブが日曜日で。その日は日中に寝てしまったせいで夜眠れなくて。今寝たら朝起きられないという時間になってしまって。でもね、いくら朝まで暇だからといって、聖なる深夜、ブログのテンプレート変更のためにスタイルシートとちちくりあっているような大人には、ゆめゆめなっちゃいけない。サルサでした。

…ん？ もうひとつしつもんがあるの？

「なんでそんなつらいのにうぇぶ屋をやめないんですかー？」って？

うーん、なぜだろうねー。
こんどさるささんにきいておくねー。

そんではまたー。

<< 珈琲に合うイラボ釉のマグカップ | main | ストーブで朝食を「玉子あおさおじや」 >>