どうも、金太郎飴マンです!
悩み
こんな風にブログにTwitterのタイムライン埋め込みたい!
どうやんの?
簡単です!
いまからお伝えする3ステップで、本当に簡単にできます!
それでは、早速行きましょう!
前提条件
- 使用しているブログサービス:「WordPress」
- 使用しているテーマ:「AFFINGER6」
TwitterのプロフィールページURLをコピー【ステップ1】
ではまず最初に、Twitterを開きます。
プロフィールボタンをクリック
⇩
上部のプロフィールURLをコピー
Twitterの埋め込みリンク作成【ステップ2】
このサイトからTwitterの埋め込みリンクを作成していきます。
➡https://publish.twitter.com/#
ここにステップ1でコピーしたURLを貼り付けて「➡」ボタンをクリック
⇩
下の画面が自動表示されます
左側の「Embedded Timeline」をクリック
⇩
下の画面が自動表示されます
「set customization options」をクリック
⇩
参考
① ブログに表示されるTwitterのタイムラインの「縦幅(高さ)」
➡あとで調整するので入力不要
② ブログに表示されるTwitterのタイムラインの「横幅」
➡「サイドバー」に表示させたい場合は「300px」
③ ブログに表示されるTwitterのタイムラインの「表示色」(白(Light)or黒(Dark))
➡お好みで選んでください ※どちらか選択すると選択項目画面の下部にサンプル表示されます
④ ブログに表示されるTwitterのタイムラインの「表示言語」
➡自動表示されている「Automatic」のままで大丈夫です
各項目をすべて入力したあとは
画面右下の「Update」ボタンをクリック
⇩
下の画面が自動表示されます
Twitterの埋め込みリンク作成完了!
「Copy Code」ボタンをクリック
⇩
これで作成されたURLがコピーされました!
ブログに埋め込む【ステップ3】
WordPressのトップページを開きます
「外観」➡「ウィジェット」
⇩
「カスタムHTML」➡「サイドバートップ」➡「ウィジェット追加」
⇩
【ステップ2】でコピーしたURLを貼り付けて「保存」
あとは「外観」で自分のサイトを確認してみてください!
これで終わりです!
注意ポイント
ブログに表示されるTwitterのタイムラインの「縦幅(高さ)」は
【ステップ2】での初期設定時には数値を入力していないので、
貼り付けしたURL内の「data-height="●●●●"」にある数字(●●●●部分)を変えて調整してください。
(ブログのタイムラインのサイズ感を確認しながら調整してください。)
幅を調整する場合には「 data-width="●●●●"」です。
⇩
【完成形です!】
以上でTwitterのタイムラインを埋め込む簡単な方法をお伝えしました。
今日はこの辺で失礼します。
ありがとうございました!