【Cocoon】Twitterのタイムライン埋め込み方法解説|5分で完了!

ブログ運営

 ブログの自己紹介にTwitterでのツイートを活用したいな

 プロフィールページにTwitterのタイムライン埋め込みたいな

 サイドバーにTwitterのタイムライン埋め込みたいな

 

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

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

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

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

 

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

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

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

 

この記事を読めば、5分後にはあなたのブログに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」500入力

 

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

Twitter 「CopyCode」クリック

 

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

Twitter コピー完了

 

くりけん
くりけん

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

 

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

使っているエディターによりやり方が違うので、次の2つについてそれぞれ解説します。

  • Gutenberg(グーデンベルグ)を使っているとき
  • クラシックエディターを使っているとき

 

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

クラシックエディターを使っているなら、「クラシックエディターを使っているとき」に移動してください。

>> 「クラシックエディターを使っているとき」に移動する。

 

手順は【手順1】~【手順5】までの5ステップです。


 

【手順1】

Wordpessにログインし、投稿記事を開きます。

ブロックエディターの「+」マーク(ブロック追加)をクリックします。

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

 

ブロック選択画面が表示されます。


 

【手順2】

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

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

 

「カスタムHTML」が表示されていた場合は、【手順5】に移動してください。

>>【手順5】に移動する


アンカー

【手順3】

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

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


 

【手順4】

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

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


アンカー

【手順5】

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

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

 

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

 

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

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

 

表示されているサイズを変更したいんだけど・・・

くりけん
くりけん

次のように値を変更すれば表示されているサイズを変更できますよ

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

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

 

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

「1000」にしたとき

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

 

「500」にしたとき

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

 

「250」にしたとき

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

 

くりけん
くりけん

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

次の説明は、クラシックエディターの説明です。
Gutenberg(グーデンベルグ)を使っているなら、「自分のTwitterタイムラインをサイドバーに埋め込む方法」に移動してください。

>>「自分のTwitterタイムラインをサイドバーに埋め込む方法」に移動する

アンカー

クラシックエディターを使っているとき

手順は【手順1】【手順2】の2ステップです。


 

【手順1】

Wordpessにログインし、投稿記事を開きます。

エディターの右上「テキスト」をクリックし、テキストエディターを開きます。

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


 

【手順2】

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

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

 

 

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

 

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

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

 

表示されているサイズを変更したいんだけど・・・

くりけん
くりけん

次のように値を変更すれば表示されているサイズを変更できますよ

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

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

 

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

「1000」にしたとき

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

 

「500」にしたとき

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

 

「250」にしたとき

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

 

くりけん
くりけん

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

アンカー

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

埋め込む手順は、次の2つだけです。それぞれ解説していきます。

1. 自分のTwitterから埋め込みコードをコピー

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

「1.自分のTwitterから埋め込みコードをコピー」 は、「自分のTwitterタイムラインを記事に埋め込む方法」の手順と同じです。
解説不要であれば、「2.コピーしたコード をウィジェットに貼り付け」に移動してください。

>> 「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タイムラインのサイズは「500」です。

 

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

 

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

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

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

 

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

1. 自分のTwitterから埋め込みコードをコピー

2. コピーしたコードを貼り付け

 

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

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

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

 

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

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