Simplicity1.9.3 Twitterカード埋め込みiPhone5s表示テスト

ツイッターのURLをWordPressのビジュアルエディタから埋め込みした時に出力される見た目とソースコードをメモ。

スマホ表示などを確かめるための自分用です。

WordPressのテーマはSimplicity1.9.3安定版。

Simplicityカスタマイズ画面でのTwitterカードの設定は以下のとおり。

広告

ツイートの埋め込み方法

ツイートやYouTube動画を簡単にWordpress記事へ埋め込む方法|Windows Live Writer向け

WordPressに標準で用意されている埋め込み機能を使用。

ツイートの個別URLをビジュアルエディタにコピペするだけでTwitterカードとして出力される。

検証の元ネタ

こちらの記事に貼り付けたツイッターカードについて。

テレビで放送するなんて何事だ!猫にチョコは危険なんだぞ!ハッピーあにまる2016に物申す!

Twitterカードの埋め込みについて|Simplicityフォーラム

iPhone5s実機で見ると、CSSの!inportを使って幅を指定しても横スクロールが発生してしまう。

iPhone5sで横スクロールが発生するツイート

↓ビジュアルエディタに埋め込みしたURL

出力後のソースコード

iPhone5sで見ると、はみ出して横スクロールが発生してしまう。

自分のツイートは動画付きでも横スクロールが発生しない

出力後のソースコード

同じようにTwitter動画を含むツイートでも自分のはなぜか横スクロールが発生しない。なぜ?

考えられる可能性

もしかしたらハンドルネームが長いと最後の「…」のスペース程度が横に押し出されるんじゃないか?と思ったり。

ハンドルネームの長さが原因か検証

短いテキストのみのツイートを埋め込んだ場合。

↓短いテキストのみでもはみ出した。

ということは、はみ出すかどうかは

  • class名
  • 動画の有無

では無さそうな気がする。

今のところハンドルネームの長さかなと思っているけど、検証を重ねるのに手間がかかりそうなので保留中。

※追記:いつの間にか直ってた

2016/01/21、ふと確認してみると横スクロールが発生しなくなっていました。なぜ直ったのかはわからず。

ハンドルネームの長さは変わっておらず、自分のWordPressテーマも変更していないため、ツイッター側が何か変わったのかも。

広告

このページのシェア・保存はこちら

コメント(本文のみでOK。URL含むコメントは承認待ちになります)

メールアドレスが公開されることはありません。