Hatena::Groupsub

fs*sub

  • Firefoxで使えるユーザースタイルシートを公開しています。»CSSの一覧を見る
  • Firefoxでユーザースタイルシートを利用するなら Stylish が便利です。CSSの設定、オン/オフの切り替え、管理が簡単にできます。

2010-11-11

check*pad の横幅を変更するユーザースタイルシートを更新しました

| 23:18 | check*pad の横幅を変更するユーザースタイルシートを更新しました - fs*sub を含むブックマーク

↑ 9月にcheck*padがリニューアルしたときからずーっとCSSを書き直したかったんですが、どうしてこんなに遅くなった。ともかく書き上げることが出来て嬉しいです。

あと、CSSの名前も変更しました(固定幅にすることも可能なのでそんな感じの名前に)。

スクリーンショット

CSS適用前 CSS適用後
  • スクリーンショットは、1024x768のディスプレイの場合。
  • ウィンドウの幅が小さすぎるときは固定幅になります。

ユーザースタイルシート

@namespace url(http://www.w3.org/1999/xhtml);

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 check*pad の横幅を変更するユーザースタイルシート
 version: 2.0.20101111

 *2010-09-12 のリニューアルに対応しました。
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@-moz-document domain("checkpad.jp") {
/*::::: フォントサイズ :::::*/
* {
	font-size: 12px !important;	/* ★ここはお好みで変えてください */
}

.s10 ,
.s10 * ,
.ttt ,
.ttt * {
	font-size: 95% !important;
}


/*::::: 好みの横幅にする :::::*/
#container {
	width: 90% !important;		/* ★ここを変えると横幅が変わります。
								90% などのリキッドレイアウトにするもよし、
								800px など固定幅にするのもよし。
								お好みでどうぞ。 */
	min-width: 720px;
}

body {
	overflow-y: scroll;
}

#leftside {
	width: 100% !important;
	margin: 0 -220px 0 0 !important;
	padding: 0 !important;
}

#leftside > * {
	margin-right: 210px !important;
}

.projectBody ,
.taskBody {
	width: 96% !important;
}


/*::::: タスク入力フォームを大きくする :::::*/
#projectTitleEditValue ,
#projectMemoEditValue ,
#taskNotyetList input[id^="taskEditValue_"] ,
#taskAddValue {
	width: 70% !important;
}


/*::::: [編集][削除][≫][↑↓] のデザイン調整 :::::*/
.projectBody ,
.taskBody {
	position: static !important;
}

#projectList li ,
#taskNotyetList li ,
#taskDoneList li {
	position: relative;
}

#projectTitleCommand ,
#projectMemoCommand ,
.projectBody .projectCommand ,
.taskBody .taskCommand {
	background-color: #C9FFCA !important;
	top: 0;
	padding-left: 9px !important;
	padding-right: 9px !important;
}

.taskMoveCmd {
	margin: 0 7px;
	color: #008800 !important;
}

.dragme {
	color: #ff0000 !important;
}

.projectSaveCmd ,
.projectUnsaveCmd ,
#projectTitleEditCmd ,
#projectTitleDelCmd ,
#projectMemoEditCmd ,
#projectMemoDelCmd ,
.dragme ,
.taskEditCmd ,
.taskNotyetDelCmd ,
.taskMoveCmd ,
.taskDoneDelCmd {
	line-height: 1.8 !important;
}


/*::::: 「次のリストへ移動」のポップアップを小さくする :::::*/
#taskMovePopUp {
	min-width: 250px;
	width: auto !important;
}


/*::::: リストにURLを書いたときに横幅が少ないフォントにする :::::*/
.taskBody span:first-child a {
	font-family: 'Tahoma' , 'Arial';
}


}

どうぞご利用ください。私の色指定は正直微妙だと思うので、センスのある人がいたら直してほしいです……

ちなみに、Firefoxでユーザースタイルシートを利用するなら Stylish が便利です。CSSの設定、オン/オフの切り替え、管理が簡単にできます。おすすめ。

多謝!!

田口さん、素敵なツールを使わせてくださって本当にありがとうございます!

このユーザーCSSがcheck*padをさらに便利に使うためのお手伝いになればいいな :)

トラックバック - http://sub.g.hatena.ne.jp/Penpen/20101111