ppBlog フォーラム
No.4709 角丸テーブル利用時の表示崩れ
mochida@Feb 21, 2010 00:14
お世話になります。
ppBlogで角丸テーブルを利用した際に問題が発生しました。
角丸テーブルの中で、入力支援を使って文字色を変更などしようとすると、
文字の大きさが1pxになって表示されてしまいました。
また、角丸テーブル自体の表示も崩れてしまいました。
（角丸の表示に利用しているJavaScriptが、
文字色変更時に利用されるspanタグを変換対象だと見なしてしまうのだと思います）
お手数をおかけしますが、ご確認をよろしくお願いします。
ppBlogで角丸テーブルを利用した際に問題が発生しました。
角丸テーブルの中で、入力支援を使って文字色を変更などしようとすると、
文字の大きさが1pxになって表示されてしまいました。
また、角丸テーブル自体の表示も崩れてしまいました。
（角丸の表示に利用しているJavaScriptが、
文字色変更時に利用されるspanタグを変換対象だと見なしてしまうのだと思います）
お手数をおかけしますが、ご確認をよろしくお願いします。
4709-1 Re: BENIT @ Feb 24, 2010 20:37
これは角丸ボックス実装時からの仕様ですね。
現在の仕組み上、角丸ボックス内ではSPAN要素を使えないので、別のタグにスタイルを指定するしかありません。
色や文字サイズを変えるということは何らかの強調とも取れるので、例えばEM要素を使う、など。
CSS3のBorder-radiusが使えれば手っ取り早いんですけどねぇ。
現在の仕組み上、角丸ボックス内ではSPAN要素を使えないので、別のタグにスタイルを指定するしかありません。
色や文字サイズを変えるということは何らかの強調とも取れるので、例えばEM要素を使う、など。
CSS3のBorder-radiusが使えれば手っ取り早いんですけどねぇ。
4709-2 Re: mochida @ Feb 25, 2010 01:11
了解しました。
自分でJSを改造して対応させました。
(角丸のときに利用しているspanタグにclassをつけて、取得したspanタグのリストから、該当のclassを含むものを再度抽出させるようにしました。若干非効率ですが…)
自分でJSを改造して対応させました。
(角丸のときに利用しているspanタグにclassをつけて、取得したspanタグのリストから、該当のclassを含むものを再度抽出させるようにしました。若干非効率ですが…)
4709-3 Re: martin @ Feb 25, 2010 03:02 
BENITさん、フォローどうもです。
SPANタグやその他の色んなものが入ってもOKなようにしてみました。
→http://p2b.jp/demo/cornerplay.js
Webkit系での挙動がちょっとおかしい気もするので、それにも対応させています。
以前のデモも古くて動かなかったので、更新→http://p2b.jp/demo/CornerPlay.html
SPANタグやその他の色んなものが入ってもOKなようにしてみました。
→http://p2b.jp/demo/cornerplay.js
Webkit系での挙動がちょっとおかしい気もするので、それにも対応させています。
以前のデモも古くて動かなかったので、更新→http://p2b.jp/demo/CornerPlay.html