ホームページ作成

【HTML/CSS】Twitterのタイムラインをホームページに載せて横並びにさせる方法

どっこい正一郎、もたろうです。

 

ホームページ作成も順調に進んでおります。

現在はこんな感じです。

 

 

 

わりとよくない????

 

ちなみに今まで1回もホームページを作ったことが無いんよ?

この記事は一応ワードプレスで書いてて、設定方法とかも言われるがままやっただけだし。

 

 

ぶっちゃけプログラミングとかHTML/CSSとか全く知らないのに。

 

我ながら頑張ってると思うわーほんとに。
(あれ?自画自賛?)

 

と、今回は

【ホームページにTwitterタイムラインを載せたい】

 

のと

 

【文章を横に載せたい】

 

っていうのが解決したので、備忘録も兼ねて。

Twitterのタイムラインを載せる方法

これはめっちゃ簡単でした。

 

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

 

このサイトに書いてありました。

 

タイムラインをサイトに埋め込むのって超簡単!【twitterの活用】

 

怪しかったので、こちらのサイトも参考にさせて頂きました。

 

これを見ればおそらくパソコンをちょこっと触った事のある方でも大丈夫だと思います。

 

 

 

 

ですが!!

 

実際に貼り付けたらこうなりました。

 

ちゃうんや・・・・ちゃうんや・・・

 

 

横に並ばせたいんや!!!

 

ということで次にやったことがこれ

floatで左寄せにした

コーディングとかされている方なら

「はん、そんなん初歩の初歩の初歩の初歩やで!」

って思うかもしれませんが、私にとっては悩みどころでした。

 

だって、Excelみたく自由に書けるわけじゃないんだもの(´・ω・`)

 

ということで調べてみるとfloatを左寄せにすることで問題解決しました。

 

メインの幅を

width:1000px

で取っており、

 

Twitterのcssを

width:260px

float:left

 

テキスト入れるやつの幅を

width:660px

float:left

 

とするとこんな感じになりました。

 

実際はTwitterのタイムラインの左が少しはみ出している感じになっているので、そこは余白を入れるよう修正しようと思います。

 

 

たったこれだけのことなのに、少し悩みましたよ。

 

 

 

20分くらい。

 

あとはテキストの下余白が物足りないので

  • テキスト自体の文章を長くするか
  • 他に何か挿入するか

のどちらかで作成していこうかなと思います。

 

あとは細々したところ

  • 「ごあいさつ」を中央揃えにする
  • Twitterタイムラインの上部に「Twitterはじめました」など紹介文を入れる

とか今のところそれくらいですかね、思ってる案としては。

 

 

とりあえずトップページは完成しそうです。

 

他のページはまだ何も出来てないので・・・・。

これからです!