［CSS覚書］Twitterウィジェットで、アカウント名部分が崩れてカラム落ちしてるときの対処法
スタイルシートが競合してるんだろうなぁとは思いつつ、
一年以上放置してた右下のTwitterウィジェットのスタイル崩れ。
本腰入れて治しましたw
原因はh3とh4のclear:both指定
【WordPress】Twitterウィジェットの文字がずれる －解決方法－ | トミリュウ・コム
原因は、TwitterウィジェットではアカウントIDの文字タイトル部分に<h3><h4>htmlタグが使われているののに対し、使用しているWordPressテーマのスタールシートで、これらのタグに“clear:both”指定されているためで、段組がクリアされて下に下がったように見えていました。
自分は、widget.cssというスタイルシートを一個作っちゃいました。
インポートCSSの一番下に以下の記述を足して
@import url(widget.css);
widget.cssは以下の内容に。
.twtr-hd h3,.twtr-hd h4{clear:none;}
参考ページのように、
既存のスタイルシートに記述してもいいですね。
最初はclear:bothまで思い至らなくて
margin:0;
padding:0;
を足せばいいんじゃないかと思って試してダメだったので、
うおーなんでダメなんだと悶絶してました（ーー；
もっと自由にカスタマイズ
h3、h4をdisplay:none;にして、背景画像を入れる方法です。
名前のとこを自由にカスタマイズしたいのだったら
この方法もよいかもしれない。
ツイッターのプロフィールウィジェットが崩れてしまう場合の対処法-タック株式会社はiPhone/iPadアプリの開発サービスを提供中。ホームページ制作ではお客様と一緒になって皆様に見てもらえるWEBサイトを目指します! | tucnet.net | タック株式会社
http://tucnet.net/hp/archives/2252