Twitterタイムラインの埋め込みとデザインカスタマイズの方法

Twitterタイムラインの埋め込みとデザインカスタマイズの方法

ブログやWEBサイトなどにツイッターのタイムライン(ウィジェット)を埋め込んでいる人も多いかと思います。

当ブログも遅まきながらツイッターアカウントを取得して、右サイドバー(PC表示の場合)に埋め込みました。

今回は、これの埋め込み手順とデザインカスタマイズの解説です。

~ 目次 ~

  • タイムラインの埋め込み
  • 細かくカスタマイズする方法
  • コードでカスタマイズする方法
  • 幅の指定がうまくいかない場合

タイムラインの埋め込み

まずはタイムラインの埋め込み方法です。

こちらのページに行き、

https://publish.twitter.com/#

タイムラインを表示したいツイッターアカウントのURLを入れて、エンターキーを押します。

URL、ちなみに当ブログの場合は以下です。
https://twitter.com/souken_blog

次に、左側の「Embedded Timeline」をクリックします。

最後に、コードが表示されるのでこれをコピーして、ブログなりWEBサイトなりに貼り付けます。

これでタイムランが表示されるようになります。

細かくカスタマイズする方法

さーて、カスタマイズ開始です。

デフォルトのままだと以下のように表示されます。
(*これは画像です↓)

縦に長いですね (^_^;)

これをカスタマイズするには
まず「set customization options」の箇所のリンクをクリックします。

すると以下のような表示に切り替わります。

ここで以下の5つの項目をカスタマイズ可能です。
◇タイムラインの高さ(px単位)
◇タイムラインの幅(px単位)
◇タイムラインのテーマ色(Lightモード又はDarkモードの2択)
◇リンクの色
◇言語指定

このうち「リンクの色」に関しては、
色の部分をクリックすると表示される6色から選んでも良し、直接にカラー番号を入力しても良し。
どちらでも可能です。

あと「言語指定」はよほどの事情が無い限りは
「Automatic」で大丈夫です。

カスタマイズの設定が完了したら「Update」ボタンをクリック。

そしてコードをクリック(自動的にコピーされます)。
これをサイトに貼り付けます。

コードでカスタマイズする方法

直接、コードに追加してカスタマイズする方法もあります。

埋め込み用コードの「“twitter-timeline”」の後ろに、カスタマイズ用のコードを追加します。
追加する際は、必ず前後に半角スペースを空けてください。

タイムラインの高さ(px単位) data-width=”**”
タイムラインの幅(px単位) data-height=”**”
テーマ色を「Darkモード」に data-theme=”dark”
リンクの色 data-link-color=”#***”
境界線の色 data-border-color=”#***”
ヘッダーを非表示にする data-chrome=”noheader”
フッターを非表示にする data-chrome=”nofooter”
境界線を消す data-chrome=”noborders”
スクロールバーを非表示にする data-chrome=”noscrollbar”
背景を透明にする data-chrome=”transparent”

「data-chrome=”***”」系のコードを複数まとめて記入する場合は
たとえば、
「data-chrome=”noheader nofooter”」
と、半角スペースを空けて複数入れます。

ちなみに、当ブログに埋め込んだコードは、

<div style="text-align:center;">
<a class="twitter-timeline" data-width="320" data-height="400" data-chrome="transparent nofooter" data-link-color="#e55937" href="https://twitter.com/souken_blog?ref_src=twsrc%5Etfw">Tweets by souken_blog</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

としています。

タイムラインのコードをdivでくくって中央寄せにしています。

幅の指定がうまくいかない場合

タイムラインの幅指定が、何故か機能しない場合があります。

理由は幾つか考えられますが
多いのが、WordPressのサイトなどで
プラグイン「VK All in One Expansion Unit(ExUnit)」を使ってる場合です。

VK All in One Expansion Unit

このプラグインは
WordPressテーマ「Lightning」のほぼ必須プラグイン。
多機能・超絶便利なので他テーマでも使ってる人は多いと思います。
私もよく使ってます。

ただ、このプラグインによって生成されるCSSコードに
以下のようなものがあります。

iframe.twitter-timeline {
    margin-right: auto;
    margin-left: auto;
    width: 740px !important;
}

ここで幅「740px」と固定してしまってるのが原因です。

実はこのプラグインの「ソーシャルメディア連携」機能により
新たにTwitterタイムライン表示用ウィジェット、
「VK Twitter」というものが使えるようになります。

おそらく、これ用のコードでしょうね。
こいつが干渉してるわけです。

この場合は、CSSに以下のコードを追加してください。

iframe.twitter-timeline {
    width : auto !important;
}

これで幅がコントロール出来るようになります。

 

ken
記事内容が古くなったので、内容を修正して2019年8月9日に更新しました。