Movable Type 備忘録
Movable Type 4.1 用テンプレート（TUBES）
こんばんわ^^
訪問者さんからテンプレートの作り方を質問されました。
今までも何回か同じような質問されたのですが、作り方と言われても困ってしまうというのが正直なところです。
ただ、わたしの場合は『最初ざっくり、後チマチマ (●´∀｀●)』が基本です。
要するに最初は自分がイメージした、ざっくりな近似色を割り当てといて、後で背景と前景を調整して自分が思い描いた配色に近づけていきます。
色は組み合わせによってだいぶ違いがあります( 同じ色でも明るめの背景と暗めの背景とでは印象が違うなど )ので、微妙に変えながら調整していきます。
実際に配色して気に入らない場合は、思いっきり配色を変更したりもします。
レイアウトに関してだけは最初にきっちりと計算します。
全体の幅を決めたら、サイドの幅などきっちり収まるよう計算することで、画像（サイズね）を作りやすいようにしてます。
てか、やっぱり説明しづらい （つω-`｡）
言葉で言って分かるようなら苦労しないわけでして、経験（といってもたかだか 1、2 年ですけど）的なところもあると思うので。
テンプレートはいろんなサイトさんで配布されてますので、そのテンプレートをイジくりまくって、とにかくたくさんのテンプレートを自分で作ってみるのと、ネットを徘徊していろんなサイトを見て感じるのが一番だと思います (￣∇￣)b
すいません、投げやりなかんじになってしまって (;￣∇￣A
さて気を取り直して、わたしにしてはめずらしい 3 カラムのテンプレート作ってみました。
テンプレートの作り方の話がでたのでチョビッと説明すると、このテンプレートの横幅は 960px です。
左サイドバー幅は 250px、右サイドバー幅は 170px で、センターが540px になります。
そして、左右サイドバーのマージンを 10px、センターの両端も 10px 考慮してますので、実際には、左( 240px )、右( 160px )、センター( 520px )が実サイズになります。センターに関してはさらに左右パディング( 10px )を取ってますので 500px になります。
この 10px のところにチューブ( tube )の画像がくるように作成するわけですね (￣∇￣)b
Movable Type 4.1 用テンプレート（BLADESILVER）
こんばんわ^^
先日から、配布するテンプレートを IE6.x の後方互換モードに対応するようにしたのですが・・・IE はやっぱりくせ者ですねぇ （；￣－￣）
わたしは最初に Safari でテンプレートを作ってから各ブラウザでの微調整や表示確認してます。
各ブラウザでできる限り同じように表示されるよう調整していくわけですが、Firefox や Opera などはほぼそのままイケるのに、IE で大幅に時間を費やします（つω-`｡）
IE6.x の標準モードならまだ素直にデザインすることができるんですけど、後方互換モードでは IE6.x に特化したスタイルを強いられます（つω-`｡）はぁ
Safari なんて HTML5 や CSS3 をサポートしてるのに･･･WEB フォントが使えるのに（。－ω－）ぼそ
さて、IE6.x の愚痴はこれくらいにして、以前ご紹介したこちらのテンプレート MT.2 for Movable Type 4をリニューアルしてみました。
良かったら使ってみてください (￣∇￣)/
正しいマークアップ（Another HTML-lint gateway）
こんにちわ^^
久しぶりに Another HTML-lint gateway やってみました。
以前、正しいマークアップってのに凝ったこともありましたが、配布してるテンプレートを Another HTML-lint gateway でも 100 点とれるよう修正しました。
Movable Type 4.1 用テンプレート（FLORAL）
こんにちわ^^
先日 JavaScript を使わずにツールチップを実装する方法がphpspot開発日誌さんとこでご紹介されてました。
内容見るととってもシンプル (●´∀｀●)♪
使い方は以下の通りです。
サンプル： <a href="#" class="tooltip">ツールチップ<span>カンタンに<a>タグにツールチップが実装できた。</span></a>
赤字の部分がツールチップとして表示されるテキストになります。CSS は以下の通りです。
a:hover {
background:#fff; /* なくてもいい*/
text-decoration:none; /* 不要なら削除*/
}
a.tooltip span {
display:none; /* 通常時はツールチップを非表示にしてますね*/
padding:2px 3px; /* ツールチップの余白*/
margin-left:8px; /* ツールチップの表示位置*/
width:130px; /* ツールチップの幅（高さは可変）*/
}
a.tooltip:hover span { /*これがツールチップ（<span>～</span>）のスタイルになります*/
z-index:10; /* 重なり順序のプライオリティを上げてみました*/
display:inline; /* これがポイントでしょうか*/
position:absolute; /* ツールチップの表示位置を任意設定するために必須*/
border:1px solid #ccc;
background:#fff;
color:#6c6c6c;
}
アンカー以外ではどうか･･･。
- サンプル：
ツールチップ<p>タグでも問題なし!! ただしモダンプラウザのみ。
こちらも問題なさそうですね。使い方は <a> タグを <p> タグに変更してそれに伴って CSS を以下のように変更しただけです。
p {
display:inline;
background:#59b9c6;
border:1px solid #089;
text-decoration:none;
cursor:pointer;
}
p:hover {
background:#698aab;
text-decoration:none;
cursor:pointer;
}
p.tooltip span {
display:none;
padding:2px 3px;
margin-left:8px;
width:130px;
}
p.tooltip:hover span{
z-index:10;
display:inline;
position:absolute;
border:1px solid #ccc;
background:#fff;
color:#6c6c6c;
}
ただし、上記 <p> タグのような使い方は IE6.x では使えませんのであしからず（；￣－￣）
さて、予告通り白系のテンプレートを作ってみましたのでご紹介します。
作ったといっても、つい最近までわたしのサイトで使ってたものを配布用にアレンジしたのと、チョビッとだけデザインを変更した程度ですの。
このテンプレートの表示確認してて始めて気づいたのですが、コメント投稿時の投稿者情報を Cookie に保存する機能が使えてませんでした。
てか、他サイトさんとこでもあまり使ってない機能だったのですっかり忘れてたわけですが、どうもデフォルトの mt.js 内のコードに問題ありな気がするのココロ。
とりあえず、改善したものを添付しております。
