TweetDeck Web版のデザインをカスタマイズ


[17/03/16 12:00] css修正

(Windows7 Ult 64bit,Windows10 Pro 64bit)

TweetDeck Web版のデザインをデフォルトからピンクピンクにしてみましたので、そのcssを配布。
色を変えたりスペースをいじってみたりするくらいは誰でも出来ると思うので自分好みにいじってみたら楽しいと思います。cssについてググれば他にもいろいろ出来ます。

TweetDeckデフォルト設定
20151107_154801.png

↓ とりあえずこんな感じになります。(※背景は管理人のツイッターアイコン画像URLを設定しています。)

20151107_154909.png


■Google Chrome (以下、Chrome) インストール
Google Chromeをインストールしていない場合はインストール。

■Chromeを全て閉じる

■Chromeのショートカットを新規に作成する
Windows7 64bitならデフォルト設定で
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"
ここにChromeの実行ファイルがあります。
これを右クリック→送る→デスクトップ(ショートカット作成)

■TweetDeck設定用のユーザディレクトリの作成
※AppDataは隠しフォルダ。
"C:\Users\ユーザ名\AppData\Local\Google\Chrome\User Data" フォルダ内の、
"Default"フォルダを同じ場所にコピーして"TweetDeck"にフォルダ名を変更。つまり、
"C:\Users\ユーザ名\AppData\Local\Google\Chrome\User Data\TweetDeck" がユーザディレクトリになる。

■Chromeショートカットに起動オプション設定①
先ほど作成したChromeのショートカットのプロパティにて、リンク先を以下のように変更する。
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir="C:\Users\ユーザ名\AppData\Local\Google\Chrome\User Data\TweetDeck"

作成したショートカットからChrome起動

■Stylebotの導入
アドレスバーに「chrome://extensions/」と入力してエンター
拡張機能のページが開くので、下の方の「他の拡張機能を見る」からChromeウェブストアを開く。
Stylebot」を検索し、Chromeに追加する。

念のためChromeを再起動

■cssインポート
TweetDeckのWeb版のページに行ってログイン。
Chromeの右上の方にStylebotのアイコンがあるのでクリック
「Open Stylebot...」
開いたStylebotの左下の方の「Edit CSS」ボタンクリック
そこに、このcssテキストをそのまま貼り付けて「Save」

Chromeを閉じる

■Chromeショートカットに起動オプション設定②
先ほど作成したChromeのショートカットのプロパティにて、リンク先を以下のように変更する。
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir="C:\Users\ユーザ名\AppData\Local\Google\Chrome\User Data\TweetDeck" --app=https://tweetdeck.twitter.com/

■ショートカットの名前とアイコンを任意に変更

■ショートカットから起動

完成。



■背景の設定
Edit CSSでテキストを読み込ませる時に
div.js-app-columns-container.app-columns-container.scroll-h.needs-scroll-bottom-offset.scroll-styled-h {
background-image : url("https://pbs.twimg.com/profile_images/585648215590105088/8y7joabf_400x400.png");
background-repeat : repeat;
}
このようにURLが書かれている箇所を探して、適宜変更することで背景画像の調整が可能です。

また、デフォルトでは
section.js-column {
background-color: rgba(255, 255, 255, 0.8);
}
この部分でツイート内容の背景を白い半透明色に設定しているので、背景画像にスモークがかけられたみたいになっています。
試しに最後の数字を以下に変更してみると意味がわかるかと思います。
background-color: rgba(255, 255, 255, 0.0);

テーマ : フリーソフト
ジャンル : コンピュータ

コメントの投稿

非公開コメント

プロフィール

みりんさんShip3

Author:みりんさんShip3
*** 名前とか ***
■PSO2/Ship3/ソーン
ゆかみりん/FoTeBoHuSu
みりんさん/GuHu
みりんさん/GuHu
みりんさん/GuHu
ID:増えるしじみ

*** コンタクト ***
■Twitter
@fueru_shijimi

※専用アカウントではないので普段は関係ないことばっかりしゃべってます。

■メール
mirin3ship3[at]gmail.com
※[at]を半角"@"に変えて下さい

お気軽にコンタクトどうぞ♪

ツールとか紹介

PSO2支援ツール
PSO2(PC版)で役立ちそうなツールをまとめたものです。


TweetDeck Web版のデザインをカスタマイズ
TwitterクライアントであるTweetDeckのPC・Web版をカスタマイズする方法を紹介。
ついでに私のTweetDeckデザインに使用しているcssをサンプル配布しています。


著作権表記ロゴ
SEGAさんに著作権のあるSSなどには必ず(C)SEGAを入れなければなりません。
私のブログやTwitterのヘッダー画像などに使用しているロゴは私が作りましたが、縁取りや色の調整程度ならば好きに加工して構いませんので、常識の範囲内でどうぞご自由にご利用下さい。 c_pso2.png


お役に立てたら嬉しいです♪
リンク

■リンクフリー

当ブログへのリンクは、悪意が無ければフリーとします。ただし、ツールのダウンロードページへの直接リンクは更新に対応出来ないため禁止とします。トップページもしくは各記事ページへのリンクとしてください。


■報告不要

リンク報告は特に無くて良いですが、どのような形でも良いので報告して頂けると喜びます。覘きに行きます。


■PSO2支援ツールページへのバナーリンク

こんなんで良ければお使い下さい。


(160x60)

みりんは犠牲になったのだ - PSO2支援ツール


(240x120)
※↓は180x90にリサイズ

みりんは犠牲になったのだ - PSO2支援ツール




PSO2_200x200_応援バナー02

ランキング
投票して頂けると喜びます♪

■PSO2サポーターズリンク
PSO2サポーターズリンク
1日1票!
来場者数
最新記事
最新コメント
カテゴリ