ブログにTwitterのツイートを埋め込む方法とカスタマイズの仕方

パソコンに映し出されるTwitterの青い鳥 やってみたこと

Twitter を運用しているブロガーさんは多くいると思います

私も同様で、Twitter をきっかけに何かを始めたりすることもあり、ブログ記事内にツイートを埋め込む機会が多くあるのです

そこで、程よいツイ廃(Twitter 廃人)の私が、

  • ブログ記事内にTwitterのツイートを埋め込む基本的な手順
  • カスタマイズオプションの設定方法

の二つをまとめました

基本的な手順

まずは基本的な手順の説明です

カスタマイズもできますがその説明はこの後にしました

以下の手順で進めていきます

※スマホからは操作できません。パソコンでの操作方法を説明しています

クリックする場所の説明

②〈/〉ツイートを埋め込むを選択する

選択する項目の画面

〈/〉ツイートを埋め込むを選択すると、新しいタブが開きます

③Copy Code(コードをコピーする)をクリックしてコピーする

クリックする位置の説明

④編集画面で、カスタムHTMLを選択して、HTMLを入力の部分に貼り付けて完了

貼り付ける位置の説明

これで、基本的な手順は完了です

プレビューから確認してみてください

カスタマイズオプションを設定する場合

次に、表示形式をカスタマイズしてみましょう

  • 背景(明るい、暗い)
  • 表示言語(自動、指定)
  • 会話形式(会話形式、会話を隠す)

の3種類がカスタマイズ可能で以下の方法で進めていきます

※カスタマイズが終わったら、次の手順(⑤カスタマイズを選択したら)に進んでください

それでは画像も含めて説明していきたいと思います

①カスタマイズオプションを設定する

カスタマイズオプションを設定する(set customization options.) をクリックする

クリックする位置の説明

ここをクリックすると選択できる画面になるので、次のように進めていきます

②見た目 背景を明るく⇔暗くする

表示される背景の明るさを選択しましょう

光 Light または 暗い Dark を選択します

クリックする位置と選択項目の説明

違いはコチラ 

光 Light

暗い Dark

③表示言語の選択

言語を選択します

自動選択(Automatic)にしておけば日本語表記になっていますので、自動のままで良いでしょう

自動 Automatic を選択

自動選択の説明

④会話の表示形式を選択

カスタマイズしなければ会話形式で表示されます

会話を隠したい場合は次の手順で行います

  • ①出てきた画面上の会話を隠す(Hide Conversation)にチェックを入れる
  • アップデート(Update)をクリック
チェック項目とクリックする位置の説明

会話形式で表示する(チェックしない)

会話形式を隠す(チェックする)

これらを選択したら、次の手順(⑤カスタマイズを選択したら)に進みます

⑤カスタマイズを選択したら

コードをコピーする(Copy Code)をクリックする

クリックする位置の説明

編集画面で、カスタムHTMLを選択して、HTMLを入力の部分に貼り付けして完了です

貼り付ける位置の説明

完了したら、プレビューで確認しましょう

最後に

誰かのお役に立てたらうれしいです

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