スポンサーリンク

はてなブログ無料版のサイドバーにTwitterを埋め込んだ方法

f:id:siro-buta:20200512222628j:plain

みなさんこんにちは。

 

ブログ初心者の白豚です。

 

先日、Twitterと本ブログ30代大学教員の米国株ブログを連携したことを記事にしました。

 

siro-buta.hatenablog.com

 

Twitterと連携したことでアクセスが増えました。Twitterの皆さんに見て頂くことができているようで、3程度だったアクセスが10-20くらいになりました。

 

Twitter連携の効果を実感しています。

 

まだまだ弱小ブログなので少しずつステップアップしていけるように頑張っていきたいと思います。

 

ステップアップの一環として、はてなブログ無料版のサイドバーにTwitterを埋め込んだのでその方法を紹介したいと思います。

 

それほど難しい方法ではありませんでした。

 

写真を使いながら実際の方法を紹介していきますのでこれからやる人は一緒にやっていきましょう!

 

f:id:siro-buta:20200514215012j:plain

 

まず、自分のTwitterを開き、URLをコピーします。

 

上の写真の左上のほうの青くなっている部分です。

 

次に、下のリンクをクリックします。

 

Twitter Publish

 

Twitterを外部に埋め込むためのコードを取得するサイトです。

 

するとこのような画面が開くと思います。

f:id:siro-buta:20200514215014j:plain

 

画面を下のほうにスクロールしていきます。

 

するとこのような画面が出てきます。

f:id:siro-buta:20200514215025j:plain

はてなブログのサイドバーに埋め込みタイムラインを埋め込む場合は左側のEmbedded Timelineをクリックします。

 

右側はTwitterボタンを埋め込むときにクリックしますが、今回は左側をクリックしてください。

 

左側をクリックしたらさらに下にスクロールしていくとこのような場所があります。

 

f:id:siro-buta:20200514215030j:plain

この検索窓にコードが書かれているので、書かれているコードをコピーします。

 

英語なので少しわかりづらいかもしれませんが検索窓の右側にある青いボタンをクリックしてください。

 

そうすればコードをコピーすることができています。 

 

さて、ここまで出来たら自分のはてなブログへ移動します。

 

そしてははてなブログの設定の【デザイン】をクリックします。

f:id:siro-buta:20200514215045j:plain

そこから【カスタマイズ】→【サイドバー】をクリックします。

 

【サイドバー】をクリックすると各項目が出てくるのでその項目の一番下にある【モジュールの追加】をクリックします。

f:id:siro-buta:20200514215035j:plain

【モジュールの追加】をクリックすると各項目が出てくるのでその中の【HTML】をクリックし、大きな窓枠の中に先ほどコピーしたコードを貼り付けます(貼り付けはCtr+Vでもできます)。

 

左下にある【適用】ボタンをクリックします。

 

そして最後に上にある【変更を保存する】をクリックします。

 

最後の【変更を保存する】をクリックするのを忘れがちなので注意してください!

 

これでブログのサイドバー(右端)にTwitterのタイムラインが埋め込まれているはずです。

f:id:siro-buta:20200514215040j:plain

このようにしてTwitterをサイドバーに埋め込みました。

 

思ったよりもTwitterのタイムラインが下のほうまで長くなっています。

 

短くする方法もあるのでしょうか?調べてみようと思います。

 

またTwitterのタイムラインは記事の中にも埋め込むことができるようですのでいつかやってみようと思います。

 

ブログを始めてまだ間もないのでいろいろ設定をしていきながらブログのレベルアップを図っていこうと思います!

 

 

こんな記事も書いています

siro-buta.hatenablog.com