window
トップページ > 記事閲覧
*埋め込みタイムラインの表示について
日時： 2015/12/17 17:55
識別： ID:T3uXEXemenJ/
名前： 一夏
自作ホームページにツイッターの埋め込みタイムラインを使っているのですが、先ほどiPhoneで閲覧中に幅が広がってHTMLやスタイルシートで設定した枠を超えて表示されるようになりました。
iPhoneだけなら端末の問題かと思うのですが、iPadの方も同じ状態でした。
しかしパソコンやAndroidから見る分には問題ありません。

昨日まで何ともなかったのですが、さっき急になった感じです。
iPhone、iPadのみということはSafariの問題かとも思うのですが対処法が分かりません。
同じ経験をされた方や直し方が分かる方よろしくお願いします。

スタイルシートやHTMLの方は弄っていないので特に問題ないとは思うのですが…
メンテ

Re: 埋め込みタイムラインの表示について ( No.1 )
日時： 2015/12/21 08:51
名前： 名無しさん

デフォルトの最大幅が大きめっぽいので、
下を参考にパラメータを指定してみてください。

埋め込みタイムラインのパラメーターリファレンス | Twitter Developers
https://dev.twitter.com/ja/web/embedded-timelines/parameters

widthがウィジェットの最大幅のようなので、たとえば480pxを最大にするなら、
data-width="480" を追加して確認してみます。

たとえば下のようなコードの場合
<a class="twitter-timeline" href="https://twitter.com/0000" data-widget-id="000000000000000">@0000さんのツイート</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>

下のように data-width="480" を追加します。
<a class="twitter-timeline" href="https://twitter.com/0000" data-width="480" data-widget-id="000000000000000">@0000さんのツイート</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>

うまくいかない場合はTwitterのウィジェット作成画面から
もう一度新しいコードを取得して貼り付けてから修正して下さい。


他にもCSS3の@media screenでスクリーン幅に応じて変更する方法や、
jQueryなどを使って調整する方法もあるようです。
メンテ

　返信フォーム　（上記スレッドに返信する場合は以下のフォームから投稿します）
題名 ※必須 スレッドをトップへソート
名前
E-Mail
URL
パスワード 記事メンテ時に使用します （メンテは該当記事のメンテアイコンをクリック）
返信内容
※必須
エラーメッセージや内容などは省略せず詳細にご記入下さい
状態の設定

・問題が解決したら 解決 を選択して投稿して下さい HELP(新しいウィンドウが開きます)
・既存記事の状態設定はメンテ（メンテアイコン）から修正する事ができます。


投稿内容をご確認下さい（記事の削除は出来ません）

   クッキー保存