ワードプレス にTwitter 埋め込むと iPhoneで幅がびろーん対処方法

Twitter 画像サイズ

WordPressでブログ書いたら、いろいろな端末で表示チェックはした方がいいですよブロガーの皆さん!

先日このブログに、Twitterの埋込みをしました。パソコンとAndroidのスマホで美しいレイアウトでしたのに、iPhoneで開いてみたら、Twitterの 埋め込みが右にびろびろ〜〜〜っとブロックの枠をはみ出していました。

枠からはみ出している!
画像やYouTubeも画面からはみ出す

素人ブログならまあいいか・・・と思うところですが、プロなので、これは恥ずかしい!!今は修正しましたが、参考までに対処法をのせておきます。

幅を560に設定

%指定とか幅400とか500 いろいろ試してみましたが、560にしておくと、Twitterから読み込まれたYouTubeの画面がバランスよく表示されました。なので、TwitterにYouTubeリンクが多い場合はチェックです。

パソコンや、Android系のスマホでは、幅指定せずとも適正に表示されましたが、iPhone6では、幅を指定すると対処できます。%は、98%とか100%で試したところダメでした。

幅560でレスポンシブ(いろいろな端末に最適に表示される)と思います。

(例外がでたら、その都度対処します。)

このページをご覧になっている方はすでに埋め込みのやり方ご存じと思いますが、知らない方の為に、Twitterの埋込方法も書いておきますね!

ブログに、Twitter を埋め込む方法

今回は、ツイートのタイムラインがスクロールでみれるタイプの作成方法です。まず、埋め込みたいツイートからコードを取得します。

図の矢印付け根あたり押すと、ツイートを埋め込むの表示が出るのでクリック。

status/〜〜〜は削除し、→押す
set customization optionを押す
高さと幅入れて、Update
コピーする

高さはとりあえず適当に入れて、あとで数字を変えて調節可能です。

WordPressのウィジットにコピーしたソースを貼り付けます。

これでOK

widthとheghtの数値を変え、ブログのレイアウトに合うよう好みで調節できます。

ブロガーは、MacとWindows、iPhoneとスマホ、いろいろな端末で確認できる環境にしておいたほうがよさそうですね。

中古 iPhone を アマゾンでチェック