Twitterのタイムラインに背景を敷きたいときにすること

成人の日。
私の家は県下最大(？だと思う)の神社、武田神社のそばにあります。
この時期は例年、晴れ着のお嬢さん方の姿を見かけるのですが、この3連休はほとんど晴れ着の人を見なかったなぁ。こんな1月は初めてかもしれません。

ところで。

おかげさまで請負のお仕事をたくさんいただいております。
中でもHTML+CSSのコーディングをさせていただくことが多いのですが、そんなとき『あれ？どうやってやるんだろう？』なんてことも多々あります。

Twitterのタイムラインに背景を敷きたい

今回はTwitterのタイムラインをWebページで共有した際、そのエリアに背景を敷く方法です。
多分、次回同じ案件が発せしたときに忘れてしまいそうなので備忘録をかねてアウトプットしておきます。

TwitterのタイムラインをWebページで共有する方法は以下をご覧ください。

WebサイトにTwitterのタイムラインを埋め込む方法
Magnetic-Laboブログ

まずはTwitterのタイムラインを埋め込みます

まず、普通にタイムラインを共有します。

じゃあ、こちらの記事にしたがって今回も『前澤友作┃お金配り＆事業作りおじさん』のアカウントを拝借しましょう。

HTML

<a class="twitter-timeline" data-width="300" data-height="500" href="https://twitter.com/yousuck2020?ref_src=twsrc%5Etfw">Tweets by yousuck2020</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

HTMLはこんな感じです。

背景を用意します

続いて画像を背景に敷きます。
画像はこんな感じのやつを選びました。

続いて背景を敷きましょう

HTML

<div class="background">
    <a class="twitter-timeline" href="https://twitter.com/yousuck2020?ref_src=twsrc%5Etfw" data-width="100%" data-height="500" data-chrome="transparent">Tweets by yousuck2020</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

前述のHTMLを<div class=”background”>で囲みます。ここに背景を敷きます。
data-chrome=”transparent”を追加しています。これを追加することで共有部分の背景が透過になります。今回の味噌はココです。

CSS

div.background{
    background: url(https://www.magnetic-labo.com/magneticlabo/wp-content/uploads/background_tw.jpg);
    text-align: center;
}

こんな感じで背景を敷いていきます。text-align: center;をすることでタイムラインをセンター寄せにしています。

でもなんか背景目立ちすぎ？

背景がちょっとうるさくて投稿の部分が読みにくいですね。
タイムラインの部分だけ、背景を薄くしてみます。

HTML

<div class="background">
　　<div class="background-innr">
        <a class="twitter-timeline" href="https://twitter.com/yousuck2020?ref_src=twsrc%5Etfw" data-width="100%" data-height="500" data-chrome="transparent">Tweets by yousuck2020</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>
</div>

背景の透過はスタイルシートではできないので、もう一枚、divを置いてそのdiv要素にスタイルを追加します。
<div class=”background”>の内側に<div class=”background-innr”>で囲みます。

CSS

div.background{
    background: url(https://www.magnetic-labo.com/magneticlabo/wp-content/uploads/background_tw.jpg);
}
div.background-innr {
    width: 300px;
    height: 500px;
    background-color: rgba(255,255,255,0.6);
    margin: 0 auto;
}

background-color: rgba(255,255,255,0.6);
これで内側のdiv要素に薄い半透明のフィルターを置いたような状態になり、その外側に敷いた背景が薄くなります。

割と簡単ですね。

※もちろん『背景レイヤーに半透明のフィルタを重ねる』というテクニックはTwitterのタイムラインに限らず使えます。

では。