あちこちのサイトを探し回って片っ端から試していって、ようやく解決しました
見つけたヒントは jQueryでTwitterの公式ウィジェットをカスタマイズする で紹介されている jQuery を使ってJSで吐き出される iframe の中にアクセスするという部分
先に tw.css というファイルを作って、その中に
.timeline {
max-width: 100% !important;
width: 100% !important;
}
と書いて保存しておきます（この方法は現在希望の動作をしません。下の方の追記をご覧ください）
次に、Twitterウィジェットを含む html ファイルの </body>の直前（もしかしたら違う場所でも大丈夫かも知れないけど）に
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(window).load(function() {
function changeWidget() {
var twFrame = $('iframe#twitter-widget-0');
if (twFrame.length > 0) {
twFrame.contents()
.find('head').append('<link href="http://www.hoge.com/tw.css" rel="stylesheet" type="text/css" media="all" />');
} else {
setTimeout(changeWidget, 1500);
}
}
changeWidget();
});
</script>
というスクリプトを挿入。なお var twFrame = $(‘～’); の部分はボクの場合と違うかもしれないので要確認で。またもちろん <link href=～ の部分もご自分のサイトに合わせて書き換えが必要です。この方法は2015年8月21日に使えなくなりました (-“-メ=
Google Chrome でも Internet Explorer でもコンテンツ幅いっぱいに表示されるようになって一安心。だけどまた改変されたら面倒なことになりそうですが…
追記１：OS X Yosemite 10.10.4 上の Safari でも動作を確認しました～(=^o^=)d
追記２：2015年8月21日にTwitterがまたウィジェットが吐き出すソースを改悪したようです
コメントで amur さんが、回避策を教えて下さいました。多謝！ (≧▽≦)
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(window).load(function() {
function changeWidget() {
var twFrame = $('iframe.twitter-timeline');
if (twFrame.length > 0) {
twFrame.contents()
.find('head').append('<link href="http://www.hoge.com/tw.css" rel="stylesheet" type="text/css" media="all" />');
} else {
setTimeout(changeWidget, 1500);
}
}
changeWidget();
});
</script>
最初、コレだけだと幅が変わらなかったのですが、htmlソースに挿入するTwitterウィジェットに（太字部分）を追加して現在のところ100%で表示されてます
<a class="twitter-timeline" href="https://twitter.com/***" data-widget-id="****" width="100%" height="500" data-related="～">@***さんのツイート%lt;/a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
どうして520pxにこだわるのかが理解できず… (-“-=;
追記３：2016年3月4日にTwitterがまたウィジェットの吐き出すソースを改悪したようです。ソースを見ていくと timeline-Widget というクラスで 520px に設定するようになっていましたので、tw.css を以下のように変更してみたところ、Windows10 の Microsoft Edge、MacOS X ElCapitan 10.11.3 の Safari と Google Chrome で 100% 幅に書き換えられるようになりました（下手な鉄砲も数打ちゃ当たる作戦ｗ）Windows 10 上の Google Chrome は今のところダメみたい。なんでだろう？ Windows版 Google Chrome 48.0.2564.116m でも動作を確認しました
#document.timeline-Widget {
max-width: 100% !important;
width: 100% !important;
}
div.timeline-Widget {
max-width: 100% !important;
width: 100% !important;
}
.timeline {
max-width: 100% !important;
width: 100% !important;
}
追記４：2016年4月5日に、Twitterがまたウィジェットの吐き出すソースを改悪し、今度はウィジェット幅に比例して文字サイズを大きくして見た目を悪くする作戦に出たようです。暫定的な対策として Twitter の文字表示が大きくなったのだが… に記載しましたので、そちらもご参照ください
コメント
ありがとうございます。参考にさせて頂きました。
script内で読み込むcssは、その前段階（headerなど）で宣言し使用しているとうまくいかなかったので、ちゃんとtw.cssのように新に作成しscript内でのみ読み込みにしたら成功しました。
ほんとにありがとうございました。
無事に解決してよかったです！いきなりコードを変えられてしまうと困りますよねぇ…＞Twitter
これでしばらく様子を見て、またおかしくなったら解析…を繰り返していくしかなさそうですね
そのときはまた頑張りましょう！(=^_^=;)
こちらのページを参考にさせていただき、
埋め込みタイムラインを幅800pxで表示させることができました。
ありがとうございました。
ただ、スクリプトを記述したページだけでなく、
他のページに幅300pxで表示させていた部分が自動で折り返されることなく
表示されてしまい、文章が途中で切れて読めなくなってしまいました。
これを解決するには、どうしたらいいのでしょうか。
幅800px表示のページ（トップページ）と幅300px表示のページ（下層ページ）は
それぞれ別のテンプレートで作成しておりますので、
それぞれのテンプレートにどこか違う記述をすれば良いのでしょうか？
ご教示いただけますと助かります。
宜しくお願いいたします。
お役に立ててよかったです
幅520px未満で表示させるなら、このスクリプトを挿入する必要がないと思うのです。たぶんこれまで通りの width=～ の記述で実現されるのではないかと（未確認です）
そうでない場合には、幅300pxで表示したいページ用に tw.css を複製した tw3.css（ファイル名に特に意味はありません。300pxだから tw3 としただけですので、お好みでどうぞ） を作って、width: 300px !important; などと書き換えて、そのページのスクリプトでは、tw3.css を読むように指定してあげる、とかでしょうか… 同じページ内に２つのウィジェットだとアウトだと思いますが、別のページなら大丈夫なような…
あてになりませんが、お試しください
ご返信ありがとうございました。
tw_2.cssを作成する方法も試してみたのですが、
どうもうまくいかず、元々style.cssに記述していた、
.twitter-timeline {
min-width: 800px !important;
}
という部分を削除したらうまく表示されました。
このたびはいろいろと勉強になりました。
本当にありがとうございました！
解決おめでとうございます
…なるほど、別のトコロで最小幅が指定されていたのですね… φ(．．=)メモメモ
こんばんわ。ウィジェット「iframe」のidに固有（詳しくは確認していませんので付き方は不明です）の番号が付き、上記スクリプト5行目の指定では対応できなくなったようです。自分はidの箇所をclassで指定し対応しました。
var twFrame = $(‘iframe#twitter-widget-0’);
↓
var twFrame = $(‘iframe.twitter-timeline’);
をぉ、ありがとうございます！後ほど試してみます (=^o^=)d
…だけど、どうしてTwitterは520px固定にこだわるんですかねぇ… 困ったものです…
ご案内の方法で解決しました！後ほどエントリの方に追記させていただきますね
ありがとうございました (=^o^=)／
こんにちは。こちらの記事を参考に520pxの壁を一度は越えた者です。
私の環境では
var twFrame = $(‘iframe#twitter-widget-0’);
を環境に合わせて変更することでサイズ変更がきちんと効いていたのですが
何の前触れもなく、再度520px幅に戻ってしまいました。
私の環境だけの問題なのか、また仕様が変わってしまったのか・・
皆様方のその後の調子はいかがでしょう？
8月21日にTwitterがソースを改悪したようです…
追記２の部分、お試しください
お世話になります。
こちらのページを参考にさせていただき、埋め込みタイムラインのmax-widthの調整に成功しておりました。
ですが、本日こちらのソースを参考にしタイムラインを埋め込んでいたサイトを確認しますと、
max-widthの調整が出来ておらず、max-widthがデフォルトの520pxの状態になっていました。
iframeの中身を確認したところ、CSSの強制上書きが効いておらず、直近でレスが有った「amur」様の書き込みも試させて頂いたのですが調整が出来ません。
TwitterのAPI情報に仕様変更が起きたのでしょうか。
他人任せで申し訳ございませんが、ご教授の程お願い致します。
8月21日にTwitterがソースを改悪したようです…
追記２の部分、お試しください
お世話になります。
記事、参考にさせていただいております。
ありがとうございます。
PCの表示では、width=”100%”なのが確認できたのですが、iPhone6のSafariからですとどうしても横幅がはみ出してしまう状態でして…
ウィジェットをdivでくくっていますが、それ自体が画面からはみ出すようなサイズではないです。
このような状況になったことはありますか？
もし、何か対処法などご存知でしたらおうかがいしたいです。
突然申し訳ないです。
3chago さま
コメントありがとうございます
同じような症状になったような記憶があります。ボクはメディアクエリを使って <div> のコンテンツ幅を調整させて（いわゆるレスポンシブデザイン）その中にウィジェットを配置して解決したような…
現在 iPhone6 plus でも iPhone5s でも期待通りの表示がされているので、間違ったアプローチではないと思います。どうぞお試しください
ググってこのサイトに辿り着きました。スマホのレスポンシブ対応するためにwidthを100％にしたく思っているのですが・・・
追記２の赤文字の部分、とありますが赤い文字が当方から確認できなく・・・とりあえずコピペしたのですがまったく横幅が伸びません。
デベロッパーツールで確認したところ、iframe id=twitter-widget-0>#document>html class=SandboxRoot…>body>div class=root timeline ltr customisable-borderの中にmax-width;100%;を入れると横幅が伸びることを確認しております。
この、クラス名に半角スペースがついているものについてCSSでの対応の仕方がわからなく・・・またjQueryやjsも知識0なので、書いてる以上のことが出来ず悩んでいます。
もちろんtw.cssを作成し読み込ませ、中身に.twitter-timeline{max-width…を入れています。
また改悪が起こったのでしょうか？それとも自分がまだ設定しきれてない部分があるのでしょうか・・・かもしれないで結構ですので、足がかりを頂ければと思います。
デザイナめざしちゅ さま
コメントありがとうございます
「赤字部分」赤くなってなかったですね🙀「太字部分」に直しました💦ご指摘に感謝です
内容としては、最初の<a>タグの中に width=”100%” を記載するというコトなのですが…
現在のところ、実装したページにおいて幅は520pxを超えて表示されていますので、twitter側での改悪はなされていないと思われます
2015年8月の追記以降 var twFrame = $(‘iframe.twitter-timeline’); に変わっていますが、twitter-widget-0 がまだ残っているでしょうか??
すいません、twitter-widget-0はID名なので、この動作とは関係がないのかも知れませんね。
CSSにheightをいれてimportantしてやるとちゃんと伸びるので、辿り着いているとは思うのですが・・・
太字のwidth100％はコピペしたので入っていますし、CSSにもmax-widthとwidthをimportantで100％にしています。一応ピクセル、rem指定もしてみました。
ちなみにjQueryコードの一番上のjquery.jsを呼び出すと、自分のコーディングで言うとスクリプトの下にあるbxSliderがエラーで動かなくなります。
競合してることと何か関係がありそうでしょうか？
(anonymous function) @ index.php:62
fire @ jquery.js:3119
self.fireWith @ jquery.js:3231
jQuery.extend.ready @ jquery.js:3443
completed @ jquery.js:3474
エラーはこのように吐かれています。
jQueryのコードの順番を入れ替えてもダメでした。
ただ、出来ているという情報だけでも希望が持てますので、なんとか自分で試行錯誤やってみます。
ありがとうございました。
デザイナめざしちゅ さま
bxSlider との組み合わせなのですね。ボクの記憶が正しければ、bxSliderはjQuery ver.1の最新バージョン(1.11.x)では動かなかったような気がします（前に作ったサイトの時に、それに気付かずに四苦八苦しました）
蛇足ですが jQuery を読み込む行を、このページの記述ではなくて
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script>
…としてみるのはどうでしょうか？（すでにお試しでしたらゴメンなさいね）
最小構成で組んでもダメだったのですが、こちらのサイトで紹介されているコードを改めてすべてコピペしたところ、伸びました！
原因は憶測なのですが、こちらのサイトに来る足がかりとなったサイトがあって、そこが間違ったコードを掲載しているのか・・・（どこからきたのか覚えてないのですが；）
$(window).load(function(){
この部分の、行頭の$とwindowのカッコがありませんでした・・・
$( までは自分で消した可能性も確かにありますが、閉じカッコまで間違えて消すことはないと思いますです・・・(´Д｀;)
元の環境にはまだ戻していませんが、伸びた事実は得ましたので頑張ります！
こんな右も左もわからない馬の骨に時間を割いていただき、本当にありがとうございましたm(_ _)m
デザイナめざしちゅ さま
解決おめでとうございます～ 人間なら、一文字くらいいいじゃんね、と思うモノですが、機械は石頭で困りますね (-“-=;
お役に立てて良かったです (=^o^=)ノ
こんにちは。以前こちらでお世話になった者です。
またまた仕様変更（デザイン？）があったみたいですね・・。
気付けばウィジェットの横幅が具合の悪いことに。
何か情報があればこちらのほうで共有させていただきますね。
ぷりんてぃんさま
本当ですねぇ… どうしても520pxにさせたいみたいですね… (-“-=;
ボクもチャレンジしてみます
今度は内部の「div.timeline-Widget」に520pxが指定され、再び100%不可になったようです。色々試していますが、未だ解決策見つからず。困ったものです。
ラッキー太郎さま
なんで520pxにこだわるのか理解に苦しむのですが、ずいぶんと奥まったトコロにやってくれましたね…
Google Chrome の開発者ツールで直接 style を書き込むと100%になるので、なんとか適用できないものかとチャレンジしてみます
いまやってみたら、Windows の Microsoft Edge と、Mac Book Air の Safari と Chrome、iPad Air の Safari と Chrome では 100% にできるようになりました
もうちょっと検証します
IE11 でも確認できました。有難うございます。
横幅を思いっきり広げると、画像が添付されている場合iframe内一杯に画像が表示される為、画像のみTwitterがこだわる520px仕様でで表示されるように挑戦しましたがうまくいきません。
まず、下で画像拡大を抑えました。
div.tcu-imageWrapper {
background-size: auto !important;
background-position: 0 0 !important;
}
しかしながら、下の背景色が大きいままで制御できませんでした。
div.tcu-imageaspect–2to1::before {
padding-top: 50% !important; ????
}
どなたか、解決方法ご存知であればアドバイス頂ければ幸いです。
画像まで大きくなってしまいますか？ボクが管理しているサイトでは、枠だけ拡張されて、写真はおそらく520pxでセンタリングされて表示されていますが…
Windows版 Google Chromeでも幅が100％になることを確認しました
どうもまたお邪魔します。
またツイッターの幅が520になっていることに気づき来ました。
今回はCSS部分をコピペだけで難なく変更することが出来ました＾＾
ありがとうございます！
お役に立ってよかったです〜😀 また気付いたら教えてください💦
Flameサイズに応じて文字が拡大するようになったようです。
一応、報告まで。
ラッキー太郎さま
ご報告、ありがとうございます😉
ホントに字が大きくなってますね…😨 Twitterの嫌がらせとしか思えない…😡
文字サイズがウィジェット幅に比例して大きくなってしまうことに対する暫定的な対策として、Twitter の文字表示が大きくなったのだが… のエントリに記載しました
ご参考まで…
ウィジェットの作成方法が変わったようです。
以前はIDの発行が必要でしたが、今回はTwitterIDだけでいけるみたいです。
横幅指定もいけるようになりました（汗）
その他、「コレクション」「リスト」など読み込みの形式が増えたようです。
報告でした。
ラッキー太郎さま
おっしゃるとおり、埋め込みタイムライン（https://dev.twitter.com/ja/web/embedded-timelines）のページが変わりましたね
新しいタイプのウィジェットをまだ試していないのですが、「埋め込みタイムラインの幅または高さの最大値を設定するには、タイムラインのアンカー要素にwidth属性またはheight属性を追加してください」と書かれているので、昔みたいにwidthが効くようになったように読み取れますね
Twitterが白旗を揚げてくれたのかな!?