カテゴリー「ブログカスタマイズ」アーカイブ　(8/9ページ)

InternetExplorer7での閲覧時にLiteboxを正常動作させるために、先日一度HTMLとスタイルシートの修正を行いました。

当ブログは3カラムレイアウトで、スタイルシートのpositionプロパティを使って左右のサイドバーとエントリー本文の表示位置を指定していたのですが、これが動作不具合の原因であることがわかりました。それまでは画面の描画をエントリー本文・左サイドバー・右サイドバーの順に行っていました。これをpositionを使わずにLiteboxを動作させるために、左サイドバー・エントリー・右サイドバーと左から順に描画するように変更しました。

しかしこの方法だとエントリーの表示に時間がかかることがありました。サイドバー内にJavaScriptで外部サーバへアクセスするブログツールがある場合、その読み込みが完了するまで次の描画処理が行われません。サーバからの反応が遅い場合は、その分エントリーの表示も待たなければいけないということになります。

これを解消するためにエントリー部分を最初に描画する方法がないかと調べてみました。すると、スタイルシートのfloatプロパティを使って各カラムの回り込みを制御することで可能なことがわかりました。ということで、今回floatを使ったレイアウトに変更しました。IE7で閲覧したところLiteboxは正常動作しているようです。

MovableType標準のテンプレートはゴチャゴチャしていて分かりにくかったので、小粋空間で配布されているテンプレートをもとに、スタイルシートや各アーカイブページ等を作り直しました。

先日の「ブログにLiteboxを導入」のエントリーでも書いたとおり、InternetExplorer7での閲覧時、Liteboxの動作に不具合がありました。HTMLのタグやスタイルシートを削除しながら不具合箇所を調べていったところ、ページのレイアウトを構成するためのスタイルシートに原因があり、これを修正しました。

動作確認のためのサンプル画像

Liteboxスクリプトに同梱の画像を使用しています。

これまでブログに小粋空間で紹介されているLightboxJSを導入していましたが、同じ小粋空間の「Litebox 1.0 をブログに適用する」を参考に、Liteboxに変更しました。

基本的な動作はLightboxJSと変わりませんが、拡大表示時のアニメーションが多少変更になり、同一グループの画像をスライドショーで表示できるようになりました。

JavaScriptファイルとスタイルシートの追加、拡大画像を表示するためのアンカータグにrel属性を付けることで完成します。

先日InternetExplorer7をインストールした際に当ブログの表示を確認したところLightboxJSの動作がおかしかったのですが、このLiteboxでも同じような症状が出ています。

拡大したい画像をクリックすると、ブラウザのスクロールバーを一番上にもっていっている時の領域のみ画面が暗くなり、それ以外の領域では背景色に拡大画像がオーバーレイ表示されてしまいます。

調べてみたところ、当ブログではDOCTYPE宣言をXHTML1.0で設定しているのですが、これを削除することで正常に動作するようになりました。しかしDOCTYPE宣言を削除するとW3Cのチェックに通らなくなるため外したくありません。

なんとか正常に動作するように調べてみようと思います。

「Tag Cloud のページを作る」(小粋空間)を参考に、当ブログにTagCloudを導入しました。MovableType専用のカスタマイズで、プラグインのインストールとテンプレートを作成することで完成しました。

エントリーにキーワード（タグ）を設定し、それの一覧を表示するページを作成します。複数のエントリーに同一のタグが設定されるどほタグの出現頻度が高いことになり、一覧表示されている文字の大小で出現頻度を知ることができます。また、2週間以内・2ヶ月以内・1年以内にそれぞれ更新があったもの、1年間更新がないものを色分けして表示しています。タグをクリックすると関連付けされたエントリーの一覧を表示します。

当ブログでは、検索エンジンからよく検索されるキーワードをタグとして設定してみました。

当ブログのTagCloudのページ

2007年9月9日 追記

ブログウェアをMovableType4へアップグレードしたのに伴い、TagSupplementalsプラグインを利用したものに変更しました。

カテゴリーアーカイブと月別アーカイブのページ分割(小粋空間)を参考に、ブログのアーカイブページの分割を行いました。

これは、カテゴリーアーカイブや月別アーカイブなど大量のエントリーがあるページを、数ページずつ分割して公開するものです。アーカイブページの最下部にページ移動用のリンクが表示され、それをクリックすることで別のページへ移動できるようになります。

MovableType専用のカスタマイズで、プラグインの導入とテンプレートの一部追記で簡単に分割化ができて、これで多少は表示が軽くなったことと思います。

ブログのサイドバーに、ライブカメラ映像による私の部屋の様子と、オンラインステータスのアイコンを表示してみました。

部屋の様子の撮影にはLiveCapture2を使用しました。カメラを私の後方に設置して撮影、LiveCapture2のアップロード機能で画像をサーバへアップロードしブログに表示しています。ブサイクな管理人が映っていることがあるかもしれませんが、その際は拝んで供養してやってくださいませ

オンラインステータスはライブカメラ映像の下に表示しています。自分で作成した簡単なスクリプトにより、普段使用しているパソコンがネットに接続しているか判別し、状況に合ったアイコンを表示するようにしています。アイコンはヤフーメッセンジャーのものを利用させていただいております。

Lightbox JS で画像を表示する(小粋空間)のエントリーを参考に、当ブログに「LightboxJS」を導入しました。

上の画像をクリックしてみてください。これは、サムネールをクリックするとページ全体が暗くなり、同じウィンドウ上に元の画像がフレーム付きで拡大表示されるようになるものです。

Lightbox JSホームページよりスクリプトや画像など必要なファイルをダウンロード。使用するブログサービスによりスクリプトファイルとスタイルシートを修正し、ダウンロードしたすべてのファイルをサーバにアップロードすれば完了です。画面上にFlashのブログパーツ等が配置されている場合、画像がFlashの下に隠れてしまう不具合がありますが、小粋空間のサイトに対処法が掲載されています。

これまではサムネール画像をクリックした場合、ブラウザの新しいページで元の画像が表示されていましたが、LightboxJSの導入で見た目が良くなりました。

2006年11月12日 追記

LightboxJSからLiteboxに変更しました。