cssの中で一番使いたくて一番使いにくいのがfloat。ブラウザ間の解釈が違うのはしょうがないとして、段組みできるような属性が欲しいと心から思う。そもそもfloatだって段組みのためのものじゃないわけだし…。

試しにA LIST APARTのまねっこをしてfloatを使ってサイドメニューとメインコンテンツに振り分けてみたものの、firefoxで崩れる(IEはOKだった…)。たぶんwidthやらmarginやらが関係してるんだろうけど、…なんでだろ。プロのウェブデザイナーはすごいなあと思った。

時間ができたらこのページも改装しよっと。固定幅に挑戦だ。

COREBlogの固定幅デザインをしたいわけですが、とりあえずのミッションは

• 固定幅にする
• kahakai

のメニューデザインをぱくって使ってみたい

という2点。

まずはkahakaiのメニューデザインをぱくろう。これは結構簡単。というかそのまま流用すればいいのだけど、それじゃああまり芸がないでしょうというわけで何らかの小細工を入れたい。

まず、kahakaiでは以下のようになってる。

div.menu {

    margin: 0px auto;

    border-bottom: none;

    color: white;

    width: 640px;

    margin-top: 4px;

    padding: 3px 0px 3px 0px;

    text-align: center;

}



div.menu ul {

    list-style-type: none;

    margin-left: 0px;

    padding-left: 10px;

    display: inline;

}  	



div.menu li {

    display: inline;

    background: #95b0de;

    padding: 5px;

    text-transform: uppercase;

    font-size: 8pt;

}

リストをインライン要素にしてるのがミソですな。ふーむ、おもしろい。んでもブロック要素でfloatしてもいいですな。floatだけに不安はあるけれど挑戦してみよう。

ポイントは、liをブロック要素にして左にフロートさせることですな。

基本的にこの方向でこのページの上にカテゴリリスト付けてみた（必要あるのかどうかは別だけど…）。ブロック＆フロートでいいところは、ホバーで色が変わるように設定できること。

というわけでこんな具合になりましたとさ。

#menu ul {

  margin: 0 9px;

  padding: 0;

  list-style-type: none;

}  	



#menu ul li {

  margin: 0;

  padding: 0;

  display: block;

  float: left;

}



#menu ul li a { 

  display: block;

  margin: 0 7px;

  padding: 5px 13px;

  background-color: #334D66;

  color: #fff;

  font-size: 12px;

  text-align: center;

  text-decoration: none;

}

  

#menu ul li a:hover {

  background-color: #ff8800;

  color: #fff;

}

• たとえばCSSを複数用意する。
• 訪問者にCSSを選んでもらう。
• 次に来たときには選んだCSSで表示する。

それではどうしようか。

一般的な方法としてどうなのかはよくわからんけど、とりあえずcookieで何とかできないものかと考えたわけで。

cookieにCSSの情報を記録しておこうではないか(・∀・)b

基本的に知っておくべきこととしては

• cookieは発行したサイトにアクセスしたときに勝手に情報を送信する
• 送信された情報はサーバ側で環境変数として使用可能

ということくらいだろうか。

Zopeでcookieに関連したものとしては「setCookie()」というのがあるようだ。

<dtml-call expr="RESPONSE.setCookie('クッキーに保存する変数の名前', '値', expires='日付')">

みたいなふうにするらすぃ（他にもオプションはある）。

のでこれを使うことにするナリ。

プルダウンメニューでCSSを選ばせるのはこの前考えたこれを利用する。でもって、選んでもらったCSSをcookieに保存しておけばいいですかな。

ふだんはNagosui_cssというCSSを適用しているけど、ここでNagosui_css_2というもう一つのCSSを用意し、cssという変数によって変えることにしよう。

ということでプルダウンメニューの部分はこんな感じで。

<form method="post" action="index_html">
  <select name="css">
    <option value="none" selected disabled >Select CSS</option>
    <option value="default">default</option>
    <option value="dark">dark</option>
  </select>
  <input type="submit" value="Change">
</form>

#value="default"を選んだ場合にはNagosui_cssを、#value="dark"を選んだ場合にはNagosui_css_2を適用するようにする。

cssという変数にdefault/darkという値をぶち込んでPOSTするのだヾ(*`Д´)ノ

ということでサイトのヘッダ部分は、REQUESTの中にcssという変数があるかどうかによって条件分岐。

<dtml-try>
  <dtml-if expr="REQUEST.css == 'default'">
    <style type="text/css" media="all">@import "Nagosui_css";</style>
     <dtml-call "RESPONSE.setCookie('css', 'default', expires=(ZopeTime() + 30).rfc822())">
  <dtml-elif expr="REQUEST.css == 'dark'">
    <style type="text/css" media="all">@import "Nagosui_css_2";</style>
     <dtml-call "RESPONSE.setCookie('css', 'dark', expires=(ZopeTime() + 30).rfc822())">
  <dtml-else>
    <style type="text/css" media="all">@import "Nagosui_css";</style>
     <dtml-call "RESPONSE.setCookie('css', 'default', expires=(ZopeTime() + 30).rfc822())">
  </dtml-if>
<dtml-except>
    <style type="text/css" media="all">@import "Nagosui_css";</style>
     <dtml-call "RESPONSE.setCookie('css', 'default', expires=(ZopeTime() + 30).rfc822())">
</dtml-try>

expiresの書き方に少しとまどったのだけど、ZopeTime()は日付でカウントしているということをどこかで読んだことがあったので、そ れをrfc822フォーマットで出力すればよいと考えて、無事書くことができました。ここでは一応30日間保存しておくように設定しておきまふ （ZopeTime()+ 30のところ）。

とりあえず今回も一応予想通りの動きはしてくれたのでホッと一安心です。

あんまりスマートじゃないような気がしないでもないですが(*´Д`)…

今週は仕事が休みなので作ってみました。

→ダウンロード( ´艸｀)

使い方

（簡単な説明は、同梱されているREADMEを参照してください）

・ダウンロードした「HINAGATA.zexp」を　「Zopeのインスタンスフォルダ/import」　にコピーしてください。

・Zope管理画面にいって、COREBlog/skinでimportします。

・importが正常に行われれば「successfully imported」とメッセージが出ます。

・HINAGATAフォルダには修正したmodulesフォルダが入っていますので、これをコピーし、オリジナルのmodulesフォルダと入れ替えます（オリジナルはバックアップしておきましょう）。

・本スキンでは「css」というフォルダでテーマを管理しますので、COREBlogフォルダに「css」というフォルダを追加します。

から好きなものを選びます。ここでは「swich02」というテーマを使ってみます。

・まずは「css」フォルダ内に「swich02」というフォルダを作りましょう。

・「switch02」フォルダ内に「style.css」「base.css」というファイルを追加します。

サイトのswitch02のページにテーマ用style.cssがありますので、これをコピー＆ペーストします。

に、base.cssが載っていますのでこれをコピー＆ペーストします。

サイトのswitch02のページにテーマ用の画像がありますので、これをダウンロードし、switch02フォルダに追加します。

・最終的に　COREBlog/css/switch02　フォルダはこんな感じ。

・ここまでできたらCOREBlogのSKIN設定タブにいきましょう。右上にスキンを選ぶプルダウンメニューがありますので、ここからHINAGATAを選択します。

・CSS Nameの欄に、cssフォルダ内にあるテーマフォルダの名前（今回の場合は「switch02」）を記入します。サブタイトルの色は適宜変えてください。

これで完成。

現在の問題点

• monthlistで表示される「other entries」の行間と、categorylistおよびdaylistで表示される「other entries」の行間が一致しない
• 一部の「boxes-**」テーマで、一部の文字色が背景色と一致していまい、文字が読めない
• 「tulip」テーマでサイドメニュー背景画像がはみ出る