Twitter Goodiesの幅をサイトの幅に合わせてフレキシブルに変化させたい。
Twitter Goodiesとは、ブログにTwitterを表示させるWordPressのプラグイン。
アカウントと幅、高さを指定して、ウィジェットをサイドバーにドラッグ＆ドロップするだけで設置が完了してしまう簡単さと、オーソドックスなデザインがよいので重宝しています。
しかし、幅が固定されている。
ただ、プラグインの設定画面で指定した値はピクセルで、例えば設定値を350にした場合、HTMLタグの中に以下のようにスタイル指定されてしまいます。
<div class="twtr-doc" style="width: 350px;"> （※ここにTwitter Goodiesの画面が入る。) </div>
このままでは、div class="twtr-doc"を囲むボックスのサイズに関わらず、ウィジェットの幅は350pxで固定されてしまいます。
昨今はやりのレスポンシブウェブデザインのブログに貼り付けた場合、サイドバーからはみ出したり、あるいは横にスペースが余ったりします。
サイドバーの幅が固定なら気にする事はないのですが、Twenty-elevenのようにサイドバーの幅も%で指定されているような場合、困ったことになります。
しかし、HTMLのタグの中にスタイルを書き込むというのは、最も優先されるスタイルの指定方法なので、CSSに".twtr-doc {width:100%;}"なんて書いても意味がありません。
かといってTwitter Goodiesの設定画面の幅の指定に%の単位をつけても駄目。表示されなくなってしまいます。
解決法
スタイルシートに、
.twtr-doc{max-width:100%;}の１行を書き込む。
これで、幅の最大値は設定画面で指定したピクセル値、サイドバーの幅がそれより狭い場合は、サイドバーの幅に合わせて縮小されるようになりました。
まあ、基本的といえば基本的な方法なのですが、HTMLのタグの中にスタイルが埋め込まれているのを見た時には、最悪プラグインのコードに手を突っ込むか･･･と軽く途方に暮れていたので、とりあえず簡単な逃げ道が見つかってよかったというお話でした。
なお、この一行を記載しておくと、サイトのデザインを変更して、サイドバーの幅が変わったときにも、プラグインの設定値を調整する必要がほとんどなくなるという利点もあります。
