How To

【ブログに他人のTwitterを埋め込む方法】と5つの便利な小技

Twitter埋め込み

自分のブログ内に他人のTwitterを埋め込む方法を解説します。

基本の埋め込み方法はもちろん、埋め込み時に知っておきたい便利な5つの小技も紹介していきます。

 

こんな人のお役に立てる記事です。

小豆
自分のブログに他人のツイッターを埋め込む方法を知りたい。
ただ埋め込むだけじゃなくて、好みのスタイルにカスタマイズできると便利なんだけど。

他人のTwitterをブログに埋め込む方法と便利な5つの小技

この記事内では、以下の方法についてお伝えしていきます。

基本編

  • Twitterの埋め込み方法

小技集

  1. 背景を黒にする方法
  2. 元のツイートを表示させない方法
  3. 画像や動画を表示させない方法
  4. Twitterアカウントへのリンクの貼り方
  5. 特定のアカウント内から任意の文字列を含むツイートを検索する方法

 

どれも覚えておくとすごく便利なものばかりです。

難しい操作は一切ありませんので安心してくださいね。

 

ちなみ、自分のブログ内に他人のツイッターを埋め込むことには大きなメリットがあります。

記事後半で解説していますので、興味のある人は見て下さいね。

特に「ブログを初めたばかり初心者さん」にはすごく有益な情報になっています。

 

大福
じゃ、早速Twitterの埋め込み方法を解説していくね。

ブログ内に他人のTwitterを埋め込む方法【基本編】

まずは基本の埋め込み方法の紹介から。

手順は簡単！たった2ステップです。

手順

  1. Twitterの埋め込みコードをコピーする
  2. WordPressテキストエディタに貼り付ける

 

step
1Twitterの埋め込みコードをコピーする

Twitter埋め込み1

埋め込みをしたいツイートを表示したら、ツイートの右上にある∨をクリック。

ツイートを埋め込むを選択

ツイートを埋め込むを選択。

埋め込みコードをコピー

こちらの画面が表示されたらCopy Codeをクリック。

埋め込みコードコピー完了

画面上に、埋め込みコードのコピーが完了した画像が表示されます。

 

step
2WordPressテキストエディタに貼り付ける

WordPressに貼り付け

コピーした埋め込みコードをWordPressに貼り付けます。

コードの貼り付けは、必ずテキストエディタで行います。

ビジュアルエディタにコードを貼り付けても、Twitterを埋め込むことはできません。

 

Twitter埋め込み時に便利な5つの小技集と使い方

ここでは以下の方法について紹介していきます。

便利な小技集

  1. 背景を黒にする方法
  2. 元のツイートを表示させない方法
  3. 画像や動画を表示させない方法
  4. アカウントへのリンクの貼り方
  5. 特定のアカウント内から任意の文字列を含むツイートを検索する方法

 

背景を黒にする方法

通常の状態

背景を黒に変更

Twitterの背景を黒にしたい場合は、以下の操作を行います。

 

背景色を変更

set customization options.をクリック。

背景色を選択

How would you like this to look?の設定をLightからDarkへ変更。

Updateをクリックして、次に表示された画面のCopy Codeをクリック。

 

元のツイートを表示させない方法

通常の状態

元ツイートを非表示

元のツイートを表示させたくない場合は、以下の操作を起こないます。

 

背景色を変更

set customization options.をクリック

元のツイートを非表示

Hide Conversationにチェックを入れる。

Updateをクリックして、次に表示された画面のCopy Codeをクリック。

 

画像や動画を表示させない方法

通常の状態

画像を非表示に

ツイート内の画像や動画を表示させたくない場合は、以下のようにコードをカスタマイズします。

 

画像や動画を非表示にするコード

data-cards="hidden"

こちらのコードを、Twitter埋め込みコード内に追加します。

元の埋め込みコード

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">気づけばブログを始めて3年目。<br><br>ということで、更なるモチベーションアップのために自分にプレゼント。<br><br>あの頃は、ブログで稼いだお金でパソコン買えるようになるなんて思ってもいなかったなぁ。<br><br>続けてよかった(´ー｀) <a href="https://t.co/aRSmcbsAZ1">pic.twitter.com/aRSmcbsAZ1</a></p>&mdash; 大福＠ブログアフィで生きる (@daifuku_diary) <a href="https://twitter.com/daifuku_diary/status/1260131676505518084?ref_src=twsrc%5Etfw">May 12, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

画像非表示コードを追加

<blockquote class="twitter-tweet" data-cards="hidden" ><p lang="ja" dir="ltr">気づけばブログを始めて3年目。<br><br>ということで、更なるモチベーションアップのために自分にプレゼント。<br><br>あの頃は、ブログで稼いだお金でパソコン買えるようになるなんて思ってもいなかったなぁ。<br><br>続けてよかった(´ー｀) <a href="https://t.co/aRSmcbsAZ1">pic.twitter.com/aRSmcbsAZ1</a></p>&mdash; 大福＠ブログアフィで生きる (@daifuku_diary) <a href="https://twitter.com/daifuku_diary/status/1260131676505518084?ref_src=twsrc%5Etfw">May 12, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

 

アカウントへのリンクの貼り方

特定のTwitterアカウントへのリンクを貼りたい場合は、次のように入力します。

 

アカウントリンク

紹介したいアカウントのユーザー名をコピー。

＠マークより後ろの部分をコピーしてください。

任意の文字列に以下のコードをリンク挿入する。

アカウントへのリンクコード

https://twitter.com/ここにユーザー名

 

たとえば文字列【大福】にTwitterアカウントへのリンクを貼る場合はこんな感じです

アカウントへのリンク挿入

 

特定のアカウント内から任意の文字列を含むツイートを検索する方法

小豆
○○さんのツイートから△△を含むツイートをブログに埋め込みたい。

特定のアカウント内から任意の文字列を含むツイートを検索したい場合は、以下の手順で行います。

 

Twitter検索窓に以下のように入力します。

特定のアカウントから任意の文字列を検索

from:ユーザー名　キーワード

 

たとえば、ブロガーとして有名なヒトデさんのツイートから【ブログ　始め方】を検索する場合はこんな感じ。

ヒトデさん

ここでのユーザー名は＠マークを含む【@hitodeblog】の部分です。

 

特定のツイートを表示

ヒトデさんのツイートの中から【ブログ　始め方】を含むツイートだけが表示されます。

初心者必見！ブログ内に他人のTwitterを埋め込むメリット

パソコン

自分のブログ内に他人のTwitterを埋め込むことで得られるメリットがあります。

それは、記事の信頼性や説得力を上げられることです。

もう少し噛み砕いて言うと、他人のTwitterを埋め込むことで記事の内容に真実味が沸くってことですね。

 

ちょっと実例を出してみますね。

たとえば僕は、ブログ作成にAFFINGER5という有料のWordPressテーマを使用しています。

 

大福
AFFINGER5はブロガーなら絶対に使いたいツールです。

これだけでも良いのですが、ちょっと説得力に欠けますよね。

というわけで、Twitterの力を借りてみます。

大福
僕含め、多くのブロガーがAFFINGER5を使っています。

僕だけでなく、第三者による意見が加わることで説得力（信頼性）が上がりますよね。

 

ちなみに、ツイッターの活用術としては「自分が使ったことのない商品やサービス」のアフィリエイト記事などを書くときにも便利です。

 

まとめ：ブログにTwitterを最大限活用しよう

Twitterの基本の埋め込み方と便利な小技集を紹介しました。

是非あなたのブログでも活用してみてください。

 

小豆
記事内でTwitterが横並びで表示されていたのってどうやるの？
あれは僕が使用しているWordPress有料テーマAFFINGER5の機能なんだ。
大福

メモ

スマホで閲覧している場合は、画面を横にして見た場合のみ記事内のTwitterが横に並んで2列で表示されます。

 

AFFINGER5が気になる人は、こちらを参考にしてください。

  • 「どんなことができるのか」や「価格」が知りたい

AFFINGER5公式サイト

 

  • 「AFFINGER5の評判」や「使用者のレビュー」「おすすめの理由」を知りたい
AFFINGERの評判
AFFINGERの評判を使用歴3年の僕が解説【見本サイトも紹介】

続きを見る

Sponsored Links

この記事タイトルとURLをコピー
  • この記事を書いた人

大福

ブロガー兼アフィリエイター歴4年目。
当ブログのアクセス数は月7万PVほど。
月に20万円ほどのブログ収入で、田舎でのんびりと暮らしています。
人懐っこい性格ですが、人見知りです。

-How To