header
カスタマイズ

Twitterウィジェットの埋め込み幅と高さを設定する方法

このブログではもうツイートを埋め込んでいませんが、ブログサイトにツイートを埋め込みたい人はコチラもご参考ください。

Twitter の埋め込みURLのデフォルト設定

利用している WordPress のテーマにもよりますが、だいたいこんな感じになっていると思います。(アカウント名は、表示名ではなく「@」以降のアルファベットや記号数字を含む文字列)。

<a class="twitter-timeline"  href="https://twitter.com/アカウント名">Tweets by @アカウント名</a>

縦幅と横幅の設定方法

たくさんつぶやいたときにレイアウトがだんだん崩れてくることがあります。iPhone 上で横幅がはみ出て画面に収まらないことも。

この場合、ツイートの表示画面(ウィジェット)の出力幅を調整すればOK。

縦幅は data-height

高さを指定します。方法は2種類あります。

  • 件数を固定する(data-tweet-limit)
  • 高さを固定する(data-hight)

件数を固定する方法の場合、ブログサイトにとどまった状態で過去のツイートを追うことができません。ブログサイトからの離脱を防ぐには、極力とどまってもらう方が閲覧者には優しいと思います。ですので、ここでは高さを固定する方法をご紹介します。

高さを固定するには、 data-hight =”500px” とサイズを明示的に指定します。500px くらいがPCサイトでもスマホ上でも一画面に収まりやすいと思いますが、サイトレイアウトにもよると思います。ご自身のサイトでちょうどよいと思うサイズに適宜調整してください。

横幅は data-width

横幅は、一択。

  • 横幅のサイズを指定する(data-width)

レスポンシブを想定して 100% としてみましたが、こちらは正常に動作しませんでした。サイズを明示的に指定する必要があるようです。PCサイトでもスマホでもちょうどよいサイズを探すしかありません。私の場合、iPhone 7 で確認した結果、 data-width=”320px” を採用しました(過去の別サイトですが)。

実際の設定例

Manablog Copy を使っていた時代の実績有のコードは下記。

<a class="twitter-timeline"  href="https://twitter.com/アカウント名" data-width="320px" data-height="500px">Tweets by @アカウント名</a>

まとめ

CSS等の別方法を試されている方もいらっしゃいますが、環境により反映されないケースも多々あるようです。個人的にはこの設定だと初心者も採用しやすく、後から調整もしやすいのでおススメですよ。

ではでは、素敵なブログライフを応援しております!

【HTML】Twitterのツイートの埋め込み位置を真ん中にする方法ツイートの引用表示を真ん中にするコードメモ。...