こんにちわ。
ティージャーです。
ブログやHPのトップページにTwitterが埋め込まれているのをみたことがありませんか?
こんな感じです。
![](https://tjnoblog.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-18-14.33.55-1024x420.png)
これからブログを伸ばしていきたい人は、同時にSNSで情報を発信していくと効率的にマーケティングができます。
今日はWordPressの無料テーマ「Cocoon(コクーン)」を使ってブログ記事を書いている方向けに、トップページのサイドバーにTwitterを表示させる方法を紹介します。
写真を使って解説していますので、初心者でもとても簡単にできますので安心してくださいね。
それではやっていきましょう!
【写真付きで解説】Cocoon(コクーン)でトップページのサイドバーにTwitterを表示させる方法:ステップ1
![](https://tjnoblog.com/wp-content/uploads/2021/01/blog-5fe7d54448_640.jpg)
まずは自分のTwitterのURLをコピーします。
![](https://tjnoblog.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-18-14.04.06-1024x769.png)
コピーしたまま、自分のtweet(どれでもいいです)の右上にある【・・・】をクリックしましょう。
![](https://tjnoblog.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-18-14.04.46-1024x563.png)
表示されるメッセージから
【ツイートを埋め込む】
をクリックします。
![](https://tjnoblog.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-18-14.04.57.png)
ページが切り替わります。
上にスクロールすると、下の写真と同じところに移動します。
赤枠で囲ってある文字を削除しましょう。
![](https://tjnoblog.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-18-14.05.13-1024x290.png)
最初の文字を削除したら、そこに最初にコピーした自分のTwitterのURLを入力します。
入力できたら右側にある【→】をクリックしてください。
![](https://tjnoblog.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-18-14.05.45-1024x365.png)
ページが切り替わります。
下の写真をみていただき左側をクリックしてください。
![](https://tjnoblog.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-18-14.06.42.png)
下の写真をみていただき、赤丸で囲ってある【set customization options】をクリックしましょう。
![](https://tjnoblog.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-18-14.07.44-1024x283.png)
次に表示させるTwitter窓枠の高さを変更します。
![](https://tjnoblog.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-18-14.04.46-1-1024x563.png)
下の写真の赤丸で囲っている箇所に
【600】
と入力しみましょう。
入力後は【update】をクリックします。
※この数値は後ほど変更できます。
![](https://tjnoblog.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-18-14.08.55-1024x583.png)
ページが切り替わりますので、【Copy Code】をクリックしましょう。
![](https://tjnoblog.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-18-14.09.31-1024x345.png)
【写真付きで解説】Cocoon(コクーン)でトップページのサイドバーにTwitterを表示させる方法:ステップ2
![](https://tjnoblog.com/wp-content/uploads/2021/01/mockup-53e2d44643_640.jpg)
これでTwitter側の準備は終了です。
今度はWordPressにTwitterを貼り付けて終了です。
もう少しです。
WordPress右側のボックスから
【外観】→【ウィジェット】
を選択します。
![](https://tjnoblog.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-18-14.10.18.png)
ここからの作業は実際にブログをみながら作業をしたほうがやりやすいので、
【ライブプレビューで管理】
を選択します。
![](https://tjnoblog.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-18-14.13.13-1024x557.png)
【サイドバー】をクリックします。
![](https://tjnoblog.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-18-14.13.29.png)
【ウィジェットを追加】をクリックします。
![](https://tjnoblog.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-18-14.13.39.png)
【テキスト】をクリックします。
![](https://tjnoblog.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-18-14.14.06.png)
タイトルに「Twitter」
※後からでも変更できます。
【テキスト】をクリックし、そこに先ほどコピーしたTwitterのコードを貼り付けます。
最後に「適用」をクリックしてください。
![](https://tjnoblog.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-18-14.15.46-569x1024.png)
先ほどTwitterの窓枠の高さを600に設定しましたが、ここで自由に変更できます。
![](https://tjnoblog.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-18-14.18.35.png)
まとめ【写真付きで解説】Cocoon(コクーン)でトップページのサイドバーにTwitterを表示させる方法
![](https://tjnoblog.com/wp-content/uploads/2021/01/cupcakes-53e2d0464b_640.jpg)
お疲れ様でした。
いかがでしたか?
あとは、Twitterの高さ、表示場所の微調整をするだけです。
WordPressは簡単にブログのカスタマイズをすることができますので、ぜひブログを充実させてみてください。
【関連記事】
【写真付きで解説】Cocoon(コクーン)で「記事を読む目安時間」を表示する方法【30秒で設定できます】