【Cocoon】Twitter(ツイッター)埋め込みは秒でできる

【Cocoon】twitter埋め込みカードCocoon

本記事はTwitter/ツイッターの投稿をブログ記事やサイドバーに埋め込むやり方を紹介していきます。

ブロックエディターを使用している方向けの記事となっています。ブログ開設ができたあなたなら一瞬でできますので、気楽に見ていってください。

いろいろやり方があるんですけど、基本はツイッターのURLをコピーして、投稿画面で貼り付けるだけです。

いやいや、ちゃんとやってるのにできないんだけど、、

大丈夫です。記事を読み込んでいただければ、きっとあなたもツイートを埋め込むことができるようになります。

画像たっぷりで丁寧に解説していきますので、1つずつこなしていきましょう!

また、Cocoonのブログとツイッターを連携させる方法を知りたい方は、別記事にて説明しています。そちらをご覧ください。
関連記事【Cocoon】ブログをツイッターと連携する具体的な手順

twitterを記事に埋め込む方法

  1. Twitterを開いて、埋め込みたいURLをコピーする
  2. WordPressの投稿画面でコピーしたURLを貼り付ける

なんとたったの2ステップ

Twitterを開いて埋め込みたいURLをコピーする

▼タイムラインとかで埋め込みたいツイートを見つけて左クリック▼
▼ツイートのURLをコピー▼

WordPressの投稿画面でコピーしたURLを貼り付ける

段落ブロックかまたは、Tweet埋め込みブロックに貼り付けます

段落ブロックにURLを貼り付ける

▼段落ブロックに貼り付けてもOK▼
▼うまくいくとツイートの形になる▼

TwitterブロックにURLを貼り付ける

▼ブロックの追加⇒埋め込み⇒Twitterから▼
▼Twitterブロックを出してURLを貼り付けてもOK▼
▼URL貼り付けたら埋め込みボタンを押す▼
▼うまくいくとツイートの形になる▼
▼中央揃えとかして整える▼
▼実際に埋め込んたツイートがこちら▼

これで記事にTwitter埋め込みできました!

twitterをサイドバーに埋め込む方法

  1. Twitterを開いて埋め込みたいURLをコピーする
  2. コピーしたURLからコードを作成する
  3. WordPressのウィジェット画面でコードを貼り付ける

こちらもたったの3ステップ!

Twitterを開いて埋め込みたいURLをコピーする

▼ツイッターのプロフィール画面からURLをコピー▼

コピーしたURLからコードを作成する

▼自分のツイート(なんでもいい)のⓥボタンを押す▼
▼ツイートを埋め込むをクリック▼
開いたページのURLを消してコピーしたURLを貼り付け▼
ボタンをクリック▼
▼ちょっとスクロールして、左側のEmbedded Timelineをクリック▼
▼set customization optionsをクリック▼
▼Heightに600を入力しUpdateをクリック▼
▼Copy Codeをクリック▼

さぁ!もうちょいです!がんばろう

WordPressのウィジェット画面でコードを貼り付ける

▼WordPressの編集画面から外観→ウィジェット▼
▼利用できるウィジェットからテキストを選択▼
▼サイドバーを選んでウィジェットを追加▼
▼サイドバーに追加されたテキストウィジェットを選択▼
▼タイトルを入力▼
▼テキストを選択しコピーしたコードを貼り付け▼
▼テキストウィジェットを好みの位置に移動▼

これでサイドバーにツイッターが埋め込まれました!

実際に確認&微調整

▼実際に埋め込まれたツイートがこちら▼
▼ウィジェット画面でタイトルや表示する画面の長さを調整▼

ブログ×SNS

本記事では、【Cocoon】Twitter(ツイッター)埋め込みは秒でできる

ということで記事やサイドバーにツイッターを埋め込む方法をご紹介してきました。結構簡単だったんじゃないですかね。

これであなたのブログにはSNSもかけ合わさってより強くなったんじゃないでしょうか?

  • 口コミも引っ張ってこれるし
  • 単純に自分のツイートを乗せてもいいし
  • 権威ある人のツイートを拝借できる

うまく利用してください

Cocoonのブログとツイッターを連携させる方法を知りたい方は次の関連記事からご覧ください。
関連記事【Cocoon】ブログをツイッターと連携する具体的な手順

Cocoon関連記事

本記事以外にもCocoonに関する記事を書いています。そちらもどうぞご覧になってください。

Cocoon歴1ヶ月くらいの人向け

【Cocoon】ブログをツイッターと連携する具体的な手順
【Cocoon】ボタンの使い方が余裕でわかるようになる【ブロックエディタ】
【Cocoon】スライドショーを設定する方法まとめ
【Cocoon】アイキャッチ画像サイズを統一して揃える設定方法
【Cocoon】アフィリエイト広告の貼り方を始めから丁寧に【解説】
【Cocoon】アドセンス広告の貼り方を始めから丁寧に【解説】
Cocoonスキン一覧まとめ!カスタマイズなしでもおしゃれに決まる
【Cocoonスキン】おすすめ4選!とにかくブログをいい感じにしたい
【Cocoon】固定ページを一覧表示させる方法【ヘッダー/フッターほか】
【Cocoon】記事の書き方!投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】
【Cocoon】パンくずリストを投稿/カテゴリー/固定の各ページに設置する方法
Cocoonブロック一覧!全機能まとめ【初心者向け】
【Cocoon】お問い合わせフォームの設置方法を初心者向けに画像たっぷりで説明する
【Cocoon】目次が表示されない⁉作り方完全解説
【Cocoon】投稿画面ツールバー機能一覧|文字色・ルビほか【初心者向け】
【Cocoon】サイドバーの基本的な使い方【初心者向け】
【Cocoon】吹き出しの基本的な使い方/右に変更など【初心者向け】

Cocoon歴半年くらいの人向け

【Cocoon】おすすめカードでトップページ等をカスタマイズしよう!
【Cocoon】ショートコードの使い方!便利さをマジで知ってもらいたい
【Cocoon】Twitter(ツイッター)埋め込みは秒でできる
【Cocoon】テーブル/表を作成する方法を丁寧に解説(ブロックエディタ)
【Cocoon】行間と段落の間隔を調整する方法【初心者向け】細部にこだわろう
【Cocoon】トップページがボタン1つでサイト型にできるようになった【衝撃】
【Cocoon】カスタマイズまとめ!初心者でもわかりやすく解説
【Cocoon】リスト(箇条書き)をボックスに入れる超簡単な方法【カスタマイズ不要】
【Cocoon】ブログカードの基本的な使い方【初心者向け】
【Cocoon】サイドバーで目次をスクロール追従させる方法【初心者向け】

Cocoon歴がもっと長い人向け

【Cocoon】サイドバーカスタマイズ!カテゴリーのボックスメニューは意外と難しくない
【Cocoon】ブログカードカスタマイズ「続きを読む」を入れる/タイトルのみにする!
【Cocoon】目次カスタマイズ‼見やすくシンプルおしゃれにしよう【CSSコピペでOK】
【Cocoon】スマホ表示簡単カスタマイズ‼ハンバーガーメニューを固定追従させる

コメント