page contents

林檎を買うまでには

30代男性が仕事に子育てをしながらブログでの収益化を図る姿を見て貰うブログ。

【はてなブログ】ツイッターのタイムラインを埋め込む

f:id:nijipapa0717:20181213002715j:plain

 

こんにちは、みきです。

 

ツイッター初めて二日目です。いろんな方とつながって行きたいと考えていますのでよろしくです。

 

今回は私のブログを見てくれた方にも日々の呟きなどを見ていただければと思いタイムラインの埋め込みを実施していこうと思います。

 

 

ウィジェットの作成

まずはウィジェットの作成から行っていきます。

  • Twitterを開いて貰います。

f:id:nijipapa0717:20181212230623j:plain

  • ホーム画面で赤い丸の部分をクリックしていただき「設定とプライバシー」をクリックしてください。

f:id:nijipapa0717:20181212230804j:plain

  • 左側の下の方に「ウィジェット」と言う部分がありますのでクリックしてください。

f:id:nijipapa0717:20181212231317j:plain

f:id:nijipapa0717:20181212231420j:plain

  • 空白の部分に自分のTwitterのホーム画面のURLをコピー貼り付けしてください。私の場合はhttps://twitter.com/nigisseyを貼り付けると言うことになります。

f:id:nijipapa0717:20181212231743j:plain

  • 貼り付けてクリックしますとこのような画面になりますので、左を選んでください。

f:id:nijipapa0717:20181212232019j:plain

  • 赤丸の部分をクリックしてコピーしてください。

 

自分のブログに貼り付けてみましょう

  1. コピーしましたら、貼り付けたいブログのダッシュボードを開いて「デザイン」⇒「カスタマイズ」⇒「サイドバー」と進んでください。
  2. 一番下の「モジュールを追加」を選んでください。f:id:nijipapa0717:20181212233155j:plain「HTML」と言う部分をクリックして、コピーしたコードを青枠の部分に貼り付けてください。緑枠の部分はタイトルになりますので「フォローお願いします」「Twitter」などを入れるといいと思います。

 

カスタマイズしませんか?

 先程、貼り付けをしましたコードを少しだけ変えるだけでデザインや長さ、幅など色々と変える事が出来ます。

 

項目名 動作
Height 高さ(px)
Width 幅(px)
Light 背景色(白or黒)
link color リンクの色
Automatic 言語

 

上のコードを使いながら

 

f:id:nijipapa0717:20181212234503j:plain

赤い下線が引いてある場所に変更したい部分(長さや幅など)の英語と大きさ(数字)を入れていってください。

 

終わりに

今回も参考にさせて頂いたのは、このサイト様です。

pea-nut.hatenablog.com

 

すごく丁寧に書かれていますので、是非皆様も見てみてください。

 

 今回はサイドバーにTwitterのタイムラインを入れましたが、コピーしたコードをHTML編集で記事内に貼り付ける事も可能との事なのでもし気になる方は一度自分の記事にTwitterのタイムラインを貼り付けてみるのも面白いかもしれません。