【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)」画面でできます。ここの入力エリアの一番最後に上記の1行を追加して「ファイルを更新(Update File)」を実行すれば反映されます。

.twtr-hd h3,.twtr-hd h4{clear:none;}
タグ: ,
カテゴリー: WordPress

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

はてなブックマーク人気エントリー
カテゴリー