【3分で解決!】CocoonでTwitterのタイムラインを埋め込む方法

ブログ運営
  • プロフィールページにTwitterのタイムライン埋め込みたい
  • サイドバーにTwitterのタイムライン埋め込みたい

「ブログにTwitterのタイムラインを埋め込みたいけど、やりかたがわからない」 というひとは、けっこういます。

わたしも 「どうやって埋め込むの?」 と思っていました。

でも やり方は超簡単! 3分でできます。 

サクっと解決して記事作成に時間を使いましょう!

 

この記事では、つぎの2つを解説します。

  • Twitterタイムラインを記事に埋め込む方法
  • Twitterタイムラインをサイドバーに埋め込む方法

この記事を読めば、3分後にはあなたのブログにTwitterのタイムラインが埋め込まれていますよ。

Twitterのフォロワー獲得にもつながりますので、ぜひ活用してください♪

 

あわせて読みたい

Twitterのツイートを埋め込む方法は、「【3分で解決!】CocoonでTwitter(ツイート)を埋め込む方法」で解説しています。

 

スポンサーリンク

Twitterのタイムラインを記事に埋め込む方法

Twitterのタイムラインを記事に埋め込む手順は、つぎの2つだけです。

  1. Twitterから埋め込みコードをコピー
  2. コピーしたコードを記事本文に貼り付け

それぞれ解説していきます。

Twitterから埋め込みコードをコピー

Twitterにログインし、ホーム画面を開きます。

画面左 「プロフィール」 をクリックします。

Twitter プロフィールクリック

プロフィール画面のURLをコピーします。

Twitter URLコピー

一番上に表示されているツイートの右上「・・・」をクリックします。

Twitter 「・・・」クリック

「 ツイートを埋め込む 」をクリックします。

Twitter ツイートを埋め込むクリック

コード作成画面が開きます。

自動的に画面が下にスクロールされるので、画面を上にスクロールし入力欄を表示させます。

Twitter 上にスクロール
Twitter 上にスクロール

コピーしたプロフィール画面のURLを入力欄に貼り付け、「→」をクリックします。

Twitter URL貼り付け

画面の下のほうに自動的にスクロールされます。

「Embedded Timeline」をクリックします。

Twitter 「Embedded Timeline」クリック

画面の下のほうに自動的にスクロールされます。

「set customization options」をクリックし、設定画面を開きます。

Twitter 「set customization options」クリック
Twitter 「set customization options」クリック

「Height(px)」に「500」を入力し、「Update」をクリックします。

設定した値はあとで変更可能です。

Twitter 「Height」500入力

設定画面が閉じたら、「Copy Code」をクリックしコードをコピーします。

Twitter 「CopyCode」クリック

コピー完了画面がでれば、Twitterでの操作は完了です。

Twitter コピー完了
くりけん
くりけん

Twitterでの操作はこれで完了です!

 

コピーしたコード を記事本文に貼り付け

使っているつぎのエディターによりやり方が違います。

それぞれ解説します。

 

Gutenberg(グーデンベルグ)を使っているとき

埋め込みたい場所で、ブロックエディターの「+」マーク(ブロック追加)をクリックします。

グーデンベルグ +マーククリック

ブロック選択画面に「カスタムHTML」が表示されていれば、クリックします。

グーデンベルグ カスタムHTMLクリック

「カスタムHTML」が表示されていなければ、「すべて表示」をクリックします。

グーデンベルグ すべて表示クリック

「ウィジェット」内の「カスタムHTML」をクリックします。

グーデンベルグ すべて表示>カスタムHTMLクリック

「カスタムHTML」にTwitterでコピーしたコードを貼り付けます。

グーデンベルグ カスタムHTMLにコードをコピー
くりけん
くりけん

以上で完了です。簡単だったでしょう^^

  

実際のプレビュー画面は次のようになります。

グーデンベルグ プレビュー500px

 

表示されているタイムラインのサイズを変更したい場合はどうするの?

くりけん
くりけん

「カスタムHTML」に貼り付けたコードを書き換えれば、サイズを変更できます。

貼り付けたコードの「data-height」を変更します。

グーデンベルグ サイズ変更

「data-height」を「1000」「500」「250」にしたときは、次のような表示になります。

「1000」にしたとき

グーデンベルグ プレビュー1000px

「500」にしたとき

グーデンベルグ プレビュー500px

「250」にしたとき

グーデンベルグ プレビュー250px
くりけん
くりけん

いろいろ試して、お好みの表示サイズを見つけてみてくださいね。

 

スポンサーリンク

 

クラシックエディターの場合

埋め込みたい場所で、エディターの右上「テキスト」をクリックし、テキストエディターを開きます。

クラシックエディター テキストクリック

タイムラインを追加したい位置にTwitterでコピーしたコードを貼り付けます。

クラシックエディター コード貼り付け
くりけん
くりけん

以上で完了です。簡単だったでしょう^^

 

実際のプレビュー画面は次のようになります。

クラシックエディター プレビュー500px

 

表示されているタイムラインのサイズを変更したい場合はどうするの?

くりけん
くりけん

「テキスト」に貼り付けたコードを書き換えれば、サイズを変更できます。

貼り付けたコードの「data-height」を変更します。

クラシックエディター サイズ変更

「data-height」を「1000」「500」「250」にしたときは、次のような表示になります。

「1000」にしたとき

グーデンベルグ プレビュー1000px

「500」にしたとき

グーデンベルグ プレビュー500px

「250」にしたとき

グーデンベルグ プレビュー250px
くりけん
くりけん

いろいろ試して、お好みの表示サイズを見つけてみてくださいね。

 

Twitterタイムラインをサイドバーに埋め込む方法

Twitterタイムラインをサイドバーに埋め込む手順は、つぎの2つだけです。

  1. Twitterから埋め込みコードをコピー
  2. コピーしたコードをウィジェットに貼り付け

それぞれ解説していきます。

Twitterから埋め込みコードをコピー

Twitterにログインし、ホーム画面を開きます。

画面左 「プロフィール」 をクリックします。

Twitter プロフィールクリック

「プロフィール」画面のURLをコピーします。

Twitter URLコピー

一番上に表示されているツイートの右上「・・・」をクリックします。

Twitter 「・・・」クリック

「 ツイートを埋め込む 」をクリックします。

Twitter ツイートを埋め込むクリック

コード作成画面が開きます。

自動的に画面が下にスクロールされるので、画面を上にスクロールします。

Twitter 上にスクロール

プロフィール画面でコピーしたURLを入力欄に貼り付け、「→」をクリックします。

Twitter URL貼り付け

自動的に画面の下のほうにスクロールされます。

「Embedded Timeline」をクリックします。

Twitter 「Embedded Timeline」クリック

自動的に画面の下のほうにスクロールされます。

「set customization options」をクリックし、設定画面を開きます。

Twitter 「set customization options」クリック

「Height(px)」に「500」を入力し、「Update」をクリックします。

設定した値はあとで変更することができます。

Twitter 「Height(px)」に500を設定

設定画面が閉じたら、「Copy Code」をクリックしコードをコピーします。

Twitter 「CopyCode」クリック

コピー完了画面がでれば、完了です。

Twitter コピー完了
くりけん
くりけん

Twitterでの操作はこれで完了です!

 

スポンサーリンク

 

コピーしたコード をウィジェットに貼り付け

WordPressの管理画面で 「外観」 > 「ウィジェット」 をクリックします。

Wordpress 外観>ウィジェット

ウィジェット管理画面が開きます。

Wordpress ウィジェット画面

「カスタムHTML」をクリックします。

Wordpress カスタムHTMLクリック

「サイドバー」を選択し、「ウィジェットを追加」をクリックします。

Wordpress ウィジェット追加

「サイドバー」に「カスタムHTML」が追加されます。

Wordpress サイドバーにカスタムHTMLが追加

「タイトル」に「Twitter」(あとで変更できます)と入力します。

「内容」にTwitterでコピーしたコードを貼り付けます。

「タイトル」「内容」を入力後、「保存」をクリックします。

Wordpress カスタムHTMLにタイトル入力、コードを貼り付け

「完了」をクリックします。

Wordpress 完了クリック

追加した「カスタムHTML」を表示したい場所にドラック&ドロップで移動します。

 

表示されているタイムラインのサイズを変更したい場合はどうするの?

くりけん
くりけん

「内容」に貼り付けたコードを書き換えれば、サイズを変更できます。

貼り付けたコードの「data-height」を変更します。

Wordpress 「data-height」変更

まとめ : Twitterタイムラインの埋め込みは超簡単!

この記事ではつぎの2つを解説しました。

  • Twitterタイムラインを記事に埋め込む方法
  • Twitterタイムラインをサイドバーに埋め込む方法

どちらも大きな手順としては、次の2つです。

  1. Twitterから埋め込みコードをコピー
  2. コピーしたコードを貼り付け

 

ブログと同時にTwitterを運用しているなら、タイムラインをブログに表示しましょう!

記事だけではなく、ツイートに興味をもってもらうこともできますよ。

Twitterフォロワー獲得のチャンスにもなりますね ♪

 

あわせて読みたい

Twitterのツイートを埋め込む方法は、「【3分で解決!】CocoonでTwitter(ツイート)を埋め込む方法」で解説しています。

 

この記事が参考になれば、フォローかブックマークしてくれるとうれしいです!

ブログ運営
くりけんをフォローする
スポンサーリンク
アラフォーからのライフハック
タイトルとURLをコピーしました