« 話すときは相手を見て | メイン | 認識の違い,際立つ »

snapshotの調整 [web_design]

ちょっと前にsnapshotを入れてみたのですが,どうもアイコンの表示がおかしくてしばらく悩んでいました.先頃原因がわかったのでそれについてのエントリです.興味の無い方は読み飛ばし推奨です.

snapshotのポップアップ
正常な表示正常な表示
アイコンがズレた表示ズレている表示

結論から言うと,CSSでIMG要素に"display:block;"を指定してあるのが原因でした.IMG要素は通常インライン要素として扱われるものなのですが,私の場合インラインで使う予定がまったくなかったのとブロックにしておいたほうが何かと勝手がよかったのとでスタイルシートには以下のように書いてあります.

img {
display: block;
}

これがsnapshotのアイコンにも影響したせいでずれてしまっていた訳です.指定そのものを消してしまってもいいのですが,そうするとIMG要素がブロックになっていることを前提につくっているので他のページで影響が出ます.そこでsnapshotのポップアップの構造を調べて,設定してあるid属性を探すことにしました.結果は以下の通り.

左上のアイコンが格納されているdivと中のimg
div id="snap_com_shot_top_left_menu"
img id="snap_com_shot_preview_toggle"
img id="snap_com_shot_rss_toggle"
右上のオプションメニューが格納されているdivと中のimg
div id="snap_com_shot_top_right_menu"
img id="snap_com_shot_option_button"
img id="snap_com_shot_zoom_img"
左下のプロモーションリンクが格納されているdivと中のimg
div id="snap_com_shot_promo"
img id=""snap_com_shot_promo_icon"

ということで,この3つのdivに関して"display:inline"が設定できればよいので次のようなスタイルシートを書きました.

#snap_com_shot_top_left_menu img,
#snap_com_shot_top_right_menu img,
#snap_com_shot_promo img    {
display: inline;
}

これで問題なく横並びに表示されるようになりました.スタイルシートを読み込ませる順番を変えるとか,他にも方法はあるような気もしないではないですが,解決できたのでよしとします.

トラックバック (0)

このエントリーのトラックバックURL: http://dormouse.oops.jp/mtc/mt-tb.cgi/96

(スパム対策として当該エントリへのリンクが含まれないトラックバックを弾いています)

以下の一覧は、このエントリーを参照しています:  snapshotの調整

コメント (0)

コメントを投稿

(コメントは承認制をとっているため,公開されるまで時間がかかる場合があります)


画像の中に見える文字を入力してください。