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

Before 小さすぎるフォント

XOOPS勉強会

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

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

XOOPS勉強会 2

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

やったこと

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

Stylishとは

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

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

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

 

やり方 – Safari編

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

ウインドウ と Menubar

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

Styles Editor

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

Styles Editor

「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」をさがして「オプション」をクリック

拡張機能

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

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]

株式会社RYUS代表。
2002年にXOOPSがきっかけでオープンソースCMSのカスタマイズをはじめる。(これが 今の仕事 のきっかけですな)
40代でロードバイクに目覚める→「40代からのロードバイク
現在はNetCommons3の開発に参加