今月（2009年9月）、サイト内でカスタマイズした点を中心にまとめて振り返ったりするエントリです。
今月初頭(2009年9月 2日）にMovable Type 5のベータテストが始まっているわけですが、、余計なところばかり構っていて、少しもテストらしいことをやっていなかったりします。
さて、今月カスタマイズしたところは以下のとおりです。
- AutoPagerize用のmicroformatをやめた
- はてなスターの表示スタイルの変更
- 検索ボックスのテキストのスタイルについて
- MT-PubSubHubbubプラグインの実装
- 分割ページの2ページ目以降のtitle要素にページ数
- LightboxをjQuery lightbox (balupton edition) に乗り換え
- 過去のぬり絵アーカイブページを作った
- ウェブページの一部に、Easy Retweet Button設置
- 各アーカイブリストページへマウスオーバーのときのスタイル追加
- 記事中のクラス、.memo にスタイル
AutoPagerizeのmicroformat（autopagerize_insert_beforeとか）は、まあ便利かもだけども削除しました（SITEINFO書ければいいわけだけども）。まあ利便性は落ちるだろうけど。抑抑、各記事ページの前後が続き物でもない、ということで補助的なmicroformatも要らないだろうということで止めにしました。
はてなスターの表示位置をタイトルにくっ付けないようなスタイルにしてみました。これは実験的なもので大して意味ありません。スタイルはこのような感じです。
/* Star をリストタイプにする */
.hatena-star-comment-container{
position:relative;
display:list-item; margin-left:1em;
line-height:1;
list-style-type:none; }
.hatena-star-star-container{
display:list-item;margin-left:3em;
position:relative;
top:-1em;
line-height:1;
list-style-type:none; }
.hatena-star-star-container:before{
content: "Add \2606";
font-size:smaller; }
検索ボックスのスタイルは、このようなかんじで初期状態のスタイルがイタリックになるようにしてみました。:focus擬似クラスだとIE6,IE7ともに表現できなくて、このようなものはJavaScriptがおこなう領分な気もするのだけど、思いつきだけでやってみたです。
input#searchKeyword {
font-style : italic; }
input#searchKeyword:focus {
font-style : normal; }
MT-PubSubHubbubプラグインについては、以下に書きました。
補足をしておくと、記事を書いたあとにPing送信されて、Movable Typeのシステムログに記録されます。（Pinged http://...）
それと、（お節介ながら）当たり前なことですが、更新の反映がはやいですので、間違って記事をアップすると早い段階で間違った箇所（マークアップとかタイプミスとか）が晒されていることになるかと。Twitterでは、前の発言に対して訂正の意味での発言をPostすることは容易なのですけども。。よく確認しましょうってことで特に全文を配信されているかたは。
分割ページのtitle要素にページ数を入れることについては以下に書いています。
Lightboxの乗り換えをおこないました。Lightboxがprototype.jsベースでないことで、jQueryのコンフリクトの対策はしなくてもいいという利点はあるかと。といっても今現在、記事ページにLightbox以外でjQueryを使っている場所もないし、prototype.js使っている箇所もないですが。
ぬり絵の原画のアーカイブとして、ギャラリーのようなものを作ってみました。まだ作成途中ですが、jQuery Lightbox採用してみました（＃sampleディレクトリ下にありますが、サンプルページのつもりではないです）。
Easy Retweet ButtonはJavaScriptで簡単にRetweetのボタンを設置できるというものです。
bit.lyにアカウント登録する手間はありますが、それは差し引いてボタンの設置は簡単だとおもいます。なんでブログ記事でなく、Webページなのかは訊かないでください。。
アーカイブリストページとか、ブログのトップページとか、今読んでいるエントリを示すのに、マウスオーバーのときのスタイルをつけてみました。
最近流行ってるのかどうかよく知らないのですが、マウスオーバーのときに枠線の色が変わったりするのをよくみかけるので、マネしてみました。
Vicunaのテンプレートだと、.entryに対してスタイルを指定したらよさそうなのですが、普通にborderを指定すると、マウスオーバーのときに違和感があると思いますのでそのあたりを意識して書いたCSSが以下となります。
/* section entry hover */
div.entry { margin:4px; border:1px solid #FFFFFF; }
div.entry:hover{ border:1px solid #6CA6CD; }記事中の.memoにようやくスタイルつけてみました。画像はVicunaアイコンのものをベースにちょっと加工しただけというものです。というか、Sub-Skinに同梱されているものを使わせてもらいました。今月のカスタマイズは以上です。
【追記：2009・09・21】思うところあって、記事ページと一部のページでパンくずリストをページ内に一箇所にするように変更してみました。詳細は後日ということで。
以下のページで過去のカスタマイズの一覧をみることができます。
