WordPressで埋め込んだツイートを幅ピッタリに合わせられるカスタマイズテクニック

スポンサーリンク

WordPress 3.4からデフォルトで、TwitterのツイートをURLだけ貼り付けることで埋め込むことができるようになりました。
プラグインも必要ないので、たまにツイートを引用したい時など便利に使っています。しかし、ちょっと微妙だったのがそのスタイル。横幅550px固定になっていて、うちの記事の幅には足りず。ということで、その部分をどうにかしてみました。

[関連] Twitter @Anywhereが終了するというのでプラグインなしでアカウントを自動リンク化してみた 
[関連] WordPressで公開予定の記事を一覧にして表示する方法 
[関連] 関連記事表示プラグイン「YARPP」を使って「LinkWithin」っぽくするカスタマイズ 

Tweet embed width

横幅くらい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なはず。うちではこれで横幅ぴったりに埋め込みツイートが表示されています。

こんな感じですね。

たぶんスマートフォンもこれで対応可能なんじゃないかなぁと思いますが、ちゃんと確認はできていません。そろそろWPtouch頼みをやめてテンプレート作らないといかんなぁ。

「WordPress」新着記事

カスタムブロックを追加するなら「Block Lab」プラグインを導入すると幸せかもしれない

Avatar for ホシナ カズキ

ホシナ カズキ

大規模・広範囲にわたるクラッキングによるWordPress改ざん事案が発生中

Avatar for ホシナ カズキ

ホシナ カズキ

【2016年版】モバデビで絶賛稼働中のWordPressプラグイン

Avatar for ホシナ カズキ

ホシナ カズキ

「SNS Count Cache」v0.10.0におけるFacebook取得の不具合を解決する

Avatar for ホシナ カズキ

ホシナ カズキ

「SNS Count Cache」のFacebookカウント数取得できない問題を暫定的に解決した

Avatar for ホシナ カズキ

ホシナ カズキ

もっと見る

モバデビモバイルウェブのネタ、ニュースMaciPhoneなどのApple関連、WordPressのことなど、いろいろ書く雑食系ブログメディア。
ためになるかもしれないし、ならないかもしれない。そこそこ更新してますそこそこ。

このブログについてもっと詳しく