【ロードマップ】未経験者がwebライターになるための5つのステップ

WordPressブログにTwitterを埋め込む方法【記事内とウィジェット】

Twitterの埋め込みライティング
Twitterの埋め込み
この記事は約7分で読めます。

ブログでは、参考資料やSNSを引用することがあります。

ひーちゃん@認定ランサー
ひーちゃん@認定ランサー

Twitterを載せたい、そんなときがあるよね。

ここでは、WordPressブログの記事内とウィジェットにTwitterのツイートとタイムラインを埋めこむ方法を紹介します。

だれでも簡単にできる方法です。

WordPressブログにTwitterを埋め込む方法【記事内とウィジェット】

WordPress(ワードプレス)にTwitter(ツイッター)を埋めこんでみましょう。

  • 記事内にツイートを埋めこむ
  • ブログ内にタイムラインを埋めこむ
ひーちゃん@認定ランサー
ひーちゃん@認定ランサー

それぞれ分けて方法を紹介するよ。

ブログの記事内にTwitterのツイートを埋め込む2つの方法

さっそくツイートを埋めこみましょう。

WordPressでツイートを埋めこむ方法は2つです。

  1. WordPress限定の方法:URLのコピペ
  2. 一般的な方法:コードのコピペ

WordPress限定の方法:URLのコピペで埋め込み

WordPressでしか利用できない方法が、ツイートURLのコピペです。

まずは、Twitterをひらきましょう。

次に、埋めこみたいツイートをひらいてください。

記事のURLが下の画像にある赤枠部分で示された箇所に表示されています。

ツイートのURL

ツイートのURL

このツイートのURLをWordPressの記事に貼り付けてください。

ひーちゃん@認定ランサー
ひーちゃん@認定ランサー

ビジュアルモードで貼り付けてO.K.だよ。

WordPress限定の方法を使って、Twitterのツイートを埋めこめました。

ひーちゃん@認定ランサー
ひーちゃん@認定ランサー

WordPressなら、この方法がかんたんだよね。

一般的な方法:コードのコピペで埋め込み

一般的な方法として、Twitterコードのコピペをして埋めこみましょう。

まずは、Twitterをひらいてください。

ツイートを埋め込む

</>ツイートを埋め込む

埋めこみたいツイートの右上から[</>ツイートを埋め込む]を選びます。

新しいタブにツイートが表示されるので、ページ内の Copy Code をクリックしてください。

それからWordPressの記事に貼り付けましょう。

ひーちゃん@認定ランサー
ひーちゃん@認定ランサー

この方法は、ビジュアルモードではなくテキストモードに切り替えないとだめだよ。

一般的な方法を使って、ツイートを埋め込みました。

ひーちゃん@認定ランサー
ひーちゃん@認定ランサー

ひと手間かかるよね。

応用編:ツイートのダークモード化

ツイートを貼り付けるときにダークモードを選べます。

ひーちゃん@認定ランサー
ひーちゃん@認定ランサー

ダークモードはカッコいいね。

ツイートを選んだら、 set customization options  とあるので、クリックしてください。

LightとDark

LightとDark

LightとDarkを選べるので、Darkを選択し、コードをコピーしましょう。

ひーちゃん@認定ランサー
ひーちゃん@認定ランサー

貼り付けは、テキストモードじゃなきゃだめだよ。

貼り付けてみるとダークモードのツイートは目立ちますね。

ブログのウィジェットにTwitterのタイムラインを埋め込む

ブログのウィジェットにTwitterのタイムラインを埋めこみましょう。

ひーちゃん@認定ランサー
ひーちゃん@認定ランサー

このブログでもサイドバーに埋めこんでいるよ。

Twitter Publishにアクセスしてください。

公式サイト:Twitter Publish
Twitter Publish

Twitter Publish

表示された画面の枠内に、TwitterアカウントのURLを入力します。

TwitterアカウントのURLを入力後に、右側の→をクリックしましょう。

左がタイムライン

左がタイムライン

表示された画面の左側がタイムラインです。[Embedded Timeline]をクリックします。

タイムラインのプレビューが表示されました。

ひーちゃん@認定ランサー
ひーちゃん@認定ランサー

この状態だとかなり縦長のタイムラインになるから、調整してもいいよ。方法は次の見出しで紹介するね。

ここで、 Copy Code をクリックしてコピーしましょう。

タイムラインのコードをコピーしたら、WordPressにうつり[外観]の[ウィジェット]にすすんでください。

WordPressのウィジェット

WordPressのウィジェット

ウィジェットの[テキスト]を選び、[サイドバー]など任意の場所において、コードをペーストしましょう。

最後に、 保存 します。

これで、Twitterのタイムラインが表示されました。

ひーちゃん@認定ランサー
ひーちゃん@認定ランサー

おつかれさま~

タイムラインの高さを調整する

タイムラインの高さを調整しましょう。

タイムラインのプレビューにある、 set customization options  をクリックしてください。

タイムラインの高さ調整

タイムラインの高さ調整

画像で示した赤枠内はheightsの設定ができます。

任意の高さを入力してください。

ひーちゃん@認定ランサー
ひーちゃん@認定ランサー

スマホのピクセルよりも小さい数値、300~400pxでいいと思うよ。

高さの調整をスマホで確認しながらするとよいでしょう。

設定が完了したら、 Update をクリックしてください。

これで高さ調整はできましたので、さきほど説明した手順でコードをコピーしWordPresからウィジェットを挿入しましょう。

まとめ:WordPressにTwitterを埋め込んでブログをもっと楽しく

Twitterの埋め込み

Twitterの埋め込み

WordPressにTwitterを埋め込むとブログの幅がひろがり、もっと楽しくなるはずです。

Twitterのツイートとタイムラインの埋め込みができます。

ひーちゃん@認定ランサー
ひーちゃん@認定ランサー

あなたのブログにもタイムラインを入れて、Twitterと連携させてみてね。

タイトルとURLをコピーしました