ブログ練習帳

ソーシャルボタンのレイアウト

プラグインさまを入れて、FaceBookだのTwitterだのの、ソーシャル対応になって、うひうひ言ってる見習いですが、ふっと、ブログを見ていて、あんまりきれくないことに気づきました。って、キレイなところあったら述べてみよって言われると困っちゃいますが・・・。というのは、画像が張り込んである日のブログで、その画像が右寄せだったり、左寄せだったりすると、ソーシャルボタン群が、変にずり上がっちゃっているんですぅ。こりゃ、もう、忘れちゃったけど、画像にフロートかけて、クリアしてないな、って、ぴーんときました。そりゃ、横に書き込んだテキストは、回りこんでくれないと困るけど、ソーシャルまでずり上がっちゃうのは、ちょっとですぅ。ということで、このソーシャルボタンにclear:bothをかけたいと思いました。

Word Pressでは、というか、こういう動的なファイルを作り出すシステムでCSSを修正したいと思ったら、とにかく、吐き出されたHTMLをチェックすることから、スタートです。まず、ブラウザでブログを見てみて、ソーシャルボタンが出ているページを閲覧します。それから「ソースを表示」とかを選んで、そのソースをじろじろ見ます。すると、どうやら、このプラグインで入れたソーシャルのボタン群は、wp_social_bookmarking_lightというクラス名のつけられたDIVで囲われています。ということで、style.cssを開いて、このdiv.wp_social_bookmarking_lightに、clear:bothをつけてやれば、OKです。でけた。

珍しく、勘があたってうれしい見習いですぅ。

2011年11月9日12:27 AM| カテゴリー： 見習い奮闘記| コメント (0)