【-  公開日  -】 2017年01月27日
【- 最終更新日 -】 2018年06月26日

TweetDeckが見やすくなる方法

この記事を読むのに必要な時間は【約 13 分】です。

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

それがこの記事です。

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

どうやるの?

記事にある通り、まずは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]に変更後、下のように入力してください。(コピペだと右クリックが利かないことがあるようなので)

※コメント枠のクラス名は『p.js-tweet-text.tweet-text.with-linebreaks』となっています。

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

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

TweetDeckのカラム幅を変えたい場合

TweetDeckのカラム幅は左下の歯車マークの『settings』からGeneralの項目の中の『COLUMNS』を3つのタイプ(Narrow・Medium・Wide)の中から選択できます。

もしこの広さで満足できない場合、StyleBotの上部『select an element』と表示されている部分をクリックし、『.column』というクラス名を入力してください。

後はAdvancedの画面でwidth(例:width:500px;など)を変化させてあげると広さの調整ができます。(Medium設定で当方の環境の場合、カラムは310px程度の広さでした。)

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

ちなみにStylebotのスタイルのシェアサービスが既に稼働していない(404ページが表示される)ようなので、上のようなデザインをお好みの場合は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だけではなく、この拡張機能は他のサイトでも利用可能なので是非試してみてはいかがでしょうか。

honto_maitta

このブログの管理人です。 文章での表現力を高めようと思っていたら、いつの間にかグラフや画像を使ったブログになってしまいました…。 何かご用がありましたらお問い合わせページよりご連絡ください。 現在のところ、メインブログの方の更新頻度は月に1~2回を予定しています。

コメントを残す

トップに戻る