webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

WEB制作会社のフォトグラファー

twitter のタイムラインを埋め込む

  • アカウントを作ってログイン。すると、黄色い丸で囲ったアイコンが出る。ログインしないと出ない。つまりアカウントが必要。

f:id:ohta-felica:20160628232117p:plain

f:id:ohta-felica:20160628232208p:plain

  •  表示方法が2種類ある。今回は「タイムラインを表示させる(左側)」を選ぶ。

f:id:ohta-felica:20160628232539p:plain

f:id:ohta-felica:20160628232652p:plain

  • コードをコピーして、htmlに貼り付ける。

<body>
<div id="container">
<div class="twitter">
<a class="twitter-timeline" href="https://twitter.com/kantei">Tweets by kantei</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div><!--twitter-->
</div><!--container-->

  • ローカルからだと、リンクしか見えない。
  • サーバーにアップして確認すると見えるはず。

f:id:ohta-felica:20160628233314p:plain

  •  見えましたが、bodyに対して100%表示になっています。
  • cssで調整してみます。うまくいきました。

f:id:ohta-felica:20160628233722p:plain 

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>twitterの埋め込み</title>
<style>
#container{
width: 560px;
margin: 0 auto;
}
</style>
</head>

<body>
<div id="container">
<div class="twitter">
<a class="twitter-timeline" href="https://twitter.com/kantei">Tweets by kantei</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div><!--twitter-->
</div><!--container-->
</body>
</html>