MTサイトのWidget化、45％ぐらい進んだと思われる。
今日はトップページのセンターカラムをWidget化した。
さて、前々から気になっていたことがある。
IE6とFireFox1.5とでは、表示のされ方が違う。
CSSがうまく反映しないのだ。
私はFireFox1.5をメインブラウザに使用しているので、あまりIEで閲覧することはないのだが、サイト閲覧者のほとんどはIE6なので、さすがに無視することはできない（というかついさっきまで無視してきたのだが）。
なぜか
で定めた色やインデントが反映されない。前々からやりたかったことに、複数の運営ブログ（サイト）の更新履歴を一覧表示させる、というのがあった。
これにはいくつか段階を踏む必要がある。
同一サーバー内にあるブログ（MT）の更新履歴を表示させることが最初の段階。
これにはMultiBlogというプラグインを導入する必要がある。
そこで、MultiBlogプラグインのダウンロードページを探すが、ない。（後に見つける）
どうやらよそへ移ってしまったようだ。
が、右端のカラム（ガンマ）が右端ではなく、左下（アルファの下）に表示される。
右端は空白だ。
このページだけ、表示がおかしい。
ということで、このページで試みていることをもう一度試みてみる。
まず、エントリータイトルが長い。
タイトルが長すぎると、ガンマが表示されないのか？
実験の結果、そうではなかった。
タイトルが長くても表示される。。
では、何が原因か？
君島十和子さん最新情報のブログ化へ向けての第１歩。
前回つくったデザイン（green3）をベースに、フェミニンな雰囲気を出そうと試行錯誤する。
まず、すっかり忘れている。
２週間MTから遠ざかっていたせいだ。
作業を思い出すのに、意外にもこのブログが役立った。
備忘録として有用だったので、これからも書いていこうと思った。
さて、まずデザインを練るためのブログを作ることからはじめる。
が、いきなり失敗。
表示されるべきブログが表示されない。
手順に間違いはない。
原因を特定するために、ひとまずそのブログを削除し、新たにブログを作る。
またも失敗。
作成はされるが、表示されない。
404エラーが出る。
そこでFTPソフトでディレクトリを調べる。
すると、あるべきはずのディレクトリにはなく、なぜこんなところに、という場所に新ブログのフォルダを発見。
原因はサイト・パスだ。
で、もう一度確認する。
/home/sites/lolipop.jp/users/自分のフルパス/web/t-style（←新しいブログ）
これで成功。
失敗したブログのフォルダは、FTPソフトで削除した。
背景画像を表示させようとするが、表示されるブラウザと表示されないブラウザがある。
背景色を優先させるブラウザとそうでないブラウザがあるためと判明。
background で指定していたのを、background-image と background-color で画像と背景色を指定し直したら、改善された。
SafariとFirefoxとで、左カラムと右カラムのタイトルの位置が違う。
Firefoxではきちんと表示されるが、Safariではナビゲーションのところに、タイトルがずれて表示される。
これをどうにかしたい。
で、スタイルシートをいろいろいじくって、問題の箇所を見つけた。
position: absolute; で位置を決定していたのだが、ブラウザによって同じ数値を設定しても違う位置に表示される。
Safariはやや高い位置に表示されるので、Safariに合わせることにする。
いろいろ試した結果、上から120px でいい感じになった。
次に真ん中のカラム（beta）もちょうどいい位置になるよう微調整する。
やはり、思った通りにデザインできると、気持ちがいい。
リキッドレイアウトにしてみた。
リキッドレイアウトとは、ブラウザ画面の大きさに左右されないデザインのことで、リキッドデザインとも言う。
小さな画面でも大きな画面でも液体のように可変し、デザインが崩れないのが特徴。
サイズ固定のレイアウトでは、画面が小さすぎると全体が表示されなかったり、デザインが崩れたりする。
また、画面が大きすぎると、やけにスカスカな印象を与えかねない。
つまり、サイズ固定のレイアウトは閲覧者にブラウザの画面を調整してもらわねばならない場合がある。
しかし、リキッドレイアウトでは、どんなサイズだろうと、調整の手間は必要ない。
ユーザビリティの観点からすると、優れていると言える。
変更は簡単で、メインページの<body>タグの属性を修正して、再構築すればいい。
<body class="layout-three-column">▼ <body class="layout-three-column-liquid">
バナーの下にナビゲーションを付ける。
バナーとはタイトルやサイト説明文のある部分だ。
『Movable Typeでつくる!最強のブログサイト』のp192にナビゲーションメニューを付ける方法が紹介されている。
まずカテゴリーを５つぐらい作成し、各カテゴリーのトップページへのリンクをエディターで作成する。
次にそれをリストタグ（<ul><li></li></ul>）ではさむ。
そこに「nav」というセレクタ（id）を指定して、その「nav」をcssで定義する。
<ul id="nav"><li><a href="http://seikou.info/blog/">TOPページ</a></li>
<li><a href="http://seikou.info/blog/cat2/">インストール</a></li>
<li><a href="http://seikou.info/blog/cat4/">デザイン</a></li>
<li><a href="http://seikou.info/blog/tb/">TB・コメント</a></li>
<li><a href="http://seikou.info/blog/cat5/">アフィリエイト</a></li>
<li><a href="http://seikou.info/blog/mt/">MT修得日記</a></li></ul>
本に載っている通りに記述し、上記タグをバナーとページボディの中間に挿入して、「nav」の定義を付けくわえたCSSファイルをアップロードしてみたが、リストのまま。
思っていたような表示にならない。
Windowsならきちんと表示されるのだろうか？
StyleCatcher（スタイルキャッチャー）をインストールしたはいいが、気に入ったデザインのテンプレートがない。
しかも英語。(^_^;σ
そこで、頼みの綱『Movable Typeでつくる!最強のブログサイト』で紹介されていた小粋空間へ。
一目見て、配布しているテンプレートを利用させていただく。
さて、デザインのカスタマイズだが、StyleCatcherのテーマ用スタイルシートは管理画面から編集できない。
無理やりやったら、画面が文字だらけになる。(^_^;σ←びっくりしたよ〜
CSSファイルをFTPソフトでダウンロードして、エディターで編集保存、それをアップロードする。
背景色を変えて、枠線の色も変えた。
これは比較的簡単。
エントリータイトルはちょっと凝ったデザインにした。
/* エントリータイトル */
.entry-header {
margin: 0px 0 0;
color: #333300;
background-color: #f5f5f5;
font-size: 18px;
font-weight: bold;
padding: 2px 2px 2px 2px;
border-left: 20px solid #9c0
}