フォーラム:スタイルシートへの要望

Forums: Index > 連絡・要望 > スタイルシートへの要望

このWiki全体のスタイルを変更するスタイルシートへの要望はこちら--Pipa 2007年9月10日 (月) 14:54 (UTC)

テーブル用のスタイルシートが欲しいです。現状はタグをコピペしてるんですが、コピー元を開いておかないとダメでちょっと面倒なのと、デザインの統一性の観点から···できればwikipedia:ja:Help:表の作り方#罫線みたいにclass指定で簡単に変更できるテーブルのスタイルをいくつか(罫線付きと罫線なし、色つきなど)あると良いなぁ、と。 --hugin 2007年9月10日 (月) 12:11 (UTC)

サイト全体のスタイル指定はMediaWiki:Monobook.cssでいいのかな。色は何色がいいでしょう？いまは好みで#fcfcfcを使ってますけど。--Pipa 2007年9月10日 (月) 15:03 (UTC)

スタイルシートの話じゃなくなりますが、スタイルシートを触らなくても、テンプレートで定型のテーブルが作れます。たとえばトップページに使われている「box1 start」と「box2 start」、あと「boxes end」がそうです。編集画面の下のほうにある、「このページで使われているテンプレート」で、中に何が書いてあるか確認できます。コピーして、いじって、定型のたたき台にしてみてはどうでしょうか(·ｗ·)--Ysuka 2007年9月10日 (月) 15:38 (UTC)

サイト全体のスタイル指定はMediaWiki:Common.cssみたいですね。とりあえずwikitableクラスを作成しました。こんな感じ？レイアウトと色指定をした表の見本をここに書いてくだされば、クラス作成しますよ。

表のタイトル
列見出しA	列見出しB	列見出しC
セル1A	セル1B	セル1C
セル2A	セル2B	セル2C

テンプレートを使った方法は、セルが少ない大雑把なレイアウト用で使うような気がしますけど、どうなんでしょう？--Pipa 2007年9月10日 (月) 15:56 (UTC)

ヒント/対応ありがとうございます。個人的には罫線さえつけばとりあえずOKと考えていましたのでちょっとTemplateを作ってみました。Templateにスタイルシートを書けば管理者でなくとも使い回しのできるレイアウトを作れるようです。デザインセンスはないので単純に罫線だけのサンプルですが、こんな感じ↓になりました。

表のタイトル
列見出しA	列見出しB	列見出しC
セル1A	セル1B	セル1C
セル2A	セル2B	セル2C

↑これは使い勝手が良くなかった…

表のタイトル
列見出しA	列見出しB	列見出しC
セル1A	セル1B	セル1C
セル2A	セル2B	セル2C

普通のHTML+CSSだとこういうやり方はあり得ないのでちょっと目から鱗。--hugin 2007年9月10日 (月) 17:07 (UTC)

調べて書いてる間にwikitableが進化してますね。色が付くとやっぱり見やすいなぁ。--hugin 2007年9月10日 (月) 17:08 (UTC)

見出し[]

H2やH3などの見出しについて、ざっと以下のような点が気になったので私のユーザページにサンプルを作ってみました。

==見出し==がサイズ変更だけでボールドにならず、それ以下のレベルの見出しと並べると弱く感じる
==見出し==以外に下線がつかず、見出しと気づきにくい
上と被りますが、見出しの上下マージンが少ないせいか本文に埋もれがち

良ければご意見お聞かせください。--hugin 2007年9月18日 (火) 17:12 (UTC)

変更してみました。どうでしょうか。--Pipa 2007年9月19日 (水) 12:58 (UTC)

背景色なしの方をそのまま使っていただいたようで…色は合わせたつもりですがもっと良い色やもっと違うスタイルが良いとかありましたらどんどん変更してやってくださいませ。不満点だけ言うのもアレだったので作ってみたってだけのサンプルですので…。以下ちょっと気になった点。他の方はどう感じられたでしょうか？

[編集]のリンクが枠外に飛び出てるところがある。よくわからないのですがページをちょっと編集すると中に収まるのでMediaWikiの問題なんでしょうかね？
H3のborder-leftはナシでも良かったかも。Helpのカテゴリページなど、段組と一緒になるとかえってうるさく感じてしまいました＾＾；と、書いていたらボーダーがなくなってる…なぜだろう…

--hugin 2007年9月19日 (水) 15:43 (UTC)

編集のリンクが飛び出すのはそこの部分のHTML構造のせいですね。w:c:ja:Forum:記事空間だけ節見出しのHTMLが違うに質問してみました。カテゴリでのH3のボーダーはスタイルシートで消しときました。色つきのはちょっとうるさい気がしたので無地を選びました。--Pipa 2007年9月20日 (木) 03:02 (UTC)

フォーラムは直接編集でよかったのかな？wikitableを使ってAdonmentリストのページ書き換えてみます問題がありましたら戻してください。--Fourpsk 2007年9月19日 (水) 02:26 (UTC)

見やすくなりましたね。お疲れ様です。--Pipa 2007年9月19日 (水) 12:58 (UTC)

見てなかったけど表が崩壊してたんですね…Firefoxではうまく改行されないようなので「,」のあとにスペース追加してみました。--hugin 2007年9月19日 (水) 15:43 (UTC)

実は上から2個位分しか自分は弄ってないですが誰かが続きやってくれたみたいです。感謝--Fourpsk 2007年9月25日 (火) 09:05 (UTC)

クリップボードボタン[]

スタイルシートって自分では見ることもできないんですかね…？　EQ2iで使っている「cpinput」クラスというモノを移植したいんですが、中身すら分からなくて困っています。en:Template:Push2CBというページで使われていて、押すと直前のテキストがクリップボードに入るというボタン画像が出るものです。--Ysuka 2007年9月25日 (火) 19:55 (UTC)

span.cpinput { display: none; } ですね。MediaWiki:Common.cssにあります。--hugin 2007年9月26日 (水) 00:32 (UTC)

失礼、ボタン画像自体はその下のinput.cpinputだと思います--hugin 2007年9月26日 (水) 04:00 (UTC)

MediaWiki:Common.cssにクラスを作成しました。--Pipa 2007年9月26日 (水) 08:16 (UTC)

MediaWiki名前空間の中にあるんですね！　ありがとうございました。--Ysuka 2007年9月26日 (水) 12:04 (UTC)

と思ったら、<span class="cpinput">/waypoint -495, 22, 203</span>というタグは生成されるんですけど、うまく表示されないみたいです。なんでかなー。スポンサー探しを見てください。--Ysuka 2007年9月29日 (土) 07:15 (UTC)

画像をこっちにアップしてないのが原因かと思ってアップしようとしたら、なぜかアップロードできなくなる不具合に遭遇してしまいました。Png画像が0バイトになっちゃいます。なのでしばらく対処しようがありません。あと、外装が「標準」のときはもとから見えないですね、このボタン。「Monobook」では見えますけど。--Pipa 2007年9月29日 (土) 12:25 (UTC)

　これ、元から変な気がするんですよね…input.cpinputで定義されてるので、inputタグが付かないとおかしいんですけど、EQ2iではinputなしに画像が出てるんですよね。--hugin 2007年9月29日 (土) 13:40 (UTC)

久しぶりにen:Template:Push2CBずーっとにらめっこしてたんですがやっぱりダメだーー。ブラウザには<input class="cpinput" readonly="" value="/waypoint x, z, y">って感じで認識されてるようなんですが、どこからinputが沸いて出るんだろう…。cpinput自体はpaddingを左へ拡張＆value部分を隠す＆背景としてボタン画像を入れる（paddingを拡張した部分にコレが入る）ということをしています。わからないのは2点、どうやってinputとして認識させているのか。もう1点はクリックしただけで範囲選択する方法。別な方法を探った方が良いのかなあ --hugin 2007年10月11日 (木) 17:38 (UTC)

範囲選択させるのはJavaScriptくらいしかないよなぁ、と思ってen:MediaWiki:Common.jsを見てみたらそれらしき記述（Easy Copy Inputのセクション）がありました。試しにこれを入れてもらえませんか。--hugin 2007年10月21日 (日) 02:25 (UTC)

入れてみました。画像はちょっとLGPLライセンスのものに変更しました。右クリックしてもコピーが選択できないですね…。（IE7使ってます。）あと、なんでへこんでるんだろ。--Pipa 2007年10月21日 (日) 11:05 (UTC)

FirefoxとIE6だと何も見えませーん……JSでクリップボードコントロールって互換性が低いみたいですね。Flashと組み合わせると、ほぼどんな環境にもクリップボードに送るボタンが作れるらしいんですが。--Ysuka 2007年10月21日 (日) 11:34 (UTC)

わかりました、これ、Yahoo! User Interface LibraryのDom CollectionのMethod使ってます。つまり、yahoo-min.jsとdom-min.js、event-min.jsをインポートしないと動きません。ウィキアで使うにはたぶん申請しないとだめかもしれません。英語版でも動いてないので、おそらく旧EQ2i.com時代（このときは自宅サーバーだったかと）のものかもしれません。--Pipa 2007年10月21日 (日) 11:47 (UTC)

あれ？動いてませんか？うちの環境（Firefox2.0.0.8）では動くようになってます。ボタン押しただけじゃコピーされませんよ。右クリックしてコピーしろとポップアップが出てるはずです。--hugin 2007年10月21日 (日) 14:39 (UTC)

ちょっと確認してみましたがこのDom CollectionというのはBSDライセンスですね。ライセンス的にちょっとまずい気もするけどどうなんでしょ？

記事空間でないのでBSDライセンスでも大丈夫だと思いますが、IE系では全然うごかないので（右クリックしてもコピーがグレーで選択できない）使わないほうがいいような感じです。--Pipa 2007年10月21日 (日) 18:05 (UTC)

pre使うのにインデントなくしました。

BSDライセンスはライセンス文表示があれば良いみたいです。Yahoo! UI Library: License BSDライセンス（参考訳）
IE6でちゃんと動いてないことを確認しました。IEは文字の真上でクリックしないと範囲選択が解除されてしまうみたいです。

input.cpinput {
    background: url(') top left no-repeat;
    width: 16px;
    height: 16px;
    padding: 0px;
    margin: 0px;
    color: transparent;
    font-size: 0px;
}

手元ではこれでとりあえず動くようになりました。paddingエリアにアイコンを追い出すのをあきらめて、font-size: 0px;で文字を見えなくしてます。IE6だとこれでもゴミみたく表示されてしまいますが…
余談：IEで見たら右側がRMT広告だらけですね・・・いつもFirefox+Ad-Blockだったので全然気づきませんでした。--hugin 2007年10月22日 (月) 15:00 (UTC)

動きました。ボーダー指定でへこみもなくすことができました。--Pipa 2007年10月22日 (月) 17:54 (UTC)

実際に勇気の祭壇を作ろうを書いててわかったんですが、font-size: 0px; だと今度はFirefoxで下付になってしまうようです・・・。フォントの下端で揃えられてるような感じですね。IEはフォントの上端で揃えられるのかなー。仕方ないのでまたも小細工をしてみます・・・。--hugin 2007年10月23日 (火) 15:56 (UTC)

overflow: hidden; vertical-align: text-bottom; を追加してくださいー。これでinputボックスとテキストの下端が揃うはずです。overflowはスクロールバーが出ないように念のため指定。--hugin 2007年10月23日 (火) 16:11 (UTC)

IE7しか持ってないので確認できませんが、直りましたか？--Pipa 2007年10月24日 (水) 04:58 (UTC)

これはすごい。うちのFirefoxとIE6でもばっちり、上下位置もいい感じに表示されています（以前表示されなかったのはキャッシュでも残っていたみたいです）。あとは使い方の説明文だけですね！　どこに置いたら見てくれるだろ…--Ysuka 2007年10月24日 (水) 10:49 (UTC)

Coinの色指定[]

Template:Coinで使うための色指定追加をお願いします。

/* Coin Colors */
font.coin-platinum { color: #A0A0A0; }
font.coin-gold { color: #FFBB00; }
font.coin-silver { color: #606060; }
font.coin-copper { color: #CC8800; }
font.coin-status { color: #0099FF; }

--hugin 2007年9月29日 (土) 04:13 (UTC)

追加しました。--Pipa 2007年9月29日 (土) 04:48 (UTC)

ありがとうございましたー--hugin 2007年9月29日 (土) 13:40 (UTC)

緑赤[]

ごちゃごちゃしてるとこすみません、Template:緑字赤字用のスタイルシート追加、お願いできますか。

/* for use by [[Template:GreenRed]] */
.xc-green, .xc-green a:link, .xc-green a:visited { color: #33CC00; }
.xc-red, .xc-red a:link, .xc-red a:visited { color: #CC0000; }

追加しました。--Pipa 2007年10月7日 (日) 17:50 (UTC)

ありがとうございます。--Ysuka 2007年10月9日 (火) 07:22 (UTC)

横からすいません。たびたびこのような作業が発生するなら、Pipaさん以外にも管理者権限を与えてはどうでしょうか。今徐々にユーザーが増えているようですし、負担軽減のためにも、そうした方が良い気がします。大抵、大型のところは、複数の管理者がいます。--Yukichi / Shun (Talk) 2007年10月9日 (火) 09:41 (UTC)

とりあえず、アイテム周りをまとめて追加お願いします。微妙な色調整したい気もしますけど。ところで、classの値に日本語って使えましたっけ？ class="等級:レジェンダリ"とか書けると、判断文を書くとき楽なんですが。

/* 品質の色（白背景用） */ 
.qc-mythical, .qc-mythical a:link, .qc-mythical a:visited { color: #CC0066; }
.qc-fabled, .qc-fabled a:link, .qc-fabled a:visited { color: #FF9999; }
.qc-mastercrafted, .qc-mastercrafted a:link, .qc-mastercrafted a:visited { color: #FF9900; }
.qc-handcrafted, .qc-handcrafted a:link, .qc-handcrafted a:visited { color: #33CC00; }
.qc-legendary, .qc-legendary a:link, .qc-legendary a:visited { color: #FF9900; }
.qc-treasured, .qc-treasured a:link, .qc-treasured a:visited { color: #BDEDFF; }
.qc-uncommon, .qc-uncommon a:link, .qc-uncommon a:visited { color: #33CC00; }
.qc-common, .qc-common a:link, .qc-common a:visited { color: #EEEEEE; }
.qc-unknown, .qc-unknown a:link, .qc-unknown a:visited { color: #BBBBBB; }

/* 「調べる」ウィンドウ */
.examinewindow a:link { color: #3377FF; }
.examinewindow a.new { color: #CC3300; }
.examinewindow a:visited { color: #9966ff; }

span.itemquality {
    font-weight: bold;
    font-size: 130%;
    font-family: Times;
    margin-top: 20px;
}

/* 品質の色（「調べる」ウィンドウ用） */ 
/* ゴミがいっぱい… */
.xqc-mythical, .xqc-mythical a:link, .xqc-mythical a:visited { color: #CC0066; }
.xqc-fabled, .xqc-fabled a:link, .xqc-fabled a:visited { color: #FF9999; }
.xqc-mastercrafted, .xqc-mastercrafted a:link, .xqc-mastercrafted a:visited { color: #FF9900; }
.xqc-legendary, .xqc-legendary a:link, .xqc-legendary a:visited { color: #FF9900; }
.xqc-treasured, .xqc-treasured a:link, .xqc-treasured a:visited { color: #BDEDFF; }
.xqc-handcrafted, .xqc-handcrafted a:link, .xqc-handcrafted a:visited { color: #33CC00; }
.xqc-uncommon, .xqc-uncommon a:link, .xqc-uncommon a:visited { color: #33CC00; }
.xqc-common, .xqc-common a:link, .xqc-common a:visited { color: #EEEEEE; }
.xqc-unknown, .xqc-unknown a:link, .xqc-unknown a:visited { color: #BBBBBB; }

table.examinewindow { 
    background-color: #000000;
    color: #FFFFFF;
    font-family: Times;
}
table.ew-extras, td.ew-extras {
    background-color: #DDDDDD;
    color: #000000;
}
td.ew-title-block {
    color: #FFFFFF;
    padding-bottom: 10px; 
}
font.ew-low, td.ew-low { color: #BBBBBB; }
font.ew-high, td.ew-high { font-weight: bold; color: #FFFFFF; }
font.ew-effects { color: #FFFF00; }
.ew-flags { font-weight: bold; color: #FFFF00; }
font.ew-title { font-size: 180%; font-weight: bold;}
font.ew-desc { font-size: 100% }
font.ew-effectlist { color: #99ccff; }
font.ew-effectdesc { color: #ffffff; }
td.ew-stats { 
    color: #33CC00;
    font-weight: bold;
}

--Ysuka 2007年11月14日 (水) 23:14 (UTC)

追加しました。Class名は日本語受け付けないデスヨ--Pipa 2007年11月15日 (木) 01:17 (UTC)

ありがとうございました。Classはダメか！　ｷｰ。--Ysuka 2007年11月15日 (木) 10:54 (UTC)