fg用ユーザースタイルシート（仮）

はじめに

ユーザースタイルシート

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("fg-site.net") {

/*2012-07-21 */
/*リンクの色をWeb標準に*/
a:link {
	color:#258FB8 !important;
}
a:visited {
	color:#969 !important;
}
/*カテゴリの文字を赤から青に*/
div#main_contents div.post ul.post_work li p.w_class_main {
	color:#00f !important;
}
/*角丸を止める*/
* {
	-moz-border-radius: 0 !important;
	border-radius: 0 !important;
}
div#fukidashi_inner {/*fg子吹き出しは角丸に*/
	-moz-border-radius: 10px !important;
	border-radius: 10px !important;
}
/*ログイン前配置修正*/
div#logout_contents div#sidebar {
	margin-top: 0 !important;
	margin-right: 6px !important;
}
div#logout_contents div.box {
	margin: 10px auto 0 auto !important;
}
div#logout_contents div#contents_right h3,
div#logout_contents div#contents_right div.main_box {
	width: 170px !important;/*ログイン（div.box）と揃えた*/
}
/*ログイン後サイドバーの左右を逆に*/
div#login_contents div#main_contents {
	float: left !important;
}
div#login_contents div#contents_left {
	float: right !important;
}
div#sidebar {
	float: right !important;
}
div#login_contents div#contents_right {
	margin-right: 10px !important;
}
div#sidebar div.banner_foot img,
div#contents_right div.banner img {
	margin: 0 auto !important;
}
div#main_contents div.box_wide {
	margin-right: 10px !important;
}
/*広告周りのリンクの範囲を明確に*/
/*div#sidebar div.banner_foot,
div#contents_right div.banner {
	outline: #ccc 1px solid !important;
}*/
/*見出しの橙色を変更*/
div#contents_left h3,
div#main_contents h3,
div#sidebar h3,
div#main_contents_center_only h3
 {
	background-color: #fff !important;
}
div#sidebar h3 {
	margin-top:0 !important;
}
/*選択見出しの橙色を変更*/
ul#tab_work li.select,
ul#tab_rank li.select {
	background-color: #fff !important;
}
ul#tab_work li,
ul#tab_rank li {
	background-color: #aaa !important;
}
/*設定変更の色や文字そろえを変更*/
form.standard-form table {
	margin-top: 23px !important;
}
form.standard-form table th {
	text-align: center !important;
	background-color: #eee !important;
}
form.standard-form table tr th:first-child {
	padding-left: 1em !important;
	text-align: left !important;
}
form.standard-form table td {
	padding-left: 1em !important;
}
/*ヘルプの色や配置を変更*/
div#main_contents_center_only1000 h3:first-child {
	width: 859px !important;
	margin: 10px auto 0 auto !important;
	background-color: #fff !important;
	padding-bottom: 1em !important;*/
}
div#main_contents_center_only1000 div.box_wide,
div#main_contents_center_only1000 div.box_wide div.textcenter {
	background-color: #e2e3e7 !important;
	padding: 0 10px 0 10px !important;
}
div#main_contents_center_only1000 div.box_wide div.textcenter div.customer_list {
	background-color: #fff !important;
}
div#main_contents_center_only1000 div.box_wide div.textcenter div.customer_list div {
	background-color: #eee !important;
}
/*ランキング・詳細選択項目の色を変更*/
div#contents_left div.main_box p.extracts,
div#contents_left div.main_box p.extracts_on {
	background-color: #ddd !important;
	border-left : #fff 3px solid !important;
	border-right: #fff 3px solid !important;
}
div#contents_left div.main_box ul.extracts {
	margin: 0 auto 0 auto !important;
	padding: 10px 10px 10px 20px !important;
	background-color: #ddd !important;
}
/*ランキング項目の幅をcgバナーに合わせ中央へ*/
div#login_contents div#contents_right h3,
div#login_contents ul#tab_ranking,
div#login_contents div#contents_right div.main_box {
	margin-left: auto !important;
	margin-right: auto !important;
}
/*作品タイトルを左へ*/
div#main_contents div.post div.post_header div.contents h2 {
	padding: 0 !important;
	font-size: 18px !important;
}
/*作品コメントを若干右へ*/
div#main_contents div.post div.post_header div.contents div.contents_element {
	padding-left: 1em !important;
}
/*ユーザーBOXの色を変更*/
div#sidebar div.youser_box,
div.about_premium {
	background-color: #ccc !important;
}
div#sidebar ul.youser_list li ul.sub  {
	background-color: #fff !important;
}
div#sidebar ul.youser_list {
	background: none !important;
	background-color: #fff !important;
}
div#sidebar div.point {
	border-top: #aaa 1px solid !important;
	border-bottom: #aaa 1px solid !important;
}
/*ユーザーBOX各項目の高さをそろえる*/
div#sidebar div.youser_box {
	padding-top: 0 !important;
	margin: 10px auto 0 !important;
}
div#sidebar ul.youser_list {
	width: 200px !important;
	height: 44px !important;
	margin: 0 !important;
}
div#sidebar div.point {
	margin: 0 auto !important;
}
div#sidebar div.about_premium {
	margin-top: 0 !important;
	padding-top: 15px !important;
	height: 24px !important;
}
/*ユーザーBOXプルダウンメニュー調整*/
div#sidebar ul.youser_list li{
	padding: 2px 0 0 !important;
}
div#sidebar ul.youser_list li a#add_follow {
	color: #258FB8 !important;
}
ul.sub {
	z-index: 1;
	background-color: #fff;
}
ul.sub li {
	width: 100% !important;
	border-bottom: #ddd 1px solid !important;
	text-align:left !important;
}
ul.sub li:last-child {
	border-bottom-style: none !important; 
}
/*作者ページ内容の高さをそろえる*/
div#main_contents h3.sub {
	margin-top: 0 !important;
}
/*全体を少し右へ 20120703*/
div#main_contents div.main_box_wide {
	margin-left: 10px !important;
}
/*レーダーチャートを隠す*/
div.post_graph img {
	display: none;
}
/*cgプロフィールページへのリンク画像を隠す*/
div#sidebar div.profile_box div.link_logo {
	display: none;
}
div#sidebar div.profile_box div.link_logo a img {
	border-color: #c8c8c8 !important;
}
/*若干アクセントを付けた*/
div#sidebar div.profile_box,
div#contents_right div.box,
div#sidebar div.youser_box,
div#contents_left h3,
div#main_contents h3,
div#sidebar h3,
div#main_contents_center_only h3,
div#main_contents div.main_box_wide,
div#main_contents_center_only1000 h3:first-child {
	border-top: #aaa 2px solid !important;
}
div#sidebar h3 {
	border-bottom: #aaa 1px solid !important;
}
/*ul#tab_favorite li.select,
ul#tab_mywork li.select,
ul#tab_work li.select,
ul#tab_ranking li.select*/
li.select {/*一括指定で不具合が出たら上記のに変更*/
	border-top: #aaa 1px solid !important;
}
/*R18のアクセントを変える*/
body.single-r18 div#main_contents div.main_box_wide,
div#main_contents_left h3.r_18,/*R-18新着作品*/
div#main_contents h3.r_18,/*ランキング（R18）*/
body.single-r18_old div#main_contents div.main_box_wide/*20120703*/
 {
	border-top: #c36 4px solid !important;
}
body.single-r18 div#main_contents div.main_box_wide:before,
body.single-r18_old div#main_contents div.main_box_wide:before
 {
	margin-left: 300px;
	content: "R-18";
	color: #f2d8df;
	font-size: 300%;
}
body.single-r18 div.post_header,
body.single-r18_old div.post_header {
	margin-top: -1.8em !important;
}
/*右の隙間を埋める*/
/*----言語変更ボタンを非表示*/
div#header div#header_inner ul#translation {
	visibility: hidden !important;
}
/*----検索バーなどを縮める*/
div#header div#header_inner div#form input.sForm {
	width: 200px !important;
}
div#header div#header_inner div#form input#searchSubmit {
	margin-right: 20px !important;
}
/*----幅短縮*/
div#header_inner {/*1042*/
	width: 960px !important;
	margin: 0 !important;
}
/*ランキング*/
/*ランキングページ*/
ul.rank li.rank_01{
	margin-top: 3em !important;  
	border-bottom: #ddd 4px solid !important;
}
ul.rank li.rank_01 div.thum {/*
	overflow: hidden !important;
	max-height: 150px !important;*/
}
ul.rank li.rank_01:last-child {
	border-bottom-style: none !important; 
}
ul.rank li.rank_01 div.thum,div.rank_info p.info_text {
	margin-bottom: 2em !important;
}
div.rank_info{
	text-align: right !important;
}
div.rank_info span:first-child {
	font-size: 24px !important;
	font-weight: bold !important;
}
div.rank_info p.title {
	margin: 0.75em 0 0.5em 0 !important;
	border-bottom: #aaa 1px dotted !important;
}
div.rank_info p.title a {
	font-size: 16px !important;
}
div.rank_info p.cat {
	text-align: left !important;
	color: #00f !important;
	margin-left: 0.5em !important;
}
div.rank_info span.main,div.rank_info span.sub {
	font-size: 12px !important;
	font-weight: normal !important;
}
div.rank_info p.youser {
	margin-top: 0.75em !important;
}
div.rank_info p.youser a:before {
	content: "　 投稿者　 ：　" !important;
	color: #000 !important;
}
div#contents_left div.main_box ul.rank li div.rank_info p.info_text {
	margin-top: 1em !important;
	margin-left: 1em !important;
	font-size:   12px !important;
	line-height: 16px !important;
}
/*サイド　ランキング１～５*/
div.main_box ul.ranking li.rank_01,
div.main_box ul.ranking li.rank_02,
div.main_box ul.ranking li.rank_03 {
	padding-bottom: 14px !important;
}
div.main_box ul.ranking li.rank_01,
div.main_box ul.ranking li.rank_02,
div.main_box ul.ranking li.rank_03,
div.main_box ul.ranking li.rank_04,
div.main_box ul.ranking li.rank_05 {
	background-position: 180px 0 !important;
	border-bottom: #aaa 1px solid !important;
	padding-bottom: 4px !important;
}
div.main_box ul.ranking li.rank_01 div.title,
div.main_box ul.ranking li.rank_02 div.title,
div.main_box ul.ranking li.rank_03 div.title {
	margin-top: -60px !important;
	margin-left: 104px !important;
}
div.main_box ul.ranking li.rank_01 div.img,
div.main_box ul.ranking li.rank_02 div.img,
div.main_box ul.ranking li.rank_03 div.img {
	margin-right: 12px !important;
}
div.main_box ul.ranking li.rank_04 div.title,
div.main_box ul.ranking li.rank_05 div.title {
	margin: 0 24px 0 0 !important;
}
div.main_box ul.ranking li.rank_01 div.youser,
div.main_box ul.ranking li.rank_02 div.youser,
div.main_box ul.ranking li.rank_03 div.youser {
	margin-top: 100px !important;
}
div.main_box ul.ranking li.rank_04 div.youser,
div.main_box ul.ranking li.rank_05 div.youser {
	margin-top: 20px !important;
}
form.extractssearch div.sub_extracts {
/*5月9日の時点でも意味のない、ランキングサブカテゴリ絞り込みメニューを消す*/
	/*visibility: hidden !important;*/
}
/*写真メモ追加ボタンの表示--------------------*/
/*----右側、「マイリスト追加」直下に配置*/
/*div.ph_list_main div.photo_container a.image-annotate-add {
	width: 92px !important;
	height: 34px !important;
	margin: -38px -10px 0 0 !important;
	background: url(http://www.fg-site.net/wp-content/themes/fgsns-test/_inc/images/bt_addition_ph_fg.png) no-repeat 0px 0px !important;
	text-indent: -10em !important;
	color: #fff !important;
}*/
/*----右側配置はここまで*/
/*----左側に配置*/
div.ph_list_main div.photo_container a.image-annotate-add {
	width: 92px !important;
	height: 34px !important;
	float: none !important;
	margin: -68px 0 0 0 !important;
	padding-bottom: 32px !important;
	background: url(http://www.fg-site.net/wp-content/themes/fgsns-test/_inc/images/bt_addition_ph_fg.png) no-repeat 0px 0px !important;
	text-indent: -10em !important;
	color: #fff !important;
}
div.post div.post_header div.contents ul.bt_addition {
	height: 34px !important;
}
/*----左側配置はここまで*/
/*---------------------------------------------*/
/*写真メモ追加ボタン表示にともなう位置の微調整*/
div.ph_list_main div.photo_container {
	margin-left: 80px !important;
}
div.image-note-desc {
	padding-left: 0 !important;
}
div#main_contents div.post div#ph_list {
	padding-top: 13px !important;
}
div#main_contents div.post div#ph_list ul {
	margin-left: 0 !important;
}
/*作品ページサムネイル画像の最上部を作品画像と揃える*/
div#main_contents div.post div#ph_list ul:first-child {
	margin-top: 20px !important;
}
/*ログイン後cgへのリンクバナーを消す*/
div#login_contents div.banner a[href^="http://www.cg-site.net"] {
	display: none !important;
}
/*週月ランキングの表示*/
/*div.disnon {
	display: block !important;
}*/
/*コメントフォームを右にずらす*/
div#respond {
	margin-top: 1em !important;
	padding-left: 178px !important;
}
textarea#comment {
	width:  30em !important;
	height:  5em !important;
}
div.bottom_bar div.linknavi {
	border-bottom: #aaa 3px solid !important;
}
/*コメントを少し見やすく 20120712*/
div#main_contents div.post ul#comments {
	margin-top: 8px !important;
}
div#main_contents div.post ul#comments li div.c_text {
	margin-top : -20px !important;
	margin-left: 8px !important;
}

}

解説

最初は以下の感じで作りました。

• リンクの色をWeb標準に。未訪問のリンクを青、訪問済みが赤紫。それで見にくくなった場合は背景色も修正。
• 新着一覧の並びがガタガタに表示されるのを修正。とんとろさんのツイートが参考になりました。
• 角丸が目についてしまうというか、広告の直角などと合わなかったりするので、撤廃。
• 配色をもっとおとなしめに。旧fgっぽい感じで。
• 三軸での評価を表わすレーダーチャートを不可視に。
• プロフィールのサムネイル画像を右側にするため、左右サイドバーの配置を入れ替え。ログイン前のサイドバー配置は変更しない。

/*と*/でコメントアウトした箇所を読んでいただければなんとなく判るかもしれません。

注意：以下の説明画像は5月半ば頃のを使っています。6月7日現在のものと比べてランキング1位～5位の表示や広告（モザイク処理をしています）の数などに違いがあります。

ログイン後

ログイン後、通常の状態です。

左側にあるプロフィール画像（アカテガニの画像を使ってます）の右下に、小さな画像が重なっています。クリックすると新cgのプロフィールページに行きます。

Stylishでユーザースタイルシートが効いた状態です。

旧fgのようにプロフィール画像を右に配置換えしてます。ランキングはログイン前と同じく左側になります。

私のプロフィール画像、縦に伸ばされてボケてますが、HTMLで縦横170ピクセルに指定しているためにこうなってます。これはユーザースタイルシートでは手直し……、できるんだろうか？

新cgプロフィールページへのリンク画像は表示しないようにしてます。新cgトップページに行くリンク画像があるので、必要はないと思ったからです。

5月13日版ではランキングを表示しないようにしています。ブラウザ画面の大きさにも寄りますが、ランキングで下に隠れていた広告が普通に見えるようになっています。

作品のページ

作品のページ、ユーザースタイルシートが効いた状態です。作者本人のページなので、「作品を編集」ボタンがあったり、「マイリスト追加」ボタンがなかったりします。

レーダーチャートが表示されないようにしています。

「写真メモ追加」ボタンを付けてみました。

プルダウンメニュー、一番右のメニューの右側が切れてしまってます。

4月5日に対策を立てたと思ってたのですが、またおかしくなってました。ここはとりあえずこのままにしておきます……。

6月6日版で、この辺の表示を少しいじっています。多少わかりやすくなっていると思います。

写真メモ追加ボタンとマイリストボタンの配置の様子。他人の写真メモの貼り付けを許可したところは、このように表示されます。

写真メモ追加ボタンが表示されないときは、マウスカーソルを作品の画像に重ねれば表示されると思います。

写真メモ追加ボタンをマイリスト追加ボタンのすぐ下に配置した様子です。

ボタン類がまとまっていいのですが、作品の元画像が600ピクセル未満の場合、写真メモ追加ボタンが画像の端に合わせて左へとずれてしまいます。ちょっとみっともないので、こちらの指定はコメントアウトしています。

スタイルシートの中でコメントアウトされている「右側、『マイリスト追加』直下に配置」という項目を有効にし、「左に配置」の項目をコメントアウトすると、画像のようになります。

設定変更

設定のページ、Stylishでユーザースタイルシートが効いた状態です。

他のページに合わせてあっさり目の感じにしています。

本来ならここに別のメールアドレス設定やブラックリスト機能の設定も追加されるはず、ですが（fg/cgサイトリニューアル内容のお知らせ・ユーザー管理）、いつ実装されるんだろう。

ヘルプ

ヘルプのページ、Stylishでユーザースタイルシートが効いた状態です。

他のページに合わせてあっさり目の感じにしています。

ランキング

ランキングのページ、通常の状態です。

ランキングのページ、Stylishでユーザースタイルシートが効いた状態です。

区切りの線を引いて、一つ一つの項目がはっきりと区別できるようにしています。

他にも配置を変えたり、「投稿者」の文字を追加したりしています。

5月10日の時点で、「サブカテゴリから絞り込む」が働きません。「すべて」以外を選択すると、作品が何も表示されなくなります。表示されてても意味がないので、消せるようにしています。

コメントアウトされている「5月9日の時点でも意味のない、ランキングサブカテゴリ絞り込みメニューを消す」の項目を有効にすると、画像のようになります。この機能はいつ有効になるんでしょう。

ランキングのページはヘッダが表示されなかったり（ヘルプや設定のページに行けない）、フッタにあるリンク先がどれもトップページだったりと、みっともないことになっています。この辺もいつ訂正されるんだろう。

使い方

インストール＆使い方

Stylishをインストールすると、アイコンが右下のアドオンバーに登録され……ると思います。カスタマイズしてるので普通どうなるのかは確認できません、すいません。

ユーザースタイルシートを使うサイトに行き、アイコンをクリック（左クリック）するとメニューが出てきます。「新しいスタイルを書く」にマウスカーソルを乗せると、新しいメニューが開きます。

白紙のスタイルを選ぶとこのようなウインドウが開きます。

名前のところにはわかりやすい名前を（fgとかfgベータ版とか）書きます。タグのところは私は特に書いていません。

白紙のスタイル以外を選ぶと、マウスカーソルのあるところに最初から数行書かれています。この辺はマイナビニュースでの解説などを読んで下さい。

ユーザースタイルシートに書かれてるところをすべてコピーし、貼り付けます。「@namespace url」で始まる行から、閉じる波括弧（ } ）が二行連続で出るところまですべてです。

貼り付け終わったら保存します。

fgのサイトに行くとアイコンが色の付いた状態になり、ユーザースタイルシートが効いている事を表わします。アイコンをクリックするとメニューの最後にスタイルの名前が出て、チェックが入っています。

ユーザースタイルシートを使わない場合は、アイコンをクリックしてメニューを出し、スタイルの名前が出ているところをクリックしてチェックを外すと、すぐに適用されなくなります。

ユーザースタイルシートを使うサイトに行かなくても、Stylishの設定で直接ユーザースタイルシートを書き込むのが一番手軽かと思います。その辺はStylishの使い方についていろいろと調べてみて下さい。

レーダーチャート復活

そこは修正しなくてもいい、という場合は、該当の箇所をコメントにしてしまうと、当該箇所の指定は効かなくなります。画像はレーダーチャートを表示するようにしているところです。コメントにすると文字が緑色になるようです。

「/*レーダーチャートを隠す*/」の行から次の「/*アクセントを*/」の手前までを削除し、保存しても同じです。

うちの環境だけかも知れませんが、削除しても実際にはまだ残っているということがありました。削除の場合は一旦上下にスクロールして戻し、本当に削除されているか確認した方が良さそうです。

TINAMI用ユーザースタイルシート

2012年6月1日、TINAMI用のを作ってみました。おまけということで公開します。

モデル（模型など立体物のカテゴリ）のように複数画像が投稿可能なところで、縦横の比率が違う画像を複数投稿した場合、横長の画像が表示されているときに画像の下がかなり開いてしまいます。

TINAMIには特に不満はありませんでしたが、これはちょっと気になりました。調べてみたら、画像を表示する領域の縦の長さが、一番縦長の画像の長さに揃えられてしまうようです。

たとえば縦1000ピクセルと100ピクセルの画像を投稿した場合、表示される領域は両方とも1000ピクセルを確保します。そのため、100ピクセルの画像を表示しても、その下に900ピクセルの空きができてしまいます。たぶん。

とりあえず1日深夜に問い合わせフォームから連絡しています。どう対処されるかは判りませんが、気になる方は以下のスタイルシートを使うと改善されるかも知れません。

使い方はfg用のと同じです。名前は「TINAMI」とでも適当に付けて使ってみて下さい。もし不具合がありましたら停止、削除してください。

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("tinami.com") {

/* 2012-08-05 */
/*横長作品表示時の下の空きを詰める 20120601*/
div.image_list	{
	height: auto !important;
}
/*サムネイルを作品画像横で 20120805*/
div.cont_model	{
	position: absolute !important;
	top: auto !important;
}
}

テキストファイル

テキスト形式、文字コードはUTF-8です。

文書更新履歴

2020年01月15日

「はじめに」に「Stylish」の件を追記。

2012年08月05日

TINAMI用スタイルシートを更新。

2012年07月21日

7月21日版公開。「注目のタグ」を表示するようにした。

2012年07月12日

7月12日版公開。コメント表示に若干手を加えた。

2012年07月03日

7月3日版公開。旧fg版R18ページの表示を調整。

2012年06月07日

6月6日版公開。「注目のタグ」を隠した他、プルダウンメニュー表示、R18ページの表示を調整。

2012年06月05日

TINAMIサポート担当様から返事が来た件について追記。

2012年06月02日

終了取り消し。ランキング表示の微調整。

2012年05月15日

fgでの公開ページが非公開化されたことにともない、本スタイルシート更新を終了することに。

2012年05月13日

12日朝のランキング変動にともない、ランキングを非表示化。

R18ページの見た目を少し変更。

一箇所、上下間隔を微調整。

2012年05月10日

写真メモ追加ボタンを表示させてみた。それに伴い周辺の配置微調整を行なう。

ヘルプページの配色と配置を変更。

説明画像を入れ替え。

2012年05月04日

5月4日のランキング機能改訂に合わせて調整。

横に5位まで表示されるランキングの見た目を二種類用意。

2012年05月03日

5月3日のランキング機能実装に合わせて調整。

ログイン前トップページ、ランキングページ、設定変更ページの配色や文字揃えを変更。

2012年04月06日

メニューがフッタの裏に回って見えなくなる場合があるのを調整。

2012年04月05日

うちの環境で横スクロールバーが出ないようにした。他につかってる方のところで悪影響が出なければいいのですが。

サイトの解説画像を見やすいものに変更。

2012年04月04日

変更があったので対応。

2012年04月03日

このページを公開。