オーサリング

Twitterのタイムラインを埋め込む（横に並べる）

Twitterのタイムラインを、サイトに埋め込むには、以下のサイトを参照のこと。Twitterのサイトで、説明と便利ツールが手供されている。

【ウェブサイトに埋め込みタイムラインを追加するには】

  1. https://publish.twitter.com/に移動します。
  2. 埋め込みたいタイムラインまたはモーメントのリンクを入力します。
  3. ウェブサイトに合った高さやテーマ（明るいか暗いか）を指定して、デザインをカスタマイズします。
  4. コードをコピーし、自分のウェブサイトのHTML上で、タイムラインを表示したい場所にペーストします。
  5. これで完了です。

この埋め込みコードを複数埋め込むと、縦に並ぶ。これを横にならべたい。CSSで横に並べる。埋め込みコードをDivタグで囲う。

<div class="inline-block">
埋め込みコード
</div>

CSSは以下のように記述。

.inline-block {
    display: inline-block;
    background-color:  #ccc;
    padding:  15px;
    margin: 5px;
    height: 1000px;
}

Twitterの埋め込みコードには、横幅、縦幅を指定するコードが含まれているので、それで、インラインブロックの大きさを指定する。

ログブック内関連記事

記事の共有：
ブランドタグ：