こんにちは!先日、ツイッターのTLを
ブログのサイドバーに設置したややかぼ( @yayakabo430 )です!
実は、密かに憧れていたのですが、やっと重い腰があがり、設置できました。
実際設置してみて、
なんで早くやらなかったんだろうってくらい簡単でした!
画像だけでもわかるくらいまで落とし込んでいるので、
是非参考にしてください♪
twitterのタイムラインって?
twitterのタイムラインとかサイドバーってそもそもなんやねん!という方も
いらっしゃるかもしれませんので、まずは説明から。
もう知ってるよって方は >>設置までの流れ まで飛んでください!
下イメージのように、私のブログの右側に"TWITTER"という項目があって、
@yayakabo430 のツイートが表示されています。
![ブログのサイドバーにtwitterのTLが埋め込まれている](https://pok430.com/wp-content/uploads/2020/08/01_twitteronblog-1024x478.png)
この、表示されいているツイートたちが、"タイムライン(以下TL)"です。
そして、この表示してる場所が"サイドバー"です。
これを設置していこう、というワケです。
設置までの流れ
設置までの流れはとしては、以下の通り。
- アカウントのTLのHTMLを作成
- WordPressにHTMLを貼り付けて設置する
わお、とっても簡単!
HTMLの作成は、技術は知識はいりません。
サイトを使って作ってもらいます!
そのサイトのアカウント作成も必要ありまん。
必要なのは、twitterのアカウントだけ。
アカウントのTLのhtmlを作成
アカウントのTLのhtml作成には、Twitter Publish さんを使います。
(文字を押したらサイトまで飛べるよ)
Twitter Publishを開くと、下イメージのような画面が出てくると思います。
赤枠部分に、自分のアカウントのURLを入れて"→"をクリック。
URLは、こんな感じ↓
http://twitter.com/[自分のアカウント]
※自分のtwitterからコピーしてくる方法も次で紹介します。
![アカウントURLを入力](https://pok430.com/wp-content/uploads/2020/08/02_urlenter-1024x439.png)
URLは、twitterからもコピーしてこれます!
下イメージのようにtwitterへアクセスして、"プロフィール"へ。
そのときのURLをコピーして貼り付けてもOK。
![twitterのプロフィールからURLを取得](https://pok430.com/wp-content/uploads/2020/08/03_howtosearchurl-1024x550.png)
次に、下イメージの赤枠ように、
左側の"Embedded Timeline"を選択します。
![左のtimelineを選択](https://pok430.com/wp-content/uploads/2020/08/04_selecttimeline-1024x505.png)
下イメージのように、自分のTLが表示されていたら完成です!
赤枠部分をクリックしたらhtmlのコピーも完了です!
![CopyCodeを選択](https://pok430.com/wp-content/uploads/2020/08/05_copycode-1024x504.png)
html作成、めっちゃ簡単でしたね!
WordPressに設置する
いよいよ、WordPressに設置です。
WordPressの"外観"→"ウィジェット"へ移動します。
![外観→ウィジェット](https://pok430.com/wp-content/uploads/2020/08/06_外観ウィジェット.png)
項目から、"カスタムHTML"をクリックして、
"Primary Sidebar"を選択します。
この作業は、"カスタムHTML"を、
サイドバー(Primary Sidebar)に設置するための準備です。
![カスタムHTML→Primaryidebar](https://pok430.com/wp-content/uploads/2020/08/07_customhtml-1024x498.png)
すると、下イメージのように、右側にカスタムHTMLの項目が出てきます。
![タイトル、内容、Saveを入力、クリック](https://pok430.com/wp-content/uploads/2020/08/08_titlesave-1024x497.png)
この"内容"にさっきコピーしたhtmlを貼り付けます。
貼り付け方は、"Ctrl"+"V"または、右クリック"貼り付け"で出来ます。
タイトルをつけて、"Save"をクリックして完了です!
簡単でしたね!
最後に、自分のブログを見てちゃんとできているか、確認しましょう。
ちなみに、サイドバーの表示する順番を変えたい場合は、
編集部分の"カスタムHTML"をドラッグすれば変えることができます!
これであなたのブログがまたひとつ、
素敵なデザインに近づけたのなら、幸いです。
コメント