stylish - 帰ってきた龍司流

目が疲れてるのか、それとも年を重ねたせいか、理由はどうでもいいけどfacebookのコメントがフォントサイズ小さすぎで読みづらいと感じるようになってきたので大きくしてみました。

Before 小さすぎるフォント

調べたら投稿本文が font-size:13px でコメントは font-size:11px

After フォントサイズを大きくしたコメント

フォントサイズ以外にも見づらいなぁと思ったところをいろいろいじってます。

やったこと

cssをいろいろいじったんですが、使ったのは「Stylish」といSafariの拡張。これChromeの拡張もあります。

Stylishとは

Stylishはブラウザのユーザスタイルシートを管理してくれる拡張でサイト毎に独自の拡張を定義することができます。

これを使ってfacebookの見た目をカスタマイズしました。

ではやり方です。（Chromeの方はこちら）

やり方 – Safari編

Stylishをインストールしたら、「ウインドウ」→「Styles manager」でStylishを開きます。

左のメニューから「Edit」をクリック

編集画面がひらくので、facebook用設定を追加していきます。

「Title」は自分でわかるように好きなように入力してOKです。

「CSS」は私は下記のようにしてます。これだと右カラムの広告まで消えますので、消したく無い人はその部分のCSSを削除してくださいね。

/*右カラムの広告消去*/
div.UFIMentionsInputWrap img.UFIActorImage{
display:none;
}
div.ego_column{
display:none;
}
/*コメント本文*/
div.UFICommentContent{
font-size:13px;
line-height:170%;
padding:15px;
}
/*コメントした人の名前*/
.UFICommentActorName{
font-size:11px;
}
/*ユーザ投稿*/
div.userContent{
line-height:170%;
padding:20px;
}

「Applies to:」はどういう条件のときにこのCSSを適用するかです。

私は「URL prefix」にして「https://www.facebook.com」を指定しています。

ここまで入力したら右下の「SaveStyle」でCSSが保存されます。これだけでOKです。

やり方 – Chrome編

Stylishをインストールしたら、「ウインドウ」→「拡張機能」で拡張機能を開きます。「Stylish」をさがして「オプション」をクリック

「新しいスタイルを作成」をクリック

編集画面がひらくので、facebook用設定を追加していきます。

「名前」は自分でわかるように好きなように入力してOKです。

「コード」はCSSですね。私は下記のようにしてます。これだと右カラムの広告まで消えますので、消したく無い人はその部分のCSSを削除してくださいね。

/*右カラムの広告消去*/
div.UFIMentionsInputWrap img.UFIActorImage{
display:none;
}
div.ego_column{
display:none;
}
/*コメント本文*/
div.UFICommentContent{
font-size:13px;
line-height:170%;
padding:15px;
}
/*コメントした人の名前*/
.UFICommentActorName{
font-size:11px;
}
/*ユーザ投稿*/
div.userContent{
line-height:170%;
padding:20px;
}

「適用先」はどういう条件のときにこのCSSを適用するかです。

「次で始まるURL」にして「https://www.facebook.com」を指定します。

ここまで入力したら左下の「保存」でCSSが保存されます。これだけでOKです。

[Ads]