【WordPress】Twitterウィジェットの文字がずれる　－解決方法－

使用しているThemeにもよると思いますが、WordPressにTwitterウィジェットを配置した時に、アカウントIDの文字タイトルが下にずれて表示されてしまう場合があって気になった人もいるのではないでしょうか。

私も気になったので調べてみました。

原因は、TwitterウィジェットではアカウントIDの文字タイトル部分に<h3><h4>htmlタグが使われているののに対し、使用しているWordPressテーマのスタールシートで、これらのタグに“clear:both”指定されているためで、段組がクリアされて下に下がったように見えていました。

解決方法としては、Twitterのウィジェットの<h3><h4>タグに対してはclear属性をnoneに指定するようにstyleシートを設定するようにしました。

具体的には、

wp-content/themes/<使用中のテーマディレクトリ>/style.css

を編集し、最後の行に以下を追加するだけです。

.twtr-hd h3,.twtr-hd h4{clear:none;}

※当方で確認した環境はWordPress3.1.1です。いつものように、実施については自己責任でお願いします。

2011年4月22日追記：
上記のファイルは、わざわざエディタでファイルを開いて編集しなくても、WordPress管理画面の「外観(Appearance)」－＞「テーマ編集(Editor)」で表示される「テーマの編集(Edit Themes)」画面でできます。ここの入力エリアの一番最後に上記の１行を追加して「ファイルを更新(Update File)」を実行すれば反映されます。