WordPressのウィジェットなどに挿入したTwitterの埋め込みタイムラインのデザインを変更する方法

公開日:2017年6月25日 使い方など
Knowledge Base Wordpress パソコン カスタマイズ 設定

自身のつぶやき(ツイート)やフォローしているユーザーのつぶやき(ツイート)などを本文やウィジェットなどに挿入することができる「埋め込みタイムライン」。サイトの情報を充実させる意味でも非常に便利な機能ですよね?

でもこの埋め込みタイムラインは基本的に「白」か「黒」の背景しか選択できません。仕方ないか・・・でそのまま使ってもいいのですが、サイトの背景色を設定している場合などは不自然な感じになりますよね?

今回はTwitterの「埋め込みタイムライン」に背景色などの装飾を行う方法を紹介します。手順通りにやれば簡単にできますので是非チャレンジしてください。

WordPressのこととして紹介していますが、ブログやその他のサイトでも方法は同じですので参考になれば幸いです。

ウィジェットなどに挿入したTwitterの埋め込みタイムラインを独自デザインにする方法

大きく分けて2つの手順で設定します

1.埋め込みタイムラインの背景色を透明にする

Twitterの埋め込みタイムラインのコードは

<a class="twitter-timeline" data-height="400" href="https://twitter.com/ittfworld">Tweets by ittfworld</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

こんな感じですね。ここに魔法のコードを追加して、透明化します。やり方はかんたん

コードの中のhrefという文字列の手前あたりに(厳密には文字列の手前ならどこでも可)

data-chrome=”transparent”」という魔法のコードを入れるんです。

これで埋め込み部分の背景が透明になり、サイトの背景色がそのまま表示されます。

ちなみに上のコードに魔法のコードを入れたものがこちら

<a class="twitter-timeline" data-height="400" data-chrome="transparent" href="https://twitter.com/ittfworld">Tweets by ittfworld</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

ここまでで第一段階クリアです。

2.タイムラインにデザイン要素を追加する

第一段階で透明化できましたので、埋め込みコードにclass要素を与えて背景色や囲み線などのデザインを施していきます。

今回class名を「tw-ume」としましたが、自身で変更して頂いてOKです。

まずは透明化した埋め込みコードをdiv要素で囲みます。「tw-ume」というclassであれば

<div class="tw-ume"><a class="twitter-timeline" data-height="400" data-chrome="transparent" href="https://twitter.com/ittfworld">Tweets by ittfworld</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script><div>
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

という感じにします(要するに<div class=”tw-ume”>と<div>の間に埋め込みコードを入れるんです)。

※ここで<div id=”〇〇”>と指定することもできますが、id要素は1ページに1か所というきまりがありますから複数の埋め込みを行う場合1か所にしか適用されない場合がありますからclassで指定します(余談でした・・・)。

そしてテーマのCSSに以下のようなコードを追加します

/************** Twitterタイムラインの本体デザイン ***************/
/* Twitterタイムラインのコードに「data-chrome="transparent"」を追加すること */
.tw-ume {
    background-color: #fffacd;
    border: 2px solid #cc9900;
    border-radius: 8px;
}
【注意】コードをコピーして使用する前に必ずお読みください

この記事内にコードが記載されている場合、コードはそのままコピー(いわゆるコピペ)してお使いいただいても構いませんが、以下の件にご留意ください。

使用については自己責任でお願いします

コードの確認は私の管理するサイト、またはテスト環境で問題が起こらなかったものですので、お使いの環境での動作等を保証するものではありません。

万が一このコードを使用してサイトに重篤なトラブルが生じても当サイト、当サイト管理者は一切責任を負いません

コードの変換エラーなどにより動作しない場合、更新エラーが出る場合があります

コードをそのままコピーしても問題なく使えるよう文字列変換を行った上で掲載しておりますが、希に変換できていない場合があり、コードエラーとなることがあります

その場合には以下の方法で修正を行ってみてください

  1. コードの中に全角の記号が入っていませんか?
  2. 半角にすることで解消できます
  3. コードの中に全角の空白(スペース)がありませんか?
  4. 半角にすることで解決できます
  5. コードは合っているはずなのに更新できないときは
  6. 特にエラーの出た行内に日本語での文字列が入っている場合には全角での文字列があるということでエラーになる場合があり、Wordpressのエディタチェックではこれを「’」や「)」など閉じ子のエラーとして認識され更新できないことがあります。エラーとして返される行の先頭に空白がある場合には空白をなくすことできちんと認識され更新されるようになることが多いです。
  7. 「何かが間違っています...」と表示され、更新できないときは
  8. このエラーは本当に何がエラーなのかをWordpressのチェックが判断できない場合に発生します。解決策としてはその画面を開き直すことなのですが、その際希に元のコードがすべて削除されてしまう場合がありますので、今表示されているコードを一旦どこかへコピーしてからページの再読み込みをするようにしてやり直します。
    ※このエラーは不明なエラーなので予期せぬ動きをする可能性がありますので特に慎重な対処が必要です
これらのエラー対処については以下のページが参考になるかも知れません

コードを転載する場合には

ご自身のサイトで当ページで紹介しているコードを転載される場合には当ページへのリンクを入れていただきますようお願いいたします

今回は背景色と囲み線、囲み線を丸めるというデザインを適用しています。

実際に埋め込んだウィジェットは当サイト内の卓球関連の記事にのみ表示している「国際卓球連盟」のツイートを埋め込む部分に使いました。

【WordPress】Huemanテーマで独自の固定ページテンプレートを作る方法

【WordPress】悪質なマルウェア「ランサムウェア(Ransomware)」に所有しているサイトが感染しないようにするための対策いろいろ

これだけはできるようになっておきたいWordPressカスタマイズ前の知識


デザインが適用されないときは

中には「書いてある通りにやったのにできないじゃん!!」となる方もいるかもしれませんね。そんなときはキャッシュを削除してみましょう(これCSS編集の基本ですから覚えておくといいです)。

Google Chromeブラウザの場合ならページを表示した状態で「F12」をクリックしてデベロッパーツールを開きます。そしてページの再読み込みをするためのアイコンの上で右クリックし、「キャッシュを消去してハード再読み込み」をクリックします。

すると・・・ページを速く表示するための記憶(キャッシュ)がクリアされ、最新のCSSが適用されたページが表示されます。

それでもうまくいかないときはclass名が被っているなど他に原因がありますから検証してみてくださいね。

また透明化するための要素が「data-chrome=”transparent”」となっているのでGoogle Chrome限定の設定なのかもしれません(私はChromeを使っているのでその他のブラウザでは試していません)。

おまけ 条件に応じてウィジェットを切り替える方法

おまけ情報ですが、特定の記事や投稿タイプにだけ限定してウィジェットを作れるプラグインがあります

普通なら全ページ共通のウィジェットとなってしまうWordpressサイトの自由度が各段にアップするプラグインですから導入を検討してみてくださいね。

ひまあーと(管理人)
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報