『WordPressを軽くしよう』や『ブログの調子が悪いかも』で紹介した『Head Cleaner』。
CSSを一つに統合したとき、Firefoxだけで表示がうまくいかない現象が解決した。

結論から言うとCSSの『font-family』の指定に、
下のような一般的でないフォントが指定されていたからみたいだ。

mona-gothic-jisx0208.1990-0

後方に指定していたのに、適応されていた。
なんでだろ？
AAとか表示するために一応設定してたんだけど、
『MS Pゴシック』だけで十分だよな。

今の指定は基本がこうなっている。

font-family:"ＭＳ Ｐゴシック","MS PGothic",sans-serif;

作者さんからコメント貰ったり、
いろいろ自分でも試行錯誤した結果、
こんな単純な事だったとはなー。

つい最近『Head Cleaner』って言うWordpress用のプラグイン入れたんだけど、
ちょっと調子悪いかも。

Firefox3の環境でブログがうまく表示されない。
僕だけかも知れないんで、ちょっとこのブログに来てくれる人に聞いてみたいなと。
1日ほど見た目悪いまま放置だｗ

今わかっているのは、どうやらCSSがうまく読み込めてないみたい（存在はしている）。
IEやOperaでは僕のパソコンでもうまく表示出来る。
一応解決策はあって、『Head Cleaner』の設定の『CSS, JS を動的生成する』って言うのをONにしたらいける。
でもこの項目がどう役立ってるのかわからない（；＞＜）

ブラウザ側のキャッシュが悪影響してるのかと思って、
ページキャッシュを削除してから再度ブログを確認しても、見た目が真っ白に文字が並ぶ感じ。
何が悪影響しているんだろうか？

あとこのブログはOperaでの表示がべらぼーに速い。
Opera>>IE>>（越えられるか微妙な壁）>>Firefox
他のページは
Opera≒Firefox>>IE
って感じかな？

2009.3.30　追記
この記事だけコメントスパムが多いのでコメント中止中。

最近異様にブログが重くなってきた。
TOPページを読み込むのに30秒とかかかってた。
と言ってもIEとかでは一瞬で表示出来るんだけどね。
自分のFirefox3の環境下だけで異様にもっさり。
一念発起して軽くしようといろいろ試して見た。

対策その一

前から導入していた軽くする対策は『キャッシュ』を利用する事だ。
Wordpressのプラグインの『WP Super Cache』を用いている。
このプラグインを入れるだけで相当軽くなるはず。
導入法は調べて頂戴。
基本的にPluginフォルダにUPして有効化するだけだけどね。
キャッシュを保持する時間は36000秒（10時間）にした。
過去記事はそうそう変更しないし、
不具合で変な表示になっても対応出来るように10時間。

対策その二

で、今回導入したのは『Head Cleaner (仮)』だ。
うちのブログの表示が遅い原因は3つある。
1つ目はJavascriptの読み込み、2つ目はCSSの読み込み、
そして画像の読み込みである。
影響の割合はJavascript：CSS：画像 ＝ 3：1：6 くらいだ。
画像はどうしようもないなーと思ったのでJavascriptとCSSに対策をする。

そこで『Head Cleaner (仮)』と出会う。
その機能は端的に言うとhead内の記述をスッキリする事だ。
このブログのCSSや、プラグインのCSS、Javascriptなどまとまってスッキリ。
記述的にも容量的にもね。
なぜ速くなるかという解説はこちら。
『Head Cleaner (仮) で、なぜ速くなるのか？』

その効果はいかほどなのか・・・
もう少し様子を見てみよう。

速さとは関係ないけどカテゴリーの並びの変更とか、iphoneでも表示出来るようにしたりとか、
ブログでコードを綺麗に表示出来るようにしたりとかもしてたりする。
コードの表示に関しては『ソースを色分けして見やすくするSyntax Highlighterの選択』が大変役に立った。

もうちょっと前に導入した『Litebox plugin for WordPress』なんだけど、
このブログのテーマとは相性が悪いらしく、うまく動かなかった部分があったのに気付いた。

そして新しいプラグインを入れようといろいろと探して『Slimbox 2』なるものに出会う。
なんだけど、これはプラグインじゃなくてJavascriptって言うのだった。
ぶっちゃけ導入が面倒だし、英語だし困った。
んで導入するには『jQuery.js』って言うのも必要らしく、さらに大変。

そんなこんなで勢い余って全部まとめたプラグインにしてみた。
pluginsフォルダにぶち込んで有効化したら使えるはず。
自分の所では使えていると思う。
諸事情でいきなりバージョン1.3なのはご愛敬。
アップデート予定は無いよ。
各人で『Slimbox2.js』を上書きアップデートしてね。

Download

プラグインをダウンロードする

使い方

pluginsフォルダにアップロードして有効化するだけで使えます。

画像をうにょーんと表示するには下のように書く。

<a href="http://www.hosimitu.com/img/2009/05/p1000952.jpg"  rel="lightbox" title="予想外の照り具合"rel="lightbox[1079]" />
<img src="http://www.hosimitu.com/img/2009/05/p1000952.jpg" alt="予想外の照り具合" />
</a>

『a』タグの中に『rel=”lightbox”』を書けばうにょーん対象になるのですが、
デフォルトの機能で『rel=”lightbox”』を自動で追加するようにしてあるので有効化するだけでOK。
『a』タグの中に『title=”～～～”』って書けば画像開いたときの説明が入る。

表示サンプル

こちらの記事も画像の表示に関して参考に。

注意

WordPressの環境によっては動かないかも知れない。
lightboxのプラグインは基本的にjQueryっていうスクリプトが使われてるんだけど、
動かない時はhead部分でまだ読み込まれていないかも知れない。
その場合は『slimbox.php』の19行目辺りのslimbox2.jsの上に以下を追加してpluginsフォルダにアップロードしてね。

<script src=\"http://www.google.com/jsapi\"></script>
<script>
  google.load(\"jquery\", \"1\");
</script>

　
　
2009.12.22　追記
小さなバージョンアップをした。
特にアップデートをしなくても良い小さなもの。『rel=”lightbox”』を自動挿入する部分を綺麗にしただけ。
2009.6.26　追記
他の人が作った『slimbox2』のプラグインを発見。
『WP-Slimbox2 Plugin』
2009.2.26　追記
『slimbox1.6.4』バージョンのプラグインがあったｗ
『Slimbox WordPress Plugin』

もう少し前の日記の『衝撃！うちの晩ご飯』において
画像の表示方法を変えてみた。
以前は別枠で画像だけを表示するようにしていたんだけど、
前出の記事ではうにょーんっと表示されるようにしてみた。

別枠で開く利点は画像を保存したり、
記事を見る上でうざったくない事だと思う。

うにょーんと表示するのは、
別枠が開かない事とかっこよさが利点かな？

どちらの方が良いかなと思うんだが、正直自分の意見だけでは微妙な感じ。
みんなはどう思うんだろ？

参考にしたページは『lightbox風に画像を表示できるプラグインいろいろ』。
1年くらい前の記事なんだけど、数多くのプラグインがまとめてあってわかりやすい。
記事元の人が使ってるのと同じものを導入してみた。
ブラウザの大きさによって画像を縮小したりするプラグインの方が良いと思うんだけど、
画質がかなり下がるのでやめた。
このブログの画像は基本的に800×600だから多くのパソコンで表示出来るんだけどね。