オンマウスで画像がぶれる(HighSlide)

質問

初めて質問します。現在、ブログを運営していますが最近になってHighSlideを導入してみました。記事中の画像はサムネイルで表示され、今までだと別ウインドウにオリジナルを表示するようにしていたのですが、HighSlide導入後は画像がズーム＆ポップアップされなかなか楽しめています。

ただ、HighSlideを設定した画像はサムネイル上にマウスカーソルを持ってきたときに画像の枠が消え、画像がやや下方にずれていきます。今までだとこういったことはありませんでした。hoverなどが設定されているのだろうかとHighSlide.jsを探してみましたがなさそうな感じです。参考までにURLを記載しますので、どういった理由が考えられ、どういった対策が取れるのかをご教示下さい。なお、確認環境はMacOSX 10.4.11/FireFox3.0.3/Safari3.1.2です。

http://sceadu.blog.shinobi.jp/

最近の3記事についてはHighSlideを、それ以前の記事については今まで通りの表示方法にしています。なお、当方で使っているHighSlide.jsは以下のURLで参照できます。

http://file.sceadu.blog.shinobi.jp/highslide.js

よろしくお願いいたします。

回答No.1

grumpy_the_dwarf · ベストアンサー

挙動としては、borderの幅が変わってるなぁという感じで。

原因は、問題の画像達はA.highslideの子孫であるだけじゃなくて
div.EntryTextの子孫でもあることですね。指定の順番からかな、標
準ではEntryTextで指定した1px幅rgb(102,102,102)色のborderが描
かれていて、hoverするとhighslide:hoverの2px幅white色のborder
に切り替わってます。highslideの2px幅gray色のborderは使用され
ていません。

highslideの指定をもっと後ろに持ってくるか、指定の詳細度をあげ
る工夫が必要ですね。highslideのborderを1px幅にしてもいいけど。

お礼

grumpy_the_dwarfさま

何度も書き込み申し訳ありません。その後、いろいろとソースを見ていまし
たら忍者ブログのテンプレート設定があることを思い出しました。テンプ
レート設定でhighslideのCSS部分を見てみましたら、ご指摘の

.highslide:hover img {
border: 2px solid white;
}

があり、この部分を1pxにすることで解決しましたまた、solid white;を
solid gray;に書き換えることで特に違和感なくマウスオーバーできるよう
になりました。ここで質問させていただいたおかげです。どうもありがと
うございました。

補足

grumpy_the_dwarfさま

早速のご回答ありがとうございます。専門的な立場の方とお見受けいたしま
すが、当方なにぶん素人のためなかなか理解できません。highslide.jsをテキ
ストエディタで見てもhoverは検索にかかりません。

>highslideの指定をもっと後ろに持ってくるか、指定の詳細度をあげ
>る工夫が必要ですね。highslideのborderを1px幅にしてもいいけど。

「指定を後ろに持ってくる」「指定の詳細度を上げる」「highslideの
borderを1px幅にする」の具体的なご指示をいただくことはできません
でしょうか？何度も申し訳ありませんm(__)m