M.tradingサイト構築を続けてきたが、思っていたより大変だった。

XOOPS Cube
WorkPress（Blog用）
を、導入するだけの時点で、つまづくことが多すぎた。 更に、生成されるhtmlの構造と、CSSを解析して、オリジナルのデザインに変更するのも膨大な時間がかかった。
また、各種ブラウザに対応させるためのCSSも同じくらい大変な作業だった。

私のデザインの方針は、主となるものに注目が集まるようにし、従となるものは削除するか目立たないようにする、ということだ。私のウェッブサイトのデザインはそうした方針で貫いている。

XOOPS CubeやWorkPressはフリーの素晴らしいソフトウェアだが、そのまま使うと情報過多で利用者が戸惑ってしまうだろう。もちろん、表示できる情報は有った方が良く不要な情報は表示しないようにしてゆけばいいわけなんだが。

さて、前から懸案だった、www.moderns.co.jpのトップページをリニューアルした。
modern design laboratoryは、つまるところ、ある近代主義者の軌跡になる。

掲示板、Blogのコメント・トラックバックとスパムが慘いので、対策に半日かかった今日でした。
Blogは、P_BLOGの最新版に入れ替えたのだけど、久しぶりだったので設定の方法を忘れていた。MySQLのデータベース名に合わせて、一行設定し直さないといけなかったのだけど、それが分かるまで時間がかかってしまった。

次に、掲示板のスパム対策は、色々と調べたけれど、.htaccessによるアクセス制限にすることにした。

Eriane ver 0.6.1 » SPAMコメント その2 の、htaccessサンプルが実に充実しているのでこれを試してみたが私のPCからもアクセス出来なくなってしまったので残念ながら使用できず。（追記：私のhtaccessファイルのアップロードのミスの可能性もある。）

あにょのブログ：アクセス制限　 の、「日本語を受け入れる設定の人以外を弾くための.htaccess」を利用することにした。

迷惑メールも多量に届いているし、もっと物事をシンプルにしたいものだ。

追記：上記の、htaccessの設定では残念ながら駄目だったので、IPアドレスによるアクセス制限にしてみた。これで大丈夫だろうか。

更に追記：softbank218177255073.bbtec.net とか、221x251x102x59.ap221.ftth.ucom.ne.jpとかの、日本のIPからも外国カジノのスパムが投稿されているので、日本以外のIPを不可にするだけでは足りないようだ。禁止ワードを設定できるようにするといいのだけど、掲示板をバージョンアップしなくちゃいけなくて、時間がかかりすぎる…

サーバ上のP_BLOGで利用しているMySQLのデータを、ローカルのMacに復元する方法。（他の環境ではうまくいくか不明。）

まず、サーバ上の、P_BLOGのDBステータスから、ファイルをバックアップする。

phpMyAdminでの復元

私は、ローカルのMacで構築してあるMySQLを、phpMyAdminで管理している。

phpMyAdmin

バックアップしたファイルを、MySQLにアップロードする。

• テキストファイルの場所に、バックアップしたファイルを選択。
• ファイルの文字セットを、latin1に。

utf8やujisでは、文字化けした。

なぜlatin1？

サーバ上のP_BLOGのステータス

P_BLOGのシステム環境の、DB Languageが、latin1であるからか？

（ここでは「相対サイズ」とは画面の解像度に合わせて変化するものと考える）

文字が多いウェッブページなら、本文のフォントを明朝にするかゴシックにするか、読み易いサイズを10.5ptか9ptか、利用者が決めれば良い。従って、CSS作成においては、h1,h2など見出しをLargeや120%の相対サイズで指定することになる。

margin-top : 20px ; とか、マージンなども相対サイズで指定するのが良いのだろうが、そこまでは今は気にしない！　将来、そのためのテクニックが集まってきたら考える事にしよう。

全てを相対サイズにしようとすると、写真も画面の解像度に合わせて変化するようにしにゃくちゃいけなくなるわけで、そこまでするのは難しい。

width : 800px;　などとコンテンツの幅を固定しているのは、文字の大きさ程には問題が少ないが、それでも環境によっては具合の悪いこともあるしまたユーザが自身で画面の大きさを決めたい場合もあるので、これもwidth : 80%;　などのように相対サイズにしようかどうかと考え中。

• Hotwired：スタイルシートガイド：単位について
• md : Web Design : 実際のところ、どうするのがいいのよ、フォントサイズ！ （私の別サイト、modern design laboratoryより）

デザインをIllustratorで作り込んでから、CSSをmiで作成する。チェックするブラウザは、Firefox（Mac）やCamino（Mac）など、CSS対応が優れているものを使う。

CSSで意図通りのデザインが表示されるようになったら、次にSafari（Mac）・Firefox（Win）ブラウザでの表示をチェックし、CSSに修正を加えてゆく。できの悪いInternet Explorer（Win）に対応させるのは最後にする。Win IEのバグである、「_」を利用し、「_color : #FFFFFF ;」など、Win IEにだけ適用するテクニックを使う。

ブラウザごとにCSSファイルを振り分けることを行うのが、最もブラウザの差への対応に優れているのは判っているけれども、それにはあまり労力を使いたくないため、CSSは1ファイルにまとめることにしている。従って、Win IE 5.5とIE 6との差への対応ができなかったりするが、気にしない！

font-family : "HiraKakuPro-W3", "ヒラギノ角ゴ Pro W3", sans-serif ;
font-family : "HiraKakuPro-W6", "ヒラギノ角ゴ Pro W6", sans-serif ;
font-family : "HiraKakuStd-W8", "ヒラギノ角ゴ Std W8", sans-serif ;
font-family : "HiraMaruPro-W4", "ヒラギノ丸ゴ Pro W4";
font-family : "HiraMinPro-W3", "ヒラギノ明朝 Pro W3", serif ;
font-family : "HiraMinPro-W6", "ヒラギノ明朝 Pro W6", serif ;

を基本とする。

ポストスクリプト名のHiraKakuProを使うのがテクニック

これを、h1,h2などに適用するには、font-weightのboldを無効にし、

h1 {
    font-family : "HiraKakuPro-W6", "ヒラギノ角ゴ Pro W6"
                    , sans-serif ;
    font-weight : normal ;
}

となる。

更に、Windowsに対応させるとしたら、例えば、Microsoft Officeをインストールするとあるはずの「HGP創英角ｺﾞｼｯｸUB」を使用する。

h1 {
    font-family : "HiraKakuPro-W6", "ヒラギノ角ゴ Pro W6"
                , "HGP創英角ｺﾞｼｯｸUB", sans-serif ;
    font-weight : normal ;
}

仮に、WinIEで、h1,h2などで、"HGP創英角ｺﾞｼｯｸUB"を使わないとし、boldを指定するのなら、

h1 {
    font-family : "HiraKakuPro-W6", "ヒラギノ角ゴ Pro W6"
                , sans-serif ;
    _font-weight : bold ;
}

font-weight : bold ; の前の、 _は、Win IEのみに適用するためのコツ。
このようなことをしなければいけないのは、
名称に日本語文字を含むフォントファミリの指定を無視する
というバグがSafariにあるためで、バグ直ったら以上の事は忘れてよいテクニック。

• Safariでの日本語フォントの指定
• フォント指定の順番
• Safari CSS i@GoLive CS
• Testing the Apple Hiragino font
• Tigerのフォント回り