ホーム > ブログ整備 > リンクのギミック、favicon、カレンダーのリアルタイム化

リンクのギミック、favicon、カレンダーのリアルタイム化

この間、少しずつMTの整備をすすめている。

まず第一に、リンクの貼られた文字や画像のうえにポインタがくると右下にずれる、という動きをするように変更した。ぼくのブログでは、リンクの貼られた文字をうすいグレーにしており、しかも下線も表示されない設定にしてある。こうしたギミックがあったほうが、地とリンクの違いがわかっていいだろうとおもったからだ。これも、このブログでお世話になりっぱなしの小粋空間さんで紹介されていた方法による。

スタイルシートのなかで、リンクの設定を記述した箇所のうち、a:hoverとなっているブロックのなかに一行書き加えるだけでOKだ。ぼくは、最初試したとき、なぜかうまくいかず、何度目かで成功した。

なお、この手のギミックはなるべくさりげなく、ごく限定的に用いたほうがよい。

第二に、faviconを作成した。
お気に入りとかブックマーク、あるいはURLの前に表示される小さなアイコンである。なんというのか名前を知らなかったが、「お気に入り」「アイコン」で検索すると、いろいろ出てくる。16×16ドットで、Icoという形式のファイルである。IllustratorやPhotoshopでつくってIcoファイルに変換するか、最初からアイコン作成ソフトでつくる必要があるらしい。ソフトは、フリーとかシェアウェアでいくつか見つけられる。

昔懐かしいペイントソフトの要領で、ドットを塗りつぶしてアイコンをつくる。なにしろ小さなものだから、あまり凝りすぎてもつぶれてしまってよくわからない。シンプルなものを何種類かつくって、そのなかのひとつを選んでアップロードし、「favicon.ico」にリネームする。スタイルシートのヘッダのなかに

link rel=”SHORTCUT ICON” href=”favicon.ico”

を挿入するだけである。favicon画像のファイル名にfavicon以外の名前をつけてもいいらしい。何度か別名で試してみたもののうまくいかず、faviconに戻したらうまくいった。なぜだろう?

これとは別に、ブラウザ側もいったん古い情報を削除しておく必要がある。ぼくのSafariには古いfaviconの情報が残っていたため、サーバ側のデータを置き換えても、表示は古いままだった。るばあいは、キャッシュを削除しなければならない。Safariを終了、ユーザー名>ライブラリ>Safari>iconsで、このiconsという名のフォルダの中身を全部削除し、再度Safariを起動して、当該サイトへアクセスすれば、ぶじに新しいfaviconに置き換わる。

第三に、リアルタイムカレンダーに差し替えた。
カレンダーというのは、トップページでエントリー欄の左隣にあるカレンダーのことだ。この手のカレンダーはあちこちのブログでわりあいよく見かけるが、以前はMTでも、デフォルトテンプレートに含まれていたそうだ。最新版3.2から削除されてしまったとのことで、今後は少なくなっていくのかもしれない。しかし、月内で投稿のあった日が一目瞭然であるのはもちろん、そうした機能的な意味だけでなく、逐次投稿していくブログというメディアのあり方にこのカレンダーは不可欠なアイテムだといってもいいだろう。

ぼくがつかわせていただいている小粋空間さんのテンプレートでは、左のようなきれいなカレンダーを描くことができる。投稿日は色わけされており、ブラウズしている当日の部分は枠線で強調される。

ところが、この「本日」表示の枠線、じつはブログをブラウズしているその日を表示するわけではない。最後にMTのサイトを再構築した日を表すのである。これは、MTタグ(MT用に拡張されたタグ)がそうなっているためで、仕様みたいなものらしい。むろんぼくはそんなこととは露知らず、最初このことに気づいたときは、てっきりぼくのテンプレートのカスタマイズの仕方が誤っていたのかと焦ったものであった。

困ったときの小粋空間さん、ということで、同サイトを調べてみると、リアルタイムに当日を表示してくれるカレンダーのスクリプトを紹介してくださっていた。方法はふたつあるらしい。ひとつは、PHPを利用するものと、JavaScriptをつかう方法。前者はけっこう手がかかりそうなうえ、ぼくには理屈がよくわからない。そこで後者を利用することにした。方法は簡単、小粋空間さんのこのページにあるように、テンプレートの一部を修正するだけである。

これで、リアルタイムカレンダーに変身だ! と意気込んでサイトを確認してみると、本日表示の枠線が消えてしまっていた。テンプレートの当該箇所をチェックしてみたり、何度か再構築しなおしてみたりしたが、症状に変化なし。

そこで、小粋空間さんの上述のページのコメント欄に、この症状を説明して対処法の教えを請うた。翌日、さっそく回答をいただいた。ぼくのブログでは「年」「月」「日」の表示を英語表示にしているため、一部スクリプトを再修正する必要があるとのこと。

教えのとおりにメイン・テンプレートを書き直してみると、本日のところにちゃんと枠線が現れていた。迅速にして的確な小粋空間さんのご教示の賜物である。