すんげブログ

40代での考える家族とは、独立とは、お得情報ある?、転職、鬱、自律神経、筋トレ、副業、アフィリエイトとかを書いていきます。

Twitterのタイムラインをサイドバーに表示させる方法

今日はTwitterのタイムラインをサイドバーに表示させる方法を説明します。

こんにちは、すんげです。私、筋トレもそうですが冬に何かを始めることが多いようです。

今年の冬はブログTwitter始めました。 

プロフィールはちょっとキャラ設定してみてます。そっちのほうが面白いと思って・・・はい、迷走してますwきっと紆余曲折はあると思いますが。

f:id:Sunge:20191230143402p:plain

 

そして、PC画面ではサイトの右側にあるサイドバーに、

Twitterのタイムラインを表示させたいな~と思いましたので、

やり方をここに残しておきます。簡単、たったの3ステップです。

 

 

タイムラインのモジュールの作成

まずはTwitterのタイムラインでコードを作ります。

ここでは「Twitter publish」というサイトをつかいます。

Twitter Publish

f:id:Sunge:20191230144743p:plain

ここにTwitterのアドレスをいれます。

 アカウント名ではなくて、アドレスなので、自分のツイート、リツイートだけが出る画面のアドレスです。

https://twitter.com/sh_unk

私の場合はこれです。良ければフォローしてってください。

 

ⅰ.次の画面で、「Embedded Timeline」のほうを選びます。

f:id:Sunge:20191230150023p:plain

 

ⅱ.はてなブログに張り付けるコードが自動的に生成されるので

  「Copy Code」をクリックして、コピーします。

f:id:Sunge:20191230150455p:plain

ブログに張り付ける

ⅰ. 管理画面の「デザイン」→「カスタマイズ(スパナのマーク)」

   →「サイドバー」の「モジュールの追加」を選択

f:id:Sunge:20191230155909p:plain

ⅱ.『</>HTML』をクリックして、

   先ほどのコードを張り付けて、タイトルをつける → 適用ボタン

   私はFollow Meにしています。 

f:id:Sunge:20191230160449p:plain

これで張り付きます。

 

カスタマイズ(表示を減らす)

張り付けると、結構多くタイムラインが表示されます。下までがすごく長いです。

そこで表示を5つくらいに変えます。

もう一度、管理画面の「デザイン」→「カスタマイズ(スパナのマーク)」→「サイドバー」に行くと、今、追加したタイトルがあるので「編集」を押す

f:id:Sunge:20191230163735p:plain
上記のラインのコードを記入します。

『width="280px" data-tweet-limit="5"』 widthは幅で、limitは表示件数ですので、limit="〇" のところを、表示させたい件数に変更します。

そして適用ボタンを押下

 

これで完成です。どうでしょうか。

 

参照サイト

今回参考にさせていただいたサイトです。とても分かりやすかった。

pea-nut.hatenablog.com

 

もっといろいろと勉強していかないといけないですね。

ではまた