TentenのBlogに来て下さり、ありがとうございます!こちらのBlogでは、主に副業での収入アップ術や実体験に基づく投資の実績、フリーランスの生き方などについて発信しております^ ^

(画像付)ブログやWebサイトにtwitter(ツイッター)のツイートやタイムラインを埋め込む方法

こんにちは、テンテンです。

 

今回はブログやWebサイトにtwitterのツイートやタイムラインを埋め込む方法を解説していきます。

 

  1. twitterのツイートを埋め込み目安作業時間:約1〜3分
  2. タイムラインの埋め込み目安作業時間:約5分〜10分

 

【①twitterのツイート埋め込み完成イメージ】

 

 

【②twitterのタイムライン埋め込み完成イメージ】

 

 

わかりやすいように画像付きで解説させていただきます。

 

では早速、解説に進んでいきます。

 

ブログにtwitter(ツイッター)のツイートを埋め込む方法

 

早速、ブログにツイートを埋め込んでいきます。

 

①twitterから埋め込みを行いたいツイートを見つけ、赤矢印の箇所をクリックします

 

 

②ツイートを埋め込むをクリックします

 

 

③少しスクロールすると、下記の画面になるので、「Copy Code」をクリックします。

 

 

④「×」をクリックします

 

 

ここまでで、ツイートのコードはコピー出来たので、後はブログに貼るだけです。

 

では、早速、ブログにツイートを埋め込みます。

 

⑤ワードプレスを開き、埋め込みたい記事に対して、「テキスト」をクリックします。

※「ビジュアル」にコードを張り付けてもちゃんと表示されません。

 

 

⑥コピーしたコードの貼り付けを行います。

 

 

余談ですが、テキストはよく使うので、ここで一つコードを覚えておきましょう。

テキストの箇所のところどころに「 」があります。

  → 改行

 

これでtwitterのツイートの埋め込みは完成です。

 

念の為、プレビューで確認してみてください。

 

twitter(ツイッター )のタイムラインをブログに埋め込む方法

 

こちらのブログでは、フッターにタイムラインを埋め込んでいるので同じ方法で解説させていただきます。

※テーマはTHE THORを入れておりますので、多少異なる点があるかと思いますが、基本的な作業な同じです。

【圧倒的にSEOに強く・上位表示されやすいWordPressテーマ】 THE・THOR(ザ・トール)|テーマ&サポートプラン

 

① https://publish.twitter.com/こちらから設定を行います。

赤枠の箇所に、twitterのタイムラインのURLを入力して、「→」をクリックします。

 

 

 

②赤枠で囲っている場所をクリックし、次に「set customization options」をクリックします。

 

 

③次にタイムラインのサイズ調整を行います。

 

Height(px):高さ

Width(px):幅

 

こちらの2つを入力します。

 

入力した際、青枠で囲っている箇所が自動的にサイズが変わります。これが実際のサイズとなりますので、好きなように調整してください。

 

最後に「Update」→「Copy  Code」をクリックします。

 

 

これでタイムラインのコードをコピーすることができました。

 

後、ブログにタイムラインのコードを埋め込むだけです。後、もう少しなので頑張りましょう!

 

④ワードプレスを開き、「外観」→「ウィジェット」に進みます。

※僕の場合はフッターエリアの右側に設定しておりますので、この方法で解説を進めます。

 

また、インストールしているテンプレートによってウィジェットの表示が異なりますが、基本的には同じような作業になります。

 

 

⑤「利用できるウィジェット」から「テキスト」をフッターエリアに移し、赤矢印の箇所をクリックします。

 

 

⑥「テキスト」をクリックし、先ほどコピーしたタイムラインのコードを貼り付けます。

 

貼り付けると下記画面の状態になります。

 

最後に忘れずに保存しましょう!

 

 

これで設定完了です。

 

サイドバーにタイムラインを貼り付けたい場合は、同様にサイドバーのエリアで同じことをすれば、設定が可能です。簡単ですよね!

 

最後に一応、自分のサイトを確認してみてください!

 

自分のブログサイトにtwitterのツイートとタイムラインの埋め込み方法は以上となります。

 

こちらの記事では、ブログ記事にユーチューブ動画を入れる方法を解説しておりますので、もし良かったらご参考にください。

ブログやWebサイトにYouTube(ユーチューブ)を埋め込む方法

 

最後まで読んでいただき、ありがとうございました。

最新情報をチェックしよう!
>Tenten Blog

Tenten Blog