MENU
ゆるミニマリストの便利グッズを紹介!

twitterのタイムライン表示方法【ワードプレス】

2020 7/02
twitterのタイムライン表示方法【ワードプレス】

こちらのページでは、ブログのトップページにtwitterのタイムラインを載せる方法を解説します。

twitterのタイムライン表示方法【ワードプレス】

私のブログのトップページ右下ような表示のやり方を、画像でわかりやすく解説いたします。

目次

twitterのURLを取得する

twitterのURL取得

まずは以下のページで、twitterのログインをします。

ログインをして、以下のようにアドレスをコピーします。

twitterのURLを取得する

twitterのアドレスコピーができない時は、以下のアドレスの最後に自分のアカウント名を入れるのもOKです。

https://twitter.com/アカウント名

私のアカウント名は@koma_minimalist なので、

https://twitter.com/koma_minimalist となります。

埋め込みコードを作成する

twitterの埋め込みコード

次は埋め込みコードを作成します。以下のページを開いてください。

画像の手順通り、進めていきます。

①にtwitterのURL、②をクリックする

①にtwitterのURL、②をクリックする

①に先程のtwitterのURLを貼り付けて、②の右矢印をクリックします。

左の「Embedded Timeline」をクリックする

左の「Embedded Timeline」をクリックする

set customization options」をクリックする

「set customization options」をクリックする

左上の囲いに400と入力する

左上の囲いに400と入力する

※Height(px)の400(意味:高さ)は私の好みの高さです。タイムラインの表示を縦に長くしたい時は数字を大きく、縦の長さを短くしたい時は数字を小さくしてください。

※横の長さは入力しなくてもOKです。(入力してもOKですが、バランスが悪くなる場合があります。)

コードをコピーするために「copycode」をクリックする

コードをコピーするために「copycode」をクリックする

ここまでで、カスタマイズされた埋め込みコードが作成できました。

ワードプレスに設定する

ワードプレスに設定

wordpressの手順です。こちらも画像の手順通りに進んでください。

「外観」→「カスタマイズ」をクリックする

「外観」→「カスタマイズ」をクリックする

ウィジェットを選ぶ

ウィジェットを選ぶ

サイドバーを開く

サイドバーを開く

「ウィジェット追加」をクリックする

「ウィジェット追加」をクリックする

「テキスト」をクリックする

「テキスト」をクリックする

①テキスト②埋め込みコード貼り付け③完了④公開

①テキスト②埋め込みコード貼り付け③完了④公開

twitterの埋め込みコード(カスタマイズしたコード)を②に貼り付けて、公開をします。

これで設定は完了です!お疲れさまでした!

さいごに

素敵なブログにしましょう!

ブログのトップページにtwitterは表示されましたか?

私もブログにtwitterのタイムラインを表示したくて調べてみたら、簡単に出来ることがわかりました。

komaのアイコン画像koma

表示サイズを変更したい時は、埋め込みコード作成の画面で自由に調整してください。

ブログにtwitterのタイムラインを表示して、素敵なページにしてください。

コメント

コメントする

目次
閉じる