www.hbirds.net

i-blog というクールなテーマを見つけたので、jquerySlideMenuの追加等、色々とカスタマイズしてseroslod とあわせてメインのテーマとして使うことにしました。
・・・が、例によって、IE では微妙な表示のズレが生じています。ひとつは、IE の有名なCSSの解釈バグの一つで、margin の値を2倍にして表示してしまうバグです。
フロート要素のダブルマージンバグとしてよく知られたバグです。
右のサイドバーの中身、ヘッダー内の検索フォームと管理画面へのリンクが適正な表示位置より、右にズレています。
たぶん、右からのマージンを2倍にして表示しているのでしょう。
これについては、display:inline;をstyle.css の所定のところに当てることで回避できるはずです。とりあえず、右サイドバーについては、これで対応できました。
ヘッダー内については、CSS をざっと見た限りでは、問題箇所が見当たりません。もう一度良く見て見ます。

もう一つの異常は、スライドメニューの位置が縦方向に微妙にズレている点。
これは、どう対処するのか不明。少し研究してみます。
結果的には、ヘッダー内のズレも含めて、以下のテクニックでIEでだけ、別のCSSを適用することで回避しました。

.class {
width:200px; /* All browsers */
*width:250px; /* IE */
_width:300px; /* IE6 */
.width:200px; /* IE7 */
}

それにしてもクロスブラウザ対応は、本当に面倒です。
CSS の解釈がブラウザごとに違っていたり、解釈以前にバグがあったりで、とてもすべてのブラウザに対応することはできないように思いますが、IE6については、アクセス解析などをみると、いまだに使っている人がいるようなので、せめてIE6くらいには対応させようと思っているのですが、それだけでも結構手間がかかります。

サイトパフォーマンスの計測ツールのPage Speed やYSlowで、パフォーマンスアップのため、複数あるCSSを結合して数個に減らしなさいと言われていたのでやってみました。
プラグインのHaedCleanerでもやってくれるのですが、自分の場合は色々と設定を変えたりしても、どうしてもうまくいかず、結合すると表示が崩れてしまいました。
なので、力技で単純にテキストエディターを使ってファイルを繋げてしまいました。
具体的には、
1. style.css に　jquerycssmenu.css,dbx.css,shCore.css,shThemeDefault.cssを連結しました。
2. その他の使っているプラグインのcssをplugins_css.css として、一つにまとめました。　　skin.css,extras.css,dmsguestbook.css,kpicasa_gallery.css,pagenavi-css.css,media-library-gallery.css を連結しました。前の二つは、shadowbox-jsのcssです。
3. 次にプラグインを修正し、headerにcssを吐き出させないようコメントアウトしました。
　　修正したのは、dmsguestbook.php,dmsguestbook/admin.php,kpicasa_gallery.php,media-library-gallery.php,shadowbox-js.php,syntaxhighlighter.php,wp-pagenavi.php
4.　shadowbox-js,syntaxhighlighterの関連.gif,.pngをplugins_css.cssと同じフォルダにコピーします。
5. header.php に　plugins_css.css を定義します。

ｊQueryを使ったグローバルナビゲーションを設置してみました。
これで1クリックで目的のページに飛ぶことができるようになりました。
参考サイトは、Dynamic Drive CSS Library です。

Script Compressor というプラグインがあります。
javascript や CSS ファイルを圧縮して高速化を図るプラグインです。
先日、インストールした　PHP Speedy と似たようなプラグインのようです。
こちらの方は、まだ試してません。
インストール方法は、一般的なプラグインと同様です。

ページやカテゴリーごとにCSSを変えるスクリプト。
前のブロックはabout ページのときに、bgabout.cssを読み込むスクリプトです。
後ろのブロックは’走る’というカテゴリーのときに、bgrun.cssを読み込むスクリプトです。
たとえば、bgrun.cssとして、’走る’というテーマに相応しい背景画像をセットするといった使い方ができます。
ランダムに背景画像を切り替えるよりクールです。

<!-- ------ BACKGROUND IMAGES BY PAGE ------ -->
<?php if (is_page('about')) { ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/bgabout.css" type="text/css" media="all" />
<?php } ?>
<!-- ------ BACKGROUND IMAGES BY CATEGORY ------ -->
<?php if (is_category('走る')) { ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/bgrun.css" type="text/css" media="all" />
<?php } ?>

これで時々背景画像が切り替わるようになります。
WP Super Cache プラグインを使っているので、アクセスのたびにランダム表示にはならないかもしれません。
いつもアクセスしてくれる方（ほとんどいないと思いますが・・）へのCS（顧客満足度）アップの一環です。
とりあえず、美瑛の丘と片瀬西浜の夕陽の2種類のみですが、撮りためた写真のなかからクールなものを選んで、もう少し画像を増やそうかと思います。
応用すれば、ランダムではなく、ページやカテゴリーごとに背景を切り替えるとか、色々できそうです。

１．bgrdm0.css,bgrdm1.css を作っておく
たとえば、こんな感じです。

/* random background css */
body {
        background: url(images/biei.jpg) no-repeat 0 0 #fff;
        background-attachment:fixed;
        background-position:top center;
}

２.header.php に以下を追加

<script type="text/javascript">
var cssurl= new Array();
cssurl[0]="<?php bloginfo('stylesheet_directory'); ?>/bgrdm0.css";
cssurl[1]="<?php bloginfo('stylesheet_directory'); ?>/bgrdm1.css";
n= Math.floor(Math.random()*cssurl.length);
document.write("<link rel='stylesheet' type='text/css' href='"+cssurl[n]+"'>");
</script>