WEBマスターのお仕事TOP > スポンサー広告 > [WP]Wordpress×twitterウィジェットで見出しが改行する件WEBマスターのお仕事TOP > WordPress > [WP]Wordpress×twitterウィジェットで見出しが改行する件

スポンサーサイト

(--/--/--)
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[WP]Wordpress×twitterウィジェットで見出しが改行する件

(2012/01/24)
Wordpressユーザにはtwitterのプロフィールウィジェットや検索ウィジェットを利用して、自サイトにtweetを掲載する人も結構要ると思います。 私ものその人でしたが、見た目上小さな問題がありました。 それは、twitterウィジェットの見出しがなぜか改行してしまうことです。

例えば下のキャプチャのように、twitterウィジェットのプロフィール画像と見出しの間に改行が入ってしまっていますね。動作に支障はないのですが、なんとなく気になります。
twitterウィジェットの見出し崩れ

原因はWordpressにデフォルトで仕込まれているCSSでした。Wordpress(twentyten)のデフォルトのCSSでは、全ての見出しタグ(hx)にclear:both;するようになっています。 twitteウィジェットの見出しにも見出しタグが使われているため、改行してしまっていたのです。

私の場合は以下のようにCSSを書き換えることでtwitteウィジェット見出しの改行を修正しました。

対象ファイル:Wordpress管理画面>外観>テーマの編集
の以下の記述です。

■修正前

h1, h2, h3, h4, h5, h6 {
clear: both;
font-weight: normal;
}


■修正後

#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
clear: both; 
font-weight: normal;
}


コンテンツ内の見出しタグにだけclear:both;を効かせるようにしました。 すると、以下のようにtwitterウィジェットの改行がなくなりました。
twitterウィジェットの見出し改行修正

テンプレートやCSSによっては、サイドバーのレイアウトが崩れる場合があるかもしれないので、よくチェックした方が良いと思います。もし崩れてしまう場合は、インパクトの小さい話なので気にしないことにしましょうw
関連記事

コメント

コメントの投稿

サイト管理者にのみ通知する

トラックバックURL

http://goodjob4604.blog103.fc2.com/tb.php/124-7d8d9251
月別アーカイブ
Google+
Twitter
ページトップへ
ブログパーツ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。