Google Chrome で HootSuite のフォントサイズを少し大きくしたい

user script のインストール

http://userstyles.org/styles/22613 の Load as user script ボタンを押してインストール。

set HootSuite fontsize medium | userstyles.org via kwout 

 

HootSuite の文字が小さくて読みにくい

愛用していた pbtweet が twitter の仕様の変更のためなのか、表示が上手くされないときがあった。pbtweet 以外の twitter クライアントを色々と検討したけれど、やはり pbtweet の会話調の吹き出しに敵うものなし。敢えて別のものを使うとしたら、HootSuite 。しかし、デフォルトでは文字が小さいので読みずらい。 (+_+)

Firefox なら Stylish を使って、

.tweetContent {
    font-size:100% !important;
}

と書けば問題ない。

Chrome でも Stylish のようなものがあるのかな？と思い探したけれどわからなかった。

 

User Script

今、Chrome は開発版を使っている。 どのバージョンからか知らないけれど、XXXXX.user.js という名前のユーザスクリプトファイルを Chrome に D&D してやると簡単にインストールできる。(削除するときは、Google Chrome の設定 > 拡張機能 を開く)

Google Chrome Converts User Scripts into Extensions によると、

Now you can visit userscripts.org and any other site that links to Greasemonkey scripts and other flavors of user scripts, click on the link to a *.user.js file and install it in one click.

ということで、userscripts を書くことに。

userstyles.org のサンプルを見て、必要であろうところのみ抽出。JavaScript で head 要素に style タグを追加するだけ。

// ==UserScript==
// @name           set hootsuite fontsize
// @description    hootsuite 
// @namespace      http://jutememo.blogspot.com
// @include        http://hootsuite.com/dashboard* 
// ==/UserScript==
(function(){
    var fontsize = "100%";
    
    var css = ".tweetContent{font-size:" + fontsize + " !important;}";
    var style = document.createElement('style');
    style.type = "text/css";
    style.appendChild(document.createTextNode(css));
    document.getElementsByTagName("head")[0].appendChild(style);
})();

 

userstyles.org を利用

当初これをエディタに書いて、Chrome に D&D していた。しかし、userstyles.org でアカウントを取得してみたら、CSS を入力するだけで、後は全部自動で上記のようなコードを生成してくれた。userstyles.org のコードはよく使わせてもらっていたけれど、こんなにお手軽に user script を作れるとは今まで知らなかった。 (@_@;)

これなら表示をカスタマイズしたいサイトがあったら、

1. userstyles.org で CSS を入力
2. user script を生成
3. Chrome へインストール

で簡単にできる。 ^^

New style | userstyles.org via kwout