web拍手ボタンを設置してみました

えぬぱすどっとねっとさんのところで配布されている、
おもわず拍手したくなるweb拍手ボタン「はちゅねミク」バージョン。

なんかこの脱力感が良いです…（￣∇￣*）
かわいいのでサイドバーのプロフィール部分に貼り付けてみました。

タグ自動生成ページで貼り付け用のタグを生成できますが、firefoxでは情報が更新されなかったのでIEで実行しました。

IE6のCSSバグ対策

月別アーカイブのデバッグのため久々にXP機を立ち上げてIE6で表示させたところ、表示が崩れているところが何カ所かあり。

• サイドバーがエントリ部分の下に表示されてしまう。
• カテゴリや記事一覧の行間が1行分空いてしまう。

width指定したブロックにpaddingを指定したとき、padding分を含む・含まないと言うバグには注意してテンプレートを作ってたし、IE7ではちゃんと表示されていたので大丈夫だろうと思っていたんですが甘かったです。
原因を探っていたところ以下のようなサイトを発見。
→ 『CSSバグ辞典スレッド』の要約

IEのバグリストを上から眺めていると以下のバグにひっかかっていたようで、修正したところなんとかまともに表示されるようになりました。

• ブロック要素化した要素を含むリストアイテムの後ろに空行が入る
  → リストアイテム要素の終了タグの直前・直後の改行削除（空白もダメ）
• フロートの左右マージンが指定値より大きくなる
  → フロート指定したブロックのマージン指定を削除

VistaにIE6をインストール可能であれば入れておきたいところです。

最初は誰でも6hot

「最初は誰でも6hot(6Hit)」
WebとPCのメモ帳さんのこちらの記事「Blogのアクセスアップに効果があるたった一つのこと」で見付けた言葉です。

詳しくは上の記事を読んでいただくのが良いんですが、簡単に書くと「6hotとは1日当り6ヒットくらいしかないウェブサイトのことで、ブログを始めたすぐは誰でもそんなものである。」と言うこと。

確かにそうなんですよね…。と思って記事にしてみました。
ここ備忘録は左下のカウンターを見ていただくと分かるんですが、記事を書いている今現在では100hit/日くらいあります。ただし「vista サービス 停止」か関連するキーワードで検索してこられる方が40%近くいらっしゃいます。
気になってGoogleで検索してみたら1番目に表示されていました…(・・;)

で、メインブログとして立ち上げた旅ログの方は未だに6hotだったりします…。

ロールオーバー画像の先読み

一部のリンクに矢印を付けてありますが、マウスカーソルを重ねると矢印の色が変わるようにしてます。（ロールオーバーと言うらしい）
具体的にはCSSで背景画像として矢印の画像を表示しておいて、カーソルが重なったときに背景画像が切り替わるようにしています。
↓こんな感じ

.hoge a {
   padding-left: 18px;
   background: url("矢印画像1") no-repeat left center;
}
.hoge a:hover {
   background-image: url("矢印画像2");
}

ただこの方法だと最初にカーソルを重ねたときに画像を取得しにいくため、画像が切り替わるまでにタイムラグがあり、画像が取得されるまで矢印が表示されない状態になります。
なので、ロールオーバーする画像を先読みするようにしてみました。

<div id="preload-images">
<img src="矢印画像2" width="0" height="0" />
：
</div>

上のようなコードをHTMLのどこかに埋め込んでおくと、ブラウザが普通の画像と同じように読み込んでキャッシュしてくれます。（たぶん…^^;）
width="0" height="0" にしてますが、CSS内でも非表示に設定。

#preload-images { display: none; visibility: hidden; }

一応うまくいってるように見えます。

ページ内リンクをスムーズスクロール

ページ内リンクをスムーズスクロールするようにしてみました。
具体的にはカテゴリや検索結果などの記事一覧から各記事へのリンクと、各記事下のページ先頭へ戻るリンク部分。
リンクをクリックするとするするっとスクロールします。

Googleなどで検索するといろんなものが見付かりますが、こちらのJavaScriptを利用してみました。
→ df Javascript Smooth Scroll

HTML内のアンカーに対してonClick属性を追加するなどの修正は不要で、スクリプトをロードするだけで利用できます。サイズも小さくて非圧縮のソースファイルでも4KB程です。jQueryなどの他のスクリプトを利用せず単体で動作します。

導入については以下の2つのサイトを参考にしました。
→ http://www.revulo.com/PukiWiki/JavaScript/SmoothScroll.html
→ rocky's wiki：PukiWikiにdf Javascript Smooth Scrollを実装する

元のスクリプトではname属性にしか対応していませんが、id属性に対応するための修正方法などが書かれています。

FC2ブログへの組み込みは、ファイル管理でスクリプトファイルをアップロードして、テンプレートのHTML編集画面で</head>の前辺りに以下のような行を追加するだけです。

<script type="text/javascript" src="アップロードしたファイルのURL"></script>

src=""のところにアップロードしたスクリプトファイルのURLを記述します。

ちなみにIE7はJavaScriptの処理速度が遅いためか、Firefox3やSafari3に比べると同じ設定でもスクロール速度が遅いです。