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カスタマイズ」新着記事

ソーシャルメディアのトータルシェア数を条件にして記事をランダム表示する方法

ホシナ カズキ

チャット風の会話形式コンテンツをプラグインなしで実装する方法

ホシナ カズキ

【WordPress】パーマリンクからカテゴリーベースを取り除く方法

ホシナ カズキ

ディレクトリを切ってインストールしたWordPressをドメイン直下で表示させる方法

ホシナ カズキ

「RSS Footer」が開発終了したならfunctions.phpで同じことやればいいじゃない

ホシナ カズキ

もっと見る

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

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