YUITOBLOG

YUITOBLOG

心揺れる人・本・映画・景色の出逢いを綴ります!

Enjoy Life

もっと人生を楽しく!そして、豊かにするために。

はてブのサイドバーにTwitterウィジェットを埋め込もう!

Twitterをカッコよく見せよう

はてブをカスタマイズしていき、ブログを育てていきたい「はてブ初心者」のために、Twitterウィジェットやツイートをブログ上でかっこ良く見せる方法をお伝えします。因みに、Twitterウィジェットとツイートを記事に表示することができるとこんな感じになります。

f:id:y-camellia29:20180801002222p:plain

 

 はてブのサイドバーでのTwitterウィジェットはこんな感じ。

f:id:y-camellia29:20180731231946j:plain

 

 

 

ということで、やり方をお伝えします!めちゃくちゃ簡単なので是非!

 

はてブサイドバーに自身のTwitterウィジェットを埋め込もう!

まず、PCで設定することをお勧めします。PCで設定する方がサクサクいきます。

 

1.  自分のTwitterExploreriPadだったらSafari)で起動する

https://mobile.twitter.com/home

↑ココから起動してみて下さい。

 

2.   Twitter Publishを起動する

1とは別のウィンドウで、Twitter Publishを起動します。

https://publish.twitter.com/#

↑ココから起動してみて下さい。

 

こんな画面が出てくると思います。

f:id:y-camellia29:20180731233051j:plain

 

そこに、自身のTwitterのURLを貼り付けて下さい。

 

3.  自身のTwitterのURLの注意点

1で起動した自身のTwitterのURLをそのまま貼り付けるとこうなります。

f:id:y-camellia29:20180731234653j:plain

これ、注意してください!!

URLをそのまま貼り付けると「mobile」と書いてあります。これが書いてあるとダメなので、消して下さい!

 

難しければ、https://twitter.com/〇〇〇」の〇〇〇に自分のTwitterのアカウント名を入れてください! 僕のアカウントは「Yuito1208」なので、こうなります。

f:id:y-camellia29:20180731235042j:plain

 

4.  以下、説明通りです!

先程のようにURLを打ち込んで、次の画面に進みます。

そしたら、こんな画面が出てくるので、左の「Embedded Timeline」を選択します。

f:id:y-camellia29:20180731235342j:plain

 

その後、ココをクリックします!

 

f:id:y-camellia29:20180731235531j:plain

 

そして、ここに自分でサイドバーに埋め込みたいサイズ、色を設定します!

僕は、こんな感じで設定しましたので参考までに。

f:id:y-camellia29:20180731235651j:plain

 

そして、「Update」を押すとこんな画面になるので、「Copy Code」をクリックして、コピーします。

f:id:y-camellia29:20180731235833j:plain

 

5.  はてブダッシュボードに移動する!

f:id:y-camellia29:20180801001229j:plain

 

まずは、はてブダッシュボードから、「デザイン」をクリック!

 

f:id:y-camellia29:20180801001328j:plain

 

お次に、サイドバーをクリックします!

そしたら、こんな画面が出てくるので、「モジュールを追加」をクリック!

f:id:y-camellia29:20180801001422j:plain

 

すると、こんな画面が出てきます!

f:id:y-camellia29:20180801001521j:plain

 

緑の箇所は、Twitterのタイムラインを埋め込む際のタイトルなので、好きなタイトルにして下さい!

赤い四角の箇所に、先程、Twitter PublishでコピーしたURLを貼り付けて下さい!

そして、黄色の箇所が必ず「HTML」になっていることを確認してください。

 

そしたら、最後に、「適用」をクリックで全て完了です!

 

是非、参考にして下さ〜い!

 

 

おわり

 

 

 

昨日の記事はこちらから。

www.yuitotsubakino.jp