あちょーす。
今日久しぶりに、未舗装の道路というものを歩きましたよ。
駅までの道の途中、工事で100メートルくらいアスファルトが剥がされてたんです。私がコドモの頃は家の前の道路もすべて舗装なんかされてなくて…というほどの年ではないんですが、なんか懐かしい感じがしましたねえ。

OLさんなら、ヒールを道路のでこぼこに取られて
「あん、もう！なんで工事なんかしてんのさあ！歩きにくいったらありゃしない！むきぃ！」かもしれませんが、ぺたんこ靴スニーカー大好きの私には関係ないんだもんねーだ。

まあそういうわけでして賢明なる読者の諸君は気付くかどうかわかりませんが、久しぶりにテンプレを変えてみました。何度も何度も変えようとは思っていたんだけど、めんどくさかったんだもーん。結局さあ、文章読めればよくね？

さ、汗と血と涙と××のテンプレ変更秘話をご覧アレ。
長いんで適当に読み飛ばしてくれ給え。

まず、ローカル環境で修正。

基本的なレイアウトはこのまま。
というより私の稚拙なアタマでは、すんばらしく美しくて機能的なレイアウトなんて思いつきません。今まで通り、トップページやアーカイブページは2カラム、個別記事は1カラムでページ上部にタイトルのヘッダーが来る形にします。

とりあえず、トップページのソースを適当な名前を付けて保存し、同じディレクトリにスタイルシートを置き、HTML（XHTML）ベースのローカル環境でいろいろいじってみます。まずは背景を白にして、タイトル画像を取って…

で、どうしたらいいのだ。
特にラフ案を考えているわけでもなし。まあ抽象的に言えば、とにかくシンプルなこと。全体的なベースは無彩色がいい。ただでさえ私のブログは植物やレシピなど写真が多くなってごちゃつくので、囲む枠はなるべくシンプルなほうがいい。それでいて、安心できる感じ。考えてないわりに注文は多い。とりあえず、背景画像はなしっ。グレー一色。よいではないか、減るもんではなし。シンプル伊豆ベストだ。（言っとくけどわざとだぞ）

ってことで、タイトル画像を考えてみる。

なにはなくともコレだ。
これがブログの玄関、そのブログを印象づけるのだ。これが決定すれば50％は終わったも同然だ。同然かしら。そうかしら。

まったく案がないので、とりあえずPhotoshopを起動して、ブログタイトルを書く。毎日考ブログっと。…ロクなフォントがないな。どれも、どうにもイメージが違う。うぃんどーずのゴシックって、どうしてこうも色気がないのだ。

困ったときの神頼み、こういうときはフリーの漢字フォントを探そう。
→あのおじさんも使ってる漢字フォント配布サイト
こちらで紹介されている窓の杜で見つけた、モトヤフォントへレッツゴー。というわけで、タイトルを表示しているフォントは「モトヤシーダ」というフリーフォント。無料会員登録でダウンロードできるので、もしよろしければみなさまも。

タイトルはこれでよしと。
うーん、寂しいからなんか画像を入れようか。
タイトルが左だから、写真を右で…っていかんいかん、これでは今までとまったく変わらんではないか。

それなら、と写真をもっと小さくしていっぱい並べてみる。同じ写真を薄くしたり濃くしたのを並べたり、重ねたりしてみる。だだだだだだ。…ウザくなった。

なんかないか、私の持っている画像ライブラリの中でなにか使えるものは…。と、「素材」というフォルダにあったのがこのキーボード画像だ。自分で撮ったのか、フリー画像を拾ってきたのかも覚えていない。まあいいや。これを敷いて。ただ敷くだけじゃやぼったいか。ちょっと動かしてみようと思ったら、回転してしまった。あら、これいいんじゃないの。決定。決定ったら決定。

今までタイトル画像の下にあった
メニュー部分をリスト化、他

はい、これはWeb標準対応スね。
今までは普通にテキストにリンク張って、縦棒で区切ってというだけだったので気になっていたのである。リスト化されていれば構造的にもよろしい。細かいことはあとあと。とりあえずいじってしまおう。

うーん、やっぱり形状的には今まで通り、バーのようになっていたほうがわかりやすいか。背景の色は、とりあえずグレーでいいか。…よくない。暗い、暗すぎるよ小沢さん。なんかいい色ないかな。このごろはそれほど「Webセーフカラー」にとらわれなくてもいいだろうし…

そこで第二のお助け船。
→色見本の館 /Color Guide
こちらは、ちょっと渋めな和風の色のコードが数多く紹介されているところ。その中から、普段はあまり選ばないであろう色をチョイスして敷いてみる。

例えば、灰汁（あく）色。茶色からもっと彩度を落として薄くしたような色。これがまあ、落ち着いていてなかなかよいのだ。んー、落ち着き過ぎか？

迷いに迷って、紫色系の「薄色（#A898AB）」を敷いてみる。
あら！よいじゃないの！タイトル部分のキーボードとも微妙に色合いが合うじゃない。いささか女らしすぎる気もするが、もう疲れたので決定。

サイドバー部分の調整
サイドバー部分は記事以上には目立ってほしくないので、グレーアウトの状態に。ただ今までと違って背景や枠線を引いたので、余白やマージンがちょっと整わない。スタイルシートを調整っと。こうか。こうか。こんなんか。もっとか。ほれほれ。ここがかゆいんか。ここか。そうか。うひひひひｈ

カレンダーを無くした
要らないっスよ、コレ。
あー、最近更新してねーなー…　って思っちゃうもん。

レイアウトのTABLEタグ撤廃と
ブラウザ確認

ああ、調整で思い出した。
今のテンプレート、実は一番大枠のレイアウトにTABLEタグの中央寄せを使っていたのだった。だって前回、どうしても全部のブラウザでセンタリングできなかったんだもん。よし今日こそ。

Macを起動するのがめんどくさかったので（ぉぉぃ）、WindowsIEとFirefoxだけの確認。FirefoxはNetscapeと表示が変わらないので、取り急ぎこのふたつだけでいい。そして、FFで表示確認できていれば、Macもけっこうなんとかなる。たしか。

しかし、こちらを立てればあちらが立たず。
どっちかがセンタリングされると、どっちかは左寄せのまま。こなくそ。

結局、スタイルシートはこんなソースに。
上の「body」は基本のbodyタグ、下の「#body」は記事のボックス、センタリングされている部分。

marginとpaddingを「auto」にすればIE以外はセンタリングしちゃうのだが、IE対策としてセンタリングのスタイルを入れてある。ただしこのままだとその下層にある全部のスタイルに中央寄せが効いてしまうので、主立ったところに左寄せのスタイルシートを追記する。

htmlでの変更点を、
全てのテンプレートに反映

個別記事用、アーカイブ用…とトップページ用を含めて4つのテンプレートがあるため、効かせるスタイルシートも微妙に違う。なのでそちらも同じように調整して、書式をきれいにし、テンプレートも修正。といっても、いじったのは大枠のTABLEタグをなくすとか、ヘッダーのメニュー部分くらいだろうか。それ以外、ほとんどがスタイルシートのみの変更なのか〜と思うと、すごいよなあ。いずれにせよ、今回構造的な部分をちゃんと整えておけば、次回のテンプレ変更は格段にラクになるはずだ。

んー。
はしょった部分もあるが（十分長いけど）こんな感じだろうか。
ちなみに今日会社でOperaを（ん？）、家でMacIE・Safari・Firefox・Netscapeを表示確認したが、ほぼ同じ表示が確認できた。ニンニン。

ああ、ひとつだけ。
今までの毎日考BLOGという表記ではなくて、毎日考「ブログ」としたのは、溢れんばかりの英語表記へのアンチテーゼです。特にメニュー部分など、羅列されると一瞬「えっと」と和訳しちゃう自分がいます。とはいえ、フォントのことなんかも考えると、日本語より英文のほうがえらくイケてることは事実なんだけど。もちろんこれは私の心証なので、まったく気にしないでくれて構いません。それはもう、ドクソガキめが何を言っとるかくらいの勢いでひとつよろしく。

「あのね、サルサが毎日考“ブログ”にしたのはね、
読み上げソフトでいきなりタイトルからして

まいにちこうびーろぐ

って読まれちゃってへこんでたｋあｒｄ( ・∀・)=○)Д￣)鼻血ブッ」

個別ページ｜comments (6)｜trackbacks (0)

<< 豆乳マイタケチーズ雑炊 | main | 見知らぬ人とのふれあい >>