記事中にTwitterのつぶやきを埋め込んでみよう!

ブログ管理Twitter, ブログ管理, 初心者

Twitter埋め込みヘッダー

ぐず夫
ぐず夫
そういやトリよ

トリ師匠
トリ師匠
なんや、質問なんて珍しの。
ぐず夫
ぐず夫
ウチでも何の気なしに使ってるTwitterの埋め込み。
あれ、どうやってるんや?
トリ師匠
トリ師匠
はぁ? 説明してへんかったっけ。
そんなら今回はダンパに頼むで。

ということで、今回はGutenbergやクラシックエディターを使ったTwitterの埋め込みについて見てみましょう!

誰かのつぶやきを埋め込んでみたい!

ぐず夫
ぐず夫
こんな感じで、なーんの前置きもなく埋め込んでるけど、ワシそんなやり方1度も教えてもろてへんで!
ダンパ
ダンパ
だって教えていませんもん。
ぐず夫
ぐず夫
開き直んな!
ちゃーんとやり方教えてくれな困るやないか!
ダンパ
ダンパ
そんなに困りますかぁ?
グズなアナタには不要じゃありませんかぁ?
ぐず夫
ぐず夫
こじるり調で言うな!
ワシだって、誰かの言葉を取り立てていじりたい時があんねん!
ダンパ
ダンパ
(誰か知らないけど、その人とても不憫…)
でしたら今日は、皆さんや自分のTwitterのつぶやきを、Gutenbergやクラシックエディタで組み込む方法を見てみましょう!

実際にTwitterを埋め込んでみよう!

ダンパ
ダンパ
まずは投稿の準備をしましょう。
本文入力の段階まで進めたら、いよいよつぶやきを組み込んでいきますよ。

○ 投稿の前準備はコチラ!

ダンパ
ダンパ
準備ができたら、まずは記事に組み込みたいTwitterのつぶやきを見てみましょう。
ツイートを確認
仮に対象のつぶやきをコチラとします
ぐず夫
ぐず夫
ほい、見たで。
ダンパ
ダンパ
そうしましたら次は、右上の下矢印(↓)を押し、「ツイートをサイトに埋め込む」を選択します。
ツイートを埋め込む選択
※ 表示はTwitterの仕様により変更となる場合があります
ぐず夫
ぐず夫
お、なんか出たで。
ダンパ
ダンパ
「メディアを含める」(画像や動画も記事に載せるかどうか)を選択して、「以下のコードを~」と書かれた英数字の羅列を全てコピーしてください。

コードを確認

ぐず夫
ぐず夫
ふむ。コピーコピーと…
ダンパ
ダンパ
そうしましたら、次は実際に埋め込んでみます。
ブログの投稿欄に戻りましたら、まずはいつものように「+」ボタンを押し、「フォーマット」の項目中の「カスタムHTML」ブロックを選択します。

カスタムHTML選択

ダンパ
ダンパ
HTMLブロックができましたら、「HTMLを入力」と書かれた部分に、さきほどコピーした内容を貼り付けます。

カスタムHTMLブロックにコードを貼り付け

ぐず夫
ぐず夫
ふむふむ。
ダンパ
ダンパ
基本的にこれで埋め込みは完了です。実際に見てみたい場合は、ブロックメニューの「プレビュー」を押すか、投稿メニューの「プレビュー」を押して確認できます。

確認はプレビューを押下

ぐず夫
ぐず夫
は?
メチャメチャ簡単やん!

ダンパ
ダンパ
ええ、簡単ですよ。
では他の投稿パターンでも引き続き確認してみましょう。

クラシックブロックの場合は?

ダンパ
ダンパ
それでは投稿の準備をしてください。
ツイートのコードをコピーするところまでは上と同じです。
ぐず夫
ぐず夫
コードのコピーまででけたで。
ダンパ
ダンパ
ではクラシックブロックの埋め込みに入りましょう。
まずはいつものように「+」ボタンを押し、「フォーマット」の項目中の「クラシック」ブロックを選択します。

クラシックブロック選択

ぐず夫
ぐず夫
はいはいはい。
ダンパ
ダンパ
そうしましたら、まずブロック右上に表示された「︙」(詳細設定)ボタンを押します。すると項目が表示されますので、「HTMLとして編集」を選択します。

HTML表示切り替え

ぐず夫
ぐず夫
ほ、ほうほう。
ダンパ
ダンパ
画面が切り替わりましたら、ここにさきほどコピーしたコードを貼り付けますと基本的に埋め込み作業は終了です。引き続きビジュアル編集にて文章等を記入したい場合は、貼り付けが終わりましたら、再度「︙」ボタンを押し、選択肢の中から「ビジュアル編集」を選択します。

ビジュアルモードに戻す

ぐず夫
ぐず夫
なんや変なん出たけど?
ダンパ
ダンパ
クラシックブロック上では微妙な表示がされるかもしれませんが問題ありません。実際のイメージを見てみたい場合は、上と同じく投稿の「プレビュー」を押して確認できます。

埋め込み完了

ぐず夫
ぐず夫
おー、ブロックの時とおんなじ表示や!
ダンパ
ダンパ
こんな感じでクラシックブロックでも同じように埋め込みが可能です。いつもの文章の中にTwitterのつぶやきを混ぜ込んでみると良いかもしれませんね。では続いてクラシックエディタの場合を見てみましょう!

クラシックエディタの場合は?

ダンパ
ダンパ
クラシックエディタの場合はとても簡単です。
上と同じくツイートのコードをコピーするところまで進めていただいて、投稿画面にて「テキスト」を選び、コピーした内容を貼り付けるだけです。

テキストを選択し貼り付け

ぐず夫
ぐず夫
は?
メッチャ簡単すぎへん。Gutenbergが逆に面倒やん!
ダンパ
ダンパ
それはまぁ…、これから色々改善されるんじゃないですか。
実際に見てみたい場合は、同じく「プレビュー」を押して確認できます。
ぐず夫
ぐず夫
なぁ、やっぱりクラシックエディタの方が使いやすいんちゃうか?
ダンパ
ダンパ
それは人それぞれなのではないでしょうか。
私には決められませんので、お答えは控えさせていただきます。

ぐず夫
ぐず夫
(誤魔化しおったで…)

Twitterの埋め込みを終えて

ぐず夫
ぐず夫
人のブログでもTwitterを埋め込んだのよく見るけど、こんなに簡単なんやな。
ダンパ
ダンパ
そうですね。世間の反応を実際に貼り付けたりもできますから、マナーの範囲内で利用してみると良いかもしれませんね。
ぐず夫
ぐず夫
よーし、なら早速あの人やあの人の「うへへ~」なセリフや「ウヒョヒョ~」なお写真をいっぱい組み込んでみるでー!
ダンパ
ダンパ
それはやめなさい!

ということで、Twitterの埋め込みでした。便利ですので皆さんも使ってみてね。

ではまた次回!