TweetDeckを痛くする

こんな感じの痛TweetDeckを作っていきたいと思います

CSSで背景と透明度を設定して、BetterTweetDeck+CSSかTampermonkey+UserScriptでTweetDeckに反映させていきます

CSS部分

.app-columns-container {
    background-image: url( [画像リンク] );
    background-size: cover;
}

.app-columns {
    opacity: .7;
}

background-imageで背景画像を設定します

背景画像の表示について細かい設定をしたい場合はbackground-sizeや、追加でbackground-repeatなどがあります
-- 参考：background-imageの取り扱い一覧

opacityで透明度を設定します

BetterTweetDeckを使う方法

BetterTweetDeckはTweetDeckをより使いやすくするアドオンです
今回の様なカスタマイズ以外にも便利な機能が豊富なのでおすすめです

手順

1. BetterTweetDeckをインストール（better.tw）
2. BetterTweetDeckの設定からカスタムCSSを開く
3. 上記のCSSをコピペ
4. 保存してリロードすれば完了

Tampermonkey(Greasemonkey)を使う方法

Greasemonkeyは指定したページでUserScriptを実行するアドオンです（TampermonkeyはそのChrome版）
UserScriptはほぼJavaScriptだと考えていて大丈夫です

UserScriptを使って更にカスタマイズしたい場合におすすめです

手順

1. Tampermonkey(Greasemonkey)をインストール
2. 新規スクリプトを追加
3. 下記のコードをコピペ
4. ctrl-sで保存してリロードすれば完了

// ==UserScript==
// @name         痛TweetDeck
// @namespace    meihei
// @version      1.0
// @description  TweetDeckを痛くする
// @match        https://tweetdeck.twitter.com/
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const STYLE_CSS = '' +
    '.app-columns-container {background-image: url( [画像URL] ); background-size: cover;}' +
    '.app-columns {opacity: .7;}';

    const f = () => {
        const style = document.createElement('style');
        document.head.appendChild(style);
        style.textContent = STYLE_CSS;
    };

    setTimeout(f, 1100);
})();

他にもカスタマイズしているUserScriptを荒削りしたコードなので、ちょっと変な書き方していますがご了承ください

おわりに

CSSだけを変更したい場合はBetterTweetDeckがおすすめですが、JavaScriptを使ってもっと高度なことをしたい場合はTampermonkeyがおすすめです

良きツイッターライフを！