立て続けにCSSのメモをしてますが、最後に。
<ul>
<li><a href=”/”>a</a></li>
<li><a href=”/”>b</a></li>
<li><a href=”/”>c</a></li>
</ul>
なんて、メニューを横並びにa要素をブロック表示にして、floatで
回り込みさせるやり方で、これまたIE6の対応のために。
aタグに幅や高さを指定してfloatさせるんですが、aタグのCSSに
floatを指定するとIE6では階段状のように段々に下にずれていく。
解決策としては、aタグにdisplay: blockと幅高さ指定し、
liタグにfloatを指定する。こうすればIE6でもだいじょうぶ。
aタグのCSSでは3つを駆使したりしますよね。a:linkは意味ないので
考えないことにして、ちょっとしたCSSの謎をメモ。
これまた、IE6の現象なのでそろそろどうでもいいとえば、
どうでもいいのですが、a:visitedとa:hoverの位置をCSS記述上で
a:visitedを後にa:hoverを前に書くとover時におかしなことになる点について。
a
a:visited
a:hover
こうするとvisited後でもhover時に、overが正常に反映される。
a
a:hover
a:visited
こうするとvisited後だとhover時にvisited要素が表示される。
もちろん、要素がかぶってなければ問題ないですが。
通常、visited要素がhover要素を上回るってことはないはず。
よって、a:hoverを下に記述するといいってことかな。
bodyに背景色をつけていて、mainの入れ物なんかに白を一面に敷きたい！
何てことがよくあります。しかし、floatでleftやrightに振っていると
mainの背景が下まで続かなく、何でだ？という時はmainの中にclear: both;
をさせるmain-bottomをmainの幅で、floatした要素の下にもってきて、
mainの背景色を下まで続けたりします。footerとして扱ってもいいですよね。
main-bottomに、clear: both;
<div id=”main”>
<div id=”left”>
</div>
<div id=”right”>
</div>
<div id=”main-bottom”>
</div>
</div>
しかし、IE6ではこれでもアレ？ってことがあってclear: both;と同時に
幅の指定もしっかりするとIE6でも正常に機能します。
floatする時は、幅指定をしましょう！というのは通説ですが、
clearする時にも幅指定をしっかりしましょう！ということに
なるでしょうか。
あまり使う必要もなく、しっかりと認識していなかったので。
普通、idだけとかclassだけとかで事足りてしまうので、
意識してなかったですが、やり方によっては便利な2つ化。
指定方法は、
class2つでの発想としては、classを変えたいのだけ置き換えてではなく、
classをもう一つ付け加えて対応させるという発想ですね。
今までは、以前使っていた手間の掛かるCSSを引っ張り出して、
入れ替えて何てやってましたが、最近では0から書いた方が
速いことが多くなってきました。
CSSは省略化を考えずガンガン突っ込んでいくという考え方は
変わってませんが、省略化も綿密に考えるのも面白いなぁと
思えてきました。まぁそこに時間かけても意味ないですけどね。
MTEntriesで
なんてソートの仕方ができるけど、インデックステンプレートであれば問題ないが、アーカイブテンプレート（カテゴリーで試して）では、sort_by=”field:カスタムフィールド項目”が機能しない。通常のブログ記事公開設定順になってしまうエラー？。
どちらにしても、sortは頭文字だけソートして並べ替えてしまう問題をはらんでいる。
他の項目で001, 020, 003にすれば対応できるがかなり面倒くさい。
ソートプログラムなんかで頭文字だけでなく考慮されてたりするが、
数字以外の別項目が含んでくると頭文字になったり…ソート難し。
<?php include(’絶対パスURL’); ?>
なんていうPHPのインクルードをよく使う。しかし、CORESERVERでは高速化の都合とかで通常の絶対URL（相対）はエラーになる。
改善法その１は、.htaccessに
php_flag allow_url_fopen on
php_flag allow_url_include on
と記載する。下の行追加だけでも通常URL指定で表示できた。そして、
改善法その２は、フルパスで指定する、
<?php include(’フルパス’); ?>
何だか不思議な感じがしたが問題なく表示できた。
CORESERVER的にはinclude / require によるURLの取得について改善法その１は推奨していない。たぶん高速化が鈍化するから？でしょうか。
よってCOERSERVERでPHP includeする場合はフルパスで記述することに！
SoftBankで気になっていたVGA画面での画像サイズだが、docomoはau同様に携帯機種画面の幅は480pxの携帯でも240pxで換算（拡大）して表示していたが、iモードブラウザ2.0では、VGA描画モードの追加というのがあり、SoftBankのように480pxで表示するので画像サイズが小さく見えてしまいレイアウトが定まらないのが、本当にやっかいですね。
携帯サイト標準希望。
携帯サイトで背景色を変えて見出しにすることがよく使われる。
大体下記の２種類が標準的なようだ。
<table width=”100%” bgcolor=”#FFCC00″><tr><td>
テキスト1
</td></tr></table>
または、
<div style=”background:#CC33CC”>テキスト2</div>
PCではhxタグにCSSで背景色を設定すればバー状になるが、携帯だと３キャリア背景に色は付かない。しかし、iモードブラウザ2.0に対応していないdocomoはdiv styleでは背景色が付かないので、やむなくtableタグで現状はやるのが一般的に思える。
docomoのiモードブラウザ2.0が一般的になればWEB標準ならぬ、携帯標準の兆しも見えてきそうだ。が。
iモードブラウザ2.0 - http://www.nttdocomo.co.jp/service/imode/make/content/browser/browser2/
DWでCSSではなく、HTMLタグにする設定がアヤフヤだったので備忘録。
環境設定 > 一般 > HTMLタグの代わりにCSSを使用
のチェックマークをはずす で解決。
環境設定 > バリデータ は基本的に関係なくDOCTYPEがDWに登録されてない場合の自動入力を<br>にするか<br />にするかの時に設定する。
携帯サイトを編集するとなるとdocomoが外部CSSに対応していなかったため、CSSが使えない！というのが通例でfontタグとかHTMLタグで編集していたものの、iモードブラウザ2.0対応i-CSS2になって外部CSSを遂にdocomoもサポートとなり、携帯サイトも外部CSSが標準になる日は近い。
iPhoneやAndroidなどの携帯用にWordPressを表示してくれるプラグインWPtouch: Mobile Plugin + Theme for WordPressが刺激的です。WPならではのプラグイン一発で携帯用テーマで表示されます。ページ最下部にはスイッチ式のPC表示切り替えスイッチがあり、タッチすると通常のテーマで表示されます。PCサイトの最下部にもプラグインの導入でMobile用にまた見た目を戻すことも可能。MTでは無理ではないが、CSSからテンプレートの増強から再構築の倍増などで大変手間がかかるこのタッチ式携帯サイトに対応できるとは、さすがWPならではです。
デザインも見事に美しく、カレンダー日付アイコンが際だつカッコイイ仕上がりなってます。まだ試してない方はプラグイン導入後あっさりiPhone,アンドロイドの次世代タッチ式携帯サイトができあがりますよ。
Mobile Plugin + Theme for WordPress
WPtouch
