CSS弄りは楽しいけど

web 覚書

時間消費がすごい…orz
でも、いいデザインとか、思い通りの挙動をしてくれるとすごく爽快なんですよねぇ。
Firefoxだとユーザースタイルシートを使って色々できます*1。というわけで、覚書も兼ねてユーザースタイルシートの設定例を書くことにします。対象は、以下の3サイト。

はてなダイアリー編

たとえば、テキストエリアの拡大。
以下の記述をFirefoxのuserContent.cssに書き加えると、はてなダイアリーのコメント書き込み時のテキストエリアが拡大し、ついでに、設定画面でのカテゴリ設定欄も高さが広がってカテゴリが一覧できるようになります。

/* はてなダイアリー */
@-moz-document url-prefix(http://d.hatena.ne.jp/) {
	/* コメント書き込みテキストエリア拡大 */
	.commentshort textarea {
		widht: 100% !important;
		height: 150px !important;
	}
	/* カテゴリ設定欄拡大 */
	textarea[name="categories"] {
		height: 18em !important;
	}
}

はてなアンテナ編

これはアンテナ設定のスタイルシートに書いてるので、ユーザースタイルシートとは違いますが、一応。
更新内容はできれば全部拾っておきたいけど、表示文字数が多いと、縦長になりすぎて一覧性が損なわれます。そこで考えたのがこれ。重要なのは下から

.diff {
	/*
	（中略）
	*/
	max-height: 200px;
	overflow: auto;
}

更新内容の表示部分を縦200ピクセル以下にして、はみ出す部分はスクロールで見れるようになります。overflowの値はscrollの方がいいのかな？Firefoxはこれでオッケーだからよく分かんないけど。自分が見る分には不都合無いので、気にしてません。他の人に見せることは前提じゃないんで。

mixi編

mixiの一番上に出るバナー広告を消す

特別利益はないけど、デザインがすっきりします。

/* mixi */
@-moz-document domain(mixi.jp) {
	/* 広告画像非表示 */
	a.img {
		visibility: hidden !important;
	}
}
右サイドバーを消す

最近右側にサイドバーが出てうざいと思っている方は、以下のように記述すればサイドバーを消せると思われます。ただし、これは属性値の全部一致で消してるだけなので、全く同じ属性値を使ってる部分があるとそこまで消えてしまいます。今のところ無いと思いますが、まぁ自己責任で。

@-moz-document domain(mixi.jp) {
	/* 広告画像非表示 */
	a.img {
		visibility: hidden !important;
	}
	/* サイドバー非表示 */
	table[border="0"][cellpadding="0"][cellspacing="0"][width="224"] , table[style="margin-bottom: 5px;"][bgcolor="#ff9933"][border="0"][cellpadding="1"][cellspacing="0"][width="100%"] , table[style="margin-bottom: 5px;"][bgcolor="#ff9933"][border="0"][cellpadding="0"][cellspacing="1"][width="100%"] {
		display:none;
	}
}

自分は、天気予報とかの部分だけ残すために、ちょっと削って↓こうしてます。

	/* サイドバー非表示 */
	table[border="0"][cellpadding="0"][cellspacing="0"][width="224"] , table[style="margin-bottom: 5px;"][bgcolor="#ff9933"][border="0"][cellpadding="1"][cellspacing="0"][width="100%"] {
		display:none;
	}
追記

右サイドバー非表示は、色々方法があって、一番簡単なのには以下のようなものがあります。

body { position:absolute; clip:rect(0px, 720px, auto, 0px) }

これ、要するに画面の左から720pxまでの部分を切り取り、そこしか表示しない、というもの。すごく簡単だし、mixiはサイズ固定だから汎用性はありますね。ただ、上の方の「ログアウト」とかが表示されてる部分まで切り取られちゃうので、ちょっと困るかな。

*1:詳細はまとめサイトで。