【公開日】 2017年01月27日  【最終更新】 2017年08月30日

TweetDeckが見やすくなる方法

【この記事を読むのに必要な時間は約〈 14 分3秒 〉です。】

ずっとPCでのTwitterクライアントを何にしようか迷っており、公式やついっぷる、Janetter、tweetdeck、hootsuiteなど、とにかくいろいろと試してみたのですが、ある記事を見てTweetDeckをカスタマイズできることを知りました。

それがこの記事です。

Web版TweetDeckの使い心地をJanetterに近づけてみたTEMA-NUKI Days

とりあえず次の項でそのやり方を説明していきたいと思います。

どうやるの?

記事にある通り、まずはGoogle chrome(もしくはその拡張機能が使えるブラウザ)を使用し、拡張機能である「BetterTweetDeck」や「Stylebot」をインストールします。

自分の場合は「BetterTweetDeck」でお気に入りを♡から☆にして、アイコンを円形表示、サムネイルのリンク非表示などを変えてみました。(このくらいならほとんど初期設定のままで使えます。)

 

拡張機能である「Stylebot」をインストールすると、Chromeの右上のツールバー部分に[css]と書いてあるボタンが追加されるので変更したいページでクリックし、[Install Style from Social]という項目から[TweetDeck Modern Card Layout]をインストールして、[Open Stylebot…]をクリック、CSSでTweetの表示欄を囲んで見やすくしました。

(2017/08/29追記:Stylebotのシェア機能がすでに終了しているようです。Stylebot単体だけでもカスタマイズは可能なので、具体的な設定については後述します。)

 

どちらかというと感覚が詰まった感じの表示よりもゆったりとした表示の方が読みやすいのでこうなりましたが、意外に設定の幅が広くて重宝しますよ。

PCでのTwitter利用が今一つしっくりこないという方はぜひ試してみてはいかがでしょうか?

ちなみにお気に入りボタンの変更でしたら「Stylish」を使わずとも「BetterTweetDeck」だけで出来たので今回は利用していません<(_ _)>

具体的な設定について

ここからはstylebotの具体的な設定を説明していきます。

ちなみにコメントの枠は[Open Stylebot…]をクリックしてマウスでコメント周辺を選択し(緑のラインが表示されます)、普通にborderの設定をするか、下のボタンを[Basic]から[Advanced]に変更後、下のように入力してください。(コピペだと右クリックが利かないことがあるようなので)

 border-color: #cfcfcf; /*線の色の設定(グレー)*/
 border-radius: 7px; /*線の角を丸くする*/
 border-style: groove; /*線の種類(窪んだ線)*/
 border-width: 1px; /*線の幅*/
 font-weight: bold; /*文字の太さ(太字)*/
 letter-spacing: .5px; /*文字の間隔(0.5ピクセル)*/
 padding: 10px; /*選択範囲の内側の余白(10ピクセル)*/

あくまで個人の使いやすさを追求した結果なので気に入らないという方はご自分で色々と弄ってみるとより使いやすくなると思います。

※シェアサービス終了のための追記。

ちなみにStylebotのスタイルのシェアサービスが既に稼働していないようなので、上のようなデザインをお好みの場合はStylebotのインポート機能に以下の記述をまるまるコピペしてください。

{"tweetdeck.twitter.com":{"_enabled":true,"_rules":{"a.js-header-action":{"background":"#333 "},"article.stream-item.js-stream-item":{"border":"0 "},"article.stream-item.js-stream-item.is-actionable":{"border":"none "},"b.fullname.link-complex-target":{"color":"#333 "},"button.btn":{"box-shadow":"none "},"button.js-header-action.js-show-tip.app-search-fake.padding-al.margin-bm":{"background":"#222 ","color":"#888 "},"button.js-inline-compose-close.btn.btn-square.btn-neutral i, button.js-inline-compose-pop.js-show-tip.btn.btn-square.btn-neutral i":{"color":"#555 "},"button.js-inline-compose-close.btn.btn-square.btn-neutral, button.js-inline-compose-pop.js-show-tip.btn.btn-square.btn-neutral":{"border-radius":"2px "},"div.item-box.js-tweet-box":{"background":"white ","box-shadow":"0 0 6px rgba(0, 0, 0, 0.16) ","padding":"20px "},"div.js-app-columns.app-columns.horizontal-flow-container.without-tweet-drag-handles":{"padding":"0 "},"div.js-app-header-inner.pin-v":{"background":"#333 "},"div.js-column-scroller.js-dropdown-container.column-scroller.scroll-v":{"background":"#f0f0f0 "},"div.js-detail-container.js-dropdown-container.column-scroller.scroll-v":{"background":"#f0f0f0 "},"div.js-detail-container.js-dropdown-container.column-scroller.scroll-v.scroll-conversation":{"background":"#f0f0f0 "},"div.js-detail-view-inline-text.detail-view-inline-text.padding-al.inline-block.full-width.txt-ellipsis":{"background":"#f7f7f7 ","border-color":"#ddd ","border-radius":"2px ","color":"#777 "},"div.js-detail-view-inline.detail-view-inline.item-box-full-bleed.padding-axl.scroll-conversation":{"background":"transparent ","border-top":"none "},"div.js-dropdown":{"border":"1px solid #ccc ","box-shadow":"0 0 6px rgba(0, 0, 0, 0.16) "},"div.js-modal-panel i.icon.icon-close":{"background":"rgba(255, 255, 255, 0.88) ","border":"1px solid #ccc ","border-radius":"2px ","color":"#444 ","padding":"2px ","padding-top":"0 "},"div.js-modal-panel.mdl.s-full.med-fullpanel":{"background":"#f0f0f0 "},"div.js-quote-detail.quoted-tweet.nbfc.br--3.padding-al.margin-b--8.position-rel.margin-tm.is-actionable":{"border-color":"#cfcfcf","border-radius":"5px","border-style":"groove","font-weight":"bold"},"div.js-stream-item-content.item-box":{"background":"white ","box-shadow":"0 0 10px rgba(0, 0, 0, 0.1) ","margin":"10px ","margin-bottom":"0 ","padding":"20px "},"div.js-tweet-detail.tweet-detail-wrapper":{"background":"transparent ","border":"0 "},"div.padding-axl":{"background":"white "},"footer.tweet-footer.cf":{"margin-top":"20px "},"h1.app-title":{"background":"#444 "},"header.js-column-header.js-action-header.column-header":{"background":"#f7f7f7 "},"header.js-column-header.js-action-header.flex-shrink--0.column-header":{"border-bottom-width":"1pxpx","border-style":"solid","border-width":"0"},"i.icon.icon-close:hover":{"color":"white "},"i.icon.icon-compose:hover":{"color":"white "},"i.icon:hover":{"color":"#666 "},"img.media-img":{"background":"white ","box-shadow":"0 0 6px rgba(0, 0, 0, 0.16) ","padding":"5px "},"input.js-app-search-input.app-search-input.search-input":{"background":"#222 "},"p.js-tweet-text.tweet-text":{"color":"#444 "},"p.js-tweet-text.tweet-text.with-linebreaks":{"border-color":"#bda8bd","border-radius":"6px","border-style":"groove","border-width":"1.5px","font-weight":"bold","letter-spacing":".3px","line-height":"1.5rem","padding":"7px"},"span.reply-triangle":{"display":"none "},"textarea.js-compose-text.compose-text.scroll-v.scroll-styled-v.scroll-styled-h.scroll-alt":{"background":"#f7f7f7 ","border":"1px solid #ddd ","border-radius":"2px "},"textarea.js-reply-tweetbox.scroll-v.scroll-alt":{"border-color":"#ddd ","box-shadow":"none "},"ul.tweet-detail-actions":{"border-top":"none "}}}}

ちょっと長くて読みにくいですが、一部に特殊な記述を用いたCSSのようです。

 

これをChromeの右上ツールバーにあるStylebotのボタン([css]のやつ)から[options]を選択し、Backupタブの[Import Styles]にペーストします。

あとは[Import]を押してTweetDeckのページを更新すれば適用されるはずです。

 

もちろんTweetDeckだけではなく、他のサイトでも利用可能なので是非試してみてはいかがでしょうか。



オーサー紹介

ほんと参った

一応このブログの管理をやっております。
基本スタンスは「テキトーにやる」なので、あまり期待せずに見ていただければ幸いです。
何か御用がありましたらお問い合わせページよりご連絡ください。
ちなみにnoteはこちらからどうぞ。

スポンサーリンク