WordPressで埋め込んだツイートを幅ピッタリに合わせられるカスタマイズテクニック
WordPress 3.4からデフォルトで、TwitterのツイートをURLだけ貼り付けることで埋め込むことができるようになりました。
プラグインも必要ないので、たまにツイートを引用したい時など便利に使っています。しかし、ちょっと微妙だったのがそのスタイル。横幅550px固定になっていて、うちの記事の幅には足りず。ということで、その部分をどうにかしてみました。
[関連] Twitter ＠Anywhereが終了するというのでプラグインなしでアカウントを自動リンク化してみた
[関連] WordPressで公開予定の記事を一覧にして表示する方法
[関連] 関連記事表示プラグイン「YARPP」を使って「LinkWithin」っぽくするカスタマイズ
横幅くらいCSSでどうにかできるんじゃないの? ってことで、HTMLを確認してみました。
<div id="twitter-widget-3" class="twitter-tweet-rendered" lang="ja" style="width:550px !important;"> <div class="twt-border"> <blockquote data-twt-id="231092658603446272" data-twt-intents="false" data-twt-product="tweetembed" class="twt-o twt-tweet hentry twt-always-show-actions twt-pinned twt-standard"> <div class="vcard author"> <a class="screen-name url" href="https://twitter.com/cazuki" data-screen-name="cazuki"> <span class="avatar"></span> <span class="fn">ホシナカズキ(czk/529) ◎</span> <span class="nickname">@<b>cazuki</b></span> </a> <iframe class="twt-follow-button" allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/follow_button.html#align=right&button=grey&screen_name=cazuki&show_count=false&show_screen_name=false&lang=ja"></iframe> </div> <div class="entry-content"> <p class="entry-title">Grow!のサービスリニューアルに伴い、Grow!ボタンの提供が終了するとのこと。 これまでブログに設置していたのでそれを取り去り、ちょっとデザインを変えることにした。 <a class="link" href="http://t.co/iTuo9w2q" title="http://fb.me/QNLUxVyv">fb.me/QNLUxVyv</a></p> </div> <div class="footer"> <a class="view-details" href="https://twitter.com/cazuki/statuses/231092658603446272"><span class="updated " title="8月2 18:22:37 (UTC)"> <span class="value-title" title="2012-08-02T18:22:37+0000"></span>2012 8月 3</span></a> <ul class="twt-actions"> <li><a href="https://twitter.com/intent/tweet?in_reply_to=231092658603446272" class="reply-action twt-intent" title="返信"><i></i><b>返信</b></a></li> <li><a href="https://twitter.com/intent/retweet?tweet_id=231092658603446272" class=" retweet-action twt-intent" title="リツイート"><i></i><b>リツイート</b></a></li> <li><a href="https://twitter.com/intent/favorite?tweet_id=231092658603446272" class=" favorite-action twt-intent" title="お気に入りに登録"><i></i><b>お気に入りに登録</b></a></li> </ul> </div> </blockquote> </div> </div>
見てもらえればわかりますが、一番外側を囲むdivのスタイルに!importantが入ってるんですね。これじゃCSSで上書きとかはできないのです。
そんなわけで、ちょっとばかり、このあたりをjQueryでどうにかしてやります。
jQuery(document).ready(function($){
setInterval( function() {
$( '.twitter-tweet-rendered' ).removeAttr( 'style' );
}, 100 );
});
このコードをテンプレートの中に、あるいはjsファイルを別途作って読みこむようにしてやります。うちだとこのへんはfunction.jsとしてファイルを作って読みこませてますよ。
続いてCSSをいじりましょう。
.entry_text .twitter-tweet-rendered {
max-width: 100% !important;
}
.entry_text .twt-border {
max-width: 100% !important;
}
.entry_textはうちの記事を囲むclass名なので、コピーして使う場合は、自分のテンプレートの記事を囲む要素のclass名に置き換えるようにしてください。
基本的にはコレでOKなはず。うちではこれで横幅ぴったりに埋め込みツイートが表示されています。
とりあえずマクドとかモスとかファッキンとかケンタとか、あと各ファミレスにコーヒーショップは、とっととPassbook対応してくれると嬉しいよ。
— ホシナカズキ(・e・) (@cazuki) September 21, 2012
こんな感じですね。
たぶんスマートフォンもこれで対応可能なんじゃないかなぁと思いますが、ちゃんと確認はできていません。そろそろWPtouch頼みをやめてテンプレート作らないといかんなぁ。