お願い：メインLISTのソート順画像のCSS改善案募集

d3diaryをご使用の皆さま

いつもご利用ありがとうございます。

ver0.18で実装した、昇順／降順ソート機能。　使える場面は限られると思いますが、あると便利なときもあります。

ただ、一部のテーマで切換え画像の破片が少し表示されたりすることがあり、ベストでは無いと認識しています。　しかし、私はCSS苦手人間なので、改善も亀の手探り状態になりますし、根本的に方法が間違っているような気もしてます。

どなたか、この部分のCSSの改善をお願いできますと、大変助かります。。

css見てみました。

「一部のテーマで画像の破片が」というのが、どういうテーマで発生するのか具体的に分かりませんでしたが、たぶん……

a.d3dSortDsc と .d3dSortDsc_s、a.d3dSortAsc、.d3dSortAsc_s の４つまとめて

a.d3dSortDsc, .d3dSortDsc_s, a.d3dSortAsc, .d3dSortAsc_s {
overflow:hidden
}

としてやると、幸せになれるかもです。

AXYZ-SAKさん

ありがとうございます。
試してみたのですが、変わりませんでした。

問題の現象は、下の部分なのですが、画像の位置を「background-position」で変更することで画像を入れ替えているところで、１枚の画像に並んでいる下の画像が見えてしまうことです。

この例は、xcl2.2のデフォルトテーマです。

marginとか、paddingでやったりしても、テーマによって変わってしまうので悩んでます。

状況を把握しました(・∀・)

というわけで……

a.d3dSortDsc, .d3dSortDsc_s, a.d3dSortAsc, .d3dSortAsc_s {
overflow:hidden;
display:inline-block;
width:4px;
height:12px;
}

要点は
○aタグは本来インライン要素なので、widthやheightが適用されない
○そのため、親要素となるdivの高さによって背景画像が余計に出てしまう
○解決方法として、inline-block指定したうえで、widthtoheightを決め打ちする
○幸い、IEでもaタグへのinline-blockは有効ｗ

……といった感じです。

AXYZ-SAKさん

どうもありがとうございます。解決しました。

overflow:hidden　なんてのがあるんですね。勉強不足でした。そしてIEで無効な属性もあるようなので要注意、ですね。

デザイン苦手、って言い続けるのも我ながら困ったやつですよね。　少しずつ勉強していきますので今後もよろしくお願いします。