Twitterウィジェットをレスポンシブ対応させる最後の手段(かもしれない。2015.12.15現在)

  JavaScript, jQuery, WEBサービス 

Twitterの管理画面から発行できるウィジェットって、
どうもソースやclassがちょこちょこ変わってしまってしまう印象無いですかね?

今日なんとなく埋め込んだウィジェットがiPhoneで見ると思いっきりはみ出している・・・
ということがありまして、色々調べてました。

下記のページや

「ソーシャルサービスの埋め込みパーツをレスポンシブデザインに対応させる」
http://creatorclip.info/2014/03/social-service-responsive/

下記のページ、

「Twitter埋め込みウィジェットが最大520px固定になっていたので強引に戻す」
http://creatorclip.info/2015/07/twitter-widget-max-width-520px/

などを参考にしたものの、うまいことレスポンシブ化できず。
(※もしかすると、こちらで設定したcssとバッティングしてるのかも・・・)

「API使えばいいじゃん!」と言われればそれまでですが、
意地でもレスポンシブな感じで埋め込みウィジェットの幅をコントロールしたい!と試行錯誤してみました。

iframeの中にあるから面倒くさいことになってるんじゃないの?

iframeでタイムラインが取得できるのであれば、
もう中身だけ抜いてしまってcssでスタイリングしてしまいましょう。

とりあえず、htmlにタイムラインを挿入するための空div準備。

続いてjQueryにだだ頼りします。

cssで表示領域を調整

これでiframeの外にタイムラインを書き出せました。多分オーライ。

とはいえ

またhtmlの構造とか振られてるクラスとかが変わって書き直すことになるんでしょうな〜!

ブログの更新情報はこちらで配信しています。

   

follow us in feedly

ad

wpx

  • WordPressのテーマ制作やテンプレートについての概念など、実際にサイトを制作しながらWordPressを知ることができます。
    制作するだけでなく、ユーザビリティからSEO、さらにはパフォーマンス改善にも触れているという充実ぶり。
    オリジナルテーマ制作のお供にどうぞ!
  • サンプルが大充実!定番のjQuery入門書です。
    本の内容に沿って制作を進めるだけで、即実戦投入できる程の機能ができ上がります。
    解説が丁寧且つチートシートも付いているのでjQueryについての理解がぐんと深まりますよ!
  • サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル

    WordPressプラグインの開発から運用までカバーする、プラグイン開発のまさに「バイブル」です。

    セキュリティやマネタイズにも触れられていて参考になるところ多すぎです。
  • JavaScript 第6版

    定番のO'Reilly本でJavaScriptを深く学びましょう!気になる箇所をざっと読むだけでも、とても参考になります。ざっと読みを繰り返すのがオススメ。超良書です!
  • wordpressに慣れてくると、今度は痒いところに手が届く細やかなカスタマイズをしたいですよね。phpを利用したカスタマイズからデータベースに直接アクセスする方法がとにかく丁寧に解説されています。個人的には第5章、「プラグインの自作」が物凄く役に立ちました!
PAGE TOP ↑