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

ブログの各エントリーページに、そのエントリーに付けたタグを表示するようにしてみました。

MovableTypeのタグ表示関連のテンプレートタグを利用し、エントリーにタグが付いている場合はそれを表示。タグをクリックすると同じタグが付いたエントリーの一覧を表示します。

私が独自に付けたものの他に、当ブログに対しよく検索されるキーワードをタグとして設定しました。
もし気になるタグがあればクリックしてみてくださいね。

最近のホームページやブログでは、ページの一部の読み込みが完了するまでの間ローディング画像が表示されている場合がありますね。当ブログでは先日TagCloudのページを作成したのですが、タグの読み込みに時間がかかるようなので、その間ローディング画像を表示するようにしてみました。

ローディング画像の素材を配布しているところを探していたところ、画像を作成するためのサイトを見つけました。

Load Info - gif generator
http://www.loadinfo.net/

いくつか用意されているパターンから好きなものを選び、色や大きさを指定すると画像が作成されるので、それを保存すればOK。あとはサーバにアップロードし、ホームページやブログに組み込むだけです。

今回作成したローディング画像

比較的よく見かけるようなシンプルなものにしてみました。

以前から当ブログではTagwireプラグインを使用したTagCloudページを導入していましたが、先日ブログウェアをMovableType4(MT4)にアップグレードした際、テンプレートの作り直しやプラグインの動作検証のため一時休止していましたが、MovableType備忘録でエントリー「TagSupplementals プラグインでタグクラウドを作る」が公開されていたので、こちらを参考に再度導入しました。

エントリーを拝見すると、TagwireプラグインはMT4では使えないようなので、新たにTagSupplementalsプラグインをインストールし、テンプレートを作り直しました。

当ブログのTagCloudページ

以前と同様、私が独自に設定したキーワードと、当ブログを訪問される際によく利用される検索ワードをタグとして設定しました。

当ブログは以前から自作のメールフォームを設置していて、時々ではありますがブログに書いてある事についての質問などをメールでいただくことがありました。

先日ブログウェアであるMovableTypeをアップグレードしたのを機に、メールフォームをThe blog of H.Fujimotoで公開しているメールフォームプラグインを利用したものに変更しました。テンプレートを作成するのに少し手間取りましたが、サイトで説明されている手順どおりで問題無く設置できました。

ご意見・質問・苦情・などありましたらメールフォームから投稿していただけると嬉しいです。

当ブログで使用しているMovableTypeを最新のバージョン4に変更しました。バージョン3系で使用していたプラグインとの互換性を確認するのに手間取ったり、新しい管理画面に慣れるのにちょっと苦労しました。

各テンプレートで使用している共通部分をモジュール化するためテンプレートを組み直し、また、サイトデザインについて背景を白から黒に変更しました。掲載している画像に影を付けるドロップシャドウ効果を施していましたが、背景が黒の場合見た目が悪くなるので廃止しました。

イロイロな新機能があるようなので、少しずつ確認して活用していこうと思います。

ネットで調べごとをしていると「Favicon 設置」(小粋空間)という記事を発見しました。Favicon（ファビコン）とは、ブラウザのアドレスバーやお気に入り・ブックマーク時にサイト名の横に表示されるそのサイトのオリジナルアイコンです。記事を参考に当サイトにもFaviconを設置しました。

　 当サイトのFavicon

作成・設置方法
まず、ペイントソフトでアイコンのデザインを行い、png・gif・jpgのいずれかで保存します。次にFaviconJapanのサイト上で、アイコンをFavicon形式に変換します。なお、FaviconJapan以外にも変換できるサイトやソフトウェアがあるようです。変換したアイコンを自分のブログやホームページ領域にアップロード。最後にHTMLのヘッダ内にFaviconを読み込ませるlinkタグを追加すれば完成です。

一番時間がかかるのはアイコンのデザインでしょうか。私の場合はブログタイトルの頭文字「暇」をフォトショップを使い30秒ほどで書き上げましたが

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

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

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

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

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