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

先日の「ブログに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に変更しました。

似顔絵アバターメーカー(Abi-Station)を使用して自分のアバターを作成し、それをブログのプロフィール部分に表示しました。

似顔絵アバターメーカーでは、体の各部分や服装・アクセサリーなど、あらかじめ用意されたパーツから自分の好きのものと色を組み合わせて、アバターを作成することができます。

私は普段生やしているヒゲと、ファンである阪神タイガースの応援衣装を組み合わせて作成しました。

Abi-Stationではこの他にも、絵日記メーカーや似顔絵イラストメーカーなどの公開、ゲームのCGIの配布が行われています。