独自CSS一覧
(31コメント)タグ一覧
>最終更新日時：
他のWikiとは違ったデザインにすることができます。
※サイトによってはレイアウトが崩れることがありますので、個人の責任において適用をお願いいたします。
また要望などもありましたら下記コメント欄にご記載願います。
- 独自CSS導入方法
- DB上段・中段を2列にし、下段見出しを太文字にする方法（PC用）
- DB上段・中段を2列にし、下段見出しを太文字にする方法（PC固定レイアウト用）
- DB上段・中段を2列にし、下段見出しを太文字にする方法（スマホ用）
- 文字ボタンを作る
- スマホメニュー（上部）の一か所背景色を変える方法（スマホ用）
- テーブル関連
独自CSS導入方法
右上の「アカウント」をクリックして、「このWiki管理画面」を選択してください。
Wikiの管理画面から右メニューの「デザイン・カラムの設定」を選択してください。
「独自CSS」の「編集する」をクリックし下記のCSSをコピー＆ペーストで貼りつけて、画面下部にある「登録」ボタンを押すだけで導入は完了です。
もし元に戻したい場合には、先ほど貼りつけたCSSを削除して「登録」ボタンを押せば、元に戻すこともできます。
独自CSSはPCとスマホ用、それぞれ設定する必要がありますので、用途に応じて設定願います。
★独自class id 付与構文
| 変換用マークアップ | 説明 | 利用例 |
|---|---|---|
| #divclass(クラス名){ } | <div class="クラス名">を表示 | #divclass(original_css_class){ } |
| #divid(id名){ } | <div id="id名">を表示 | #divid(original_css_id){ } |
DB上段・中段を2列にし、下段見出しを太文字にする方法（PC用）
/* ---------- DB 上段項目 左右表記 ---------- */
.ui_wikidb_top_pc {
width: 250px;
float: left;
}
.ui_wikidb_top_pc{
margin-right: 5px;
}
/* ----------------------------------------------- */
/* ----- Wiki DB 左右分断-------------------------------- */
.ui_wikidb_middle_pc {
float: left;
width: 250px;
}
/* ----------------------------------------------- */
/* ---------- DB 下段項目 太文字表記 ---------- */
.ui_wiki_db_bottom_wrapper p {
font-weight: bold;
}
.ui_wiki_db_bottom_wrapper p .ui_wikidb_title,
.ui_wiki_db_bottom_wrapper p .ui_bottom_detail {
font-weight: normal;
}
/* ----------------------------------------------- */
.ui_wikidb_top_pc {
width: 250px;
float: left;
}
.ui_wikidb_top_pc{
margin-right: 5px;
}
/* ----------------------------------------------- */
/* ----- Wiki DB 左右分断-------------------------------- */
.ui_wikidb_middle_pc {
float: left;
width: 250px;
}
/* ----------------------------------------------- */
/* ---------- DB 下段項目 太文字表記 ---------- */
.ui_wiki_db_bottom_wrapper p {
font-weight: bold;
}
.ui_wiki_db_bottom_wrapper p .ui_wikidb_title,
.ui_wiki_db_bottom_wrapper p .ui_bottom_detail {
font-weight: normal;
}
/* ----------------------------------------------- */
DB上段・中段を2列にし、下段見出しを太文字にする方法（PC固定レイアウト用）
/* ----- Wiki DB 左右分断-------------------------------- */
/* ---------- DB 上段項目2列 ---------- */
.ui_wikidb_top_area .ui_wikidb_top_pc {
float: left;
width: 149px;
margin-right: 5px;
}
.ui_wikidb_top_area p {
width: 142px;
text-align: center;
}
.ui_wikidb_top_area .ui_wikidb_title {
float: none;
display: block;
}
/* ---------- DB 中段項目2列 ---------- */
.ui_wikidb_middle_area .ui_wikidb_middle_pc {
float: left;
width: 149px;
}
.ui_wikidb_middle_area p {
width: 142px;
text-align: center;
}
.ui_wikidb_middle_area .ui_wikidb_title {
float: none;
display: block;
}
/* ---------- DB 下段項目 太文字表記 ---------- */
.ui_wiki_db_bottom_wrapper p {
font-weight: bold;
}
.ui_wiki_db_bottom_wrapper p .ui_wikidb_title,
.ui_wiki_db_bottom_wrapper p .ui_bottom_detail {
font-weight: normal;
}
/* ----------------------------------------------- */
/* ---------- DB 上段項目2列 ---------- */
.ui_wikidb_top_area .ui_wikidb_top_pc {
float: left;
width: 149px;
margin-right: 5px;
}
.ui_wikidb_top_area p {
width: 142px;
text-align: center;
}
.ui_wikidb_top_area .ui_wikidb_title {
float: none;
display: block;
}
/* ---------- DB 中段項目2列 ---------- */
.ui_wikidb_middle_area .ui_wikidb_middle_pc {
float: left;
width: 149px;
}
.ui_wikidb_middle_area p {
width: 142px;
text-align: center;
}
.ui_wikidb_middle_area .ui_wikidb_title {
float: none;
display: block;
}
/* ---------- DB 下段項目 太文字表記 ---------- */
.ui_wiki_db_bottom_wrapper p {
font-weight: bold;
}
.ui_wiki_db_bottom_wrapper p .ui_wikidb_title,
.ui_wiki_db_bottom_wrapper p .ui_bottom_detail {
font-weight: normal;
}
/* ----------------------------------------------- */
DB上段・中段を2列にし、下段見出しを太文字にする方法（スマホ用）
/* ----- Wiki DB 左右分断-------------------------------- */
/* ---------- DB 上段項目2列 ---------- */
.ui_wikidb_top_area {
width: 100%;
}
.ui_wikidb_top_pc {
float: left;
width: 50%;
margin: 0 2px 0 0;
}
.ui_wikidb_top_area p {
margin-left: 0;
margin-right: 0;
text-align: center;
}
.ui_wikidb_top_area p span {
display: block;
float: none;
width: 100%;
text-align: center;
padding-left: 0;
padding-right: 0;
}
.ui_wikidb_top_area p span .ui_wikidb_required,
.ui_wikidb_top_area p span .ui_wikidb_required_n,
.ui_wikidb_top_area p span .ui_wikidb_intger {
display: inline;
}
.ui_wikidb_edit_input_text, .ui_wikidb_edit_input_text_b {
max-width: 90%;
font-size: 16px !important;
scale(0.8);
}
.ui_wiki_db_bottom_wrapper .ui_wikidb_edit_input_text_b {
max-width: 100px;
}
/* ---------- DB 中段項目2列 ---------- */
.ui_wikidb_middle_area {
width: 100%;
}
.ui_wikidb_middle_pc {
float: left;
width: 50%;
margin: 0 2px 0 0;
}
.ui_wikidb_middle_area p {
margin-right: 0;
text-align: center;
}
.ui_wiki_db_top_middle_wrapper p {
margin: 0 0 2px;
}
.ui_wikidb_middle_area p > span {
display: block;
float: none;
width: 100%;
text-align: center;
padding-left: 0;
padding-right: 0;
}
.ui_wikidb_edit_input_text, .ui_wikidb_edit_input_text_b {
max-width: 90%;
font-size: 16px !important;
scale(0.8);
}
.ui_wiki_db_bottom_wrapper .ui_wikidb_edit_input_text_b {
max-width: 100px;
}
/* ---------- DB 下段項目 太文字表記 ---------- */
.ui_wiki_db_bottom_wrapper p {
font-weight: bold;
}
.ui_wiki_db_bottom_wrapper p .ui_wikidb_title,
.ui_wiki_db_bottom_wrapper p .ui_bottom_detail {
font-weight: normal;
}
/* ----------------------------------------------- */
/* ---------- DB 上段項目2列 ---------- */
.ui_wikidb_top_area {
width: 100%;
}
.ui_wikidb_top_pc {
float: left;
width: 50%;
margin: 0 2px 0 0;
}
.ui_wikidb_top_area p {
margin-left: 0;
margin-right: 0;
text-align: center;
}
.ui_wikidb_top_area p span {
display: block;
float: none;
width: 100%;
text-align: center;
padding-left: 0;
padding-right: 0;
}
.ui_wikidb_top_area p span .ui_wikidb_required,
.ui_wikidb_top_area p span .ui_wikidb_required_n,
.ui_wikidb_top_area p span .ui_wikidb_intger {
display: inline;
}
.ui_wikidb_edit_input_text, .ui_wikidb_edit_input_text_b {
max-width: 90%;
font-size: 16px !important;
scale(0.8);
}
.ui_wiki_db_bottom_wrapper .ui_wikidb_edit_input_text_b {
max-width: 100px;
}
/* ---------- DB 中段項目2列 ---------- */
.ui_wikidb_middle_area {
width: 100%;
}
.ui_wikidb_middle_pc {
float: left;
width: 50%;
margin: 0 2px 0 0;
}
.ui_wikidb_middle_area p {
margin-right: 0;
text-align: center;
}
.ui_wiki_db_top_middle_wrapper p {
margin: 0 0 2px;
}
.ui_wikidb_middle_area p > span {
display: block;
float: none;
width: 100%;
text-align: center;
padding-left: 0;
padding-right: 0;
}
.ui_wikidb_edit_input_text, .ui_wikidb_edit_input_text_b {
max-width: 90%;
font-size: 16px !important;
scale(0.8);
}
.ui_wiki_db_bottom_wrapper .ui_wikidb_edit_input_text_b {
max-width: 100px;
}
/* ---------- DB 下段項目 太文字表記 ---------- */
.ui_wiki_db_bottom_wrapper p {
font-weight: bold;
}
.ui_wiki_db_bottom_wrapper p .ui_wikidb_title,
.ui_wiki_db_bottom_wrapper p .ui_bottom_detail {
font-weight: normal;
}
/* ----------------------------------------------- */
文字ボタンを作る
独自CSS
.link_button {
text-align: left;
}
/* ---------- ボタン文字・背景色 ---------- */
.link_button > a {
background-color: #778899;
color: white;
text-align: left;
padding: 8px;
font-size: 12px;
display: inline-block;
border-radius: 5px;
}
/* ----------------------------------------------- */
/* ---------- ボタンオーバー文字・背景色 ---------- */
.link_button > a:hover {
background-color:#91D8FF;
color: white;
}
/* ----------------------------------------------- */
text-align: left;
}
/* ---------- ボタン文字・背景色 ---------- */
.link_button > a {
background-color: #778899;
color: white;
text-align: left;
padding: 8px;
font-size: 12px;
display: inline-block;
border-radius: 5px;
}
/* ----------------------------------------------- */
/* ---------- ボタンオーバー文字・背景色 ---------- */
.link_button > a:hover {
background-color:#91D8FF;
color: white;
}
/* ----------------------------------------------- */
Wikiへの記載方法
文字ボタン
Wikiへの記載方法
[[Wikiを初めて立ち上げる方はコチラを参考に！！>作成してみよう！]]
}
スマホメニュー（上部）の一か所背景色を変える方法（スマホ用）
下記の例では2段目の一番左の背景色を変更しています。
数字を変更することで、好きな箇所に変更可能です。
- menu2：2段目
- nth-child(1)：左から数えて1番目
/* ---------- メニューボタンの一部の背景色を変更 ---------- */
#ui_custom_menu ul.ui_cus_menu2 li:nth-child(1) a {
background: #999;
}
/* ----------------------------------------------- */
#ui_custom_menu ul.ui_cus_menu2 li:nth-child(1) a {
background: #999;
}
/* ----------------------------------------------- */
テーブル関連
テーブルヘッダーの背景色設定
/* ---------- テーブルヘッダーの背景色 ---------- */
th {
background: #cfe2f3 !important;
}
/* ----------------------------------------------- */
th {
background: #cfe2f3 !important;
}
/* ----------------------------------------------- */
テーブル背景色を奇数偶数で色違いに設定
#f5edffが偶数となっています
/* ---------- テーブル背景色を奇数偶数で色違いに設定 ---------- */
table tr:nth-child(2n+1) {background-color:#ffedff;} /* 奇数 */
table tr:nth-child(2n+0) {background-color:#f5edff;} /* 偶数 */
/* ----------------------------------------------- */
table tr:nth-child(2n+1) {background-color:#ffedff;} /* 奇数 */
table tr:nth-child(2n+0) {background-color:#f5edff;} /* 偶数 */
/* ----------------------------------------------- */
マウスオーバー時に行の背景色を変更する設定
/* ---------- マウスオーバー時に行の背景色を変更 ---------- */
table tr:hover td {
background-color: #eeeeee;}
/* ----------------------------------------------- */
table tr:hover td {
background-color: #eeeeee;}
/* ----------------------------------------------- */
コメント(31)
Twitter
-
シミュレーターのボタンの背景色を変えることはできないでしょうか？返信数 (1)0
-
×
└
Gamerchサポート◆rfiYrD9mT6
No.101427953
通報
申し訳ございませんが、シミュレーターのボタンの背景色を変えるという機能はございません。ご了承のほどよろしくお願いいたします。0
-
×
└
Gamerchサポート◆rfiYrD9mT6
No.101427953
通報
-
#divclass(link_button){
}
の独自CSSのソースに追加で自由に「ボタン文字・背景色」を引数として渡して設定できるようにするにはどのように表現すればよいですか？
#divclass(link_button,ボタン文字色,背景色){
}返信数 (2)0-
×
└
Gamerchサポート◆rfiYrD9mT6
No.101226681
通報
CSSの方で
background-color: #○○○○○○;
color: #○○○○○○;
こちらの部分を変更してください。0-
×
└
shake
No.101254516
通報
こんにちは。返信ありがとうございます。
>background-color: #○○○○○○;
>color: #○○○○○○;
CSSの方で色を指定して決め打ちではなく、
&color(#○○○○○○,#○○○○○○)
のようにWiki構文で色を自由に指定したいのです。
&color()構文はなぜ色を受け渡しできるのですか？
Wiki構文を展開してHTMLとして表現するのは何となくわかります。
どうすればCSSに色を渡せますか？
N88BASIC、MSX-Cくらいならなんとなくわかります。0
-
×
└
shake
No.101254516
通報
-
×
└
Gamerchサポート◆rfiYrD9mT6
No.101226681
通報
こんにちは。Wikiの構文でアンダーラインを引くものがありません。
独自CSSを使ってアンダーラインの太さ、線の色を自由に設定できるものを書くにはどうすれば実現できますか？
希望するのは以下のような形です
divclass(underline,任意の線の太さ,任意の線の色){アンダーラインという文字列}
参考にしたサイト
https://techacademy.jp/magazine/9645
<span style="border-bottom: solid 5px red;">アンダーライン</span>
独自CSSを使ってアンダーラインの太さ、線の色を自由に設定できるものを書くにはどうすれば実現できますか？
希望するのは以下のような形です
divclass(underline,任意の線の太さ,任意の線の色){アンダーラインという文字列}
参考にしたサイト
https://techacademy.jp/magazine/9645
<span style="border-bottom: solid 5px red;">アンダーライン</span>
返信数 (7)
0
-
×
└
shake
No.101225884
通報
&color(red,black){サンプル}
は（）の中に色を書くと色を渡して文字の色を自由に設定できますが色を意味する変数のようなものが使われているのですか？
具体的な内部的なラベルはどうなっているのですか？
※CSSはよくわかっていないと思います。0 -
×
└
shake
No.101225900
通報
https://saruwakakun.com/html-css/reference/border
を後から見たのですが、アンダーラインの線種も指定できるようになると便利だと思います。
点線、破線、二重線、蛍光ペン風などを指定できるとよいかなと。0 -
×
└
Gamerchサポート◆rfiYrD9mT6
No.101226678
通報
%%%文字%%%
上記の構文でアンダーラインが引けます。
アンダーラインの構文は掲載されていなかったため、取り急ぎ掲載させていただきました。0 -
×
└
774@Gamerch
No.101228825
通報
横から失礼します。
#spanclass(){}のようなマークアップがあると便利だなと思いました。
主様はCSSに不慣れとのことですので宜しければ「」内のワード+CSSで検索してみてください。
＊下線を引く方法は下記の2パターンあります。
・テキスト自体に下線を引く「text-decoration」
・ボックス要素の下に線を表示する「border」
※点線、破線、二重線などのバリエーションも出てきます。
Androidブラウザでは表示できるtext-decorationのバリエーションが限られているのでご注意を。0-
×
└
774@Gamerch
No.101228847
通報
＊蛍光ペン風はボックス要素に「background-color」で色を指定することで再現できます。
＊色は「カラーネーム」(red)で指定する方法と「カラーコード」(#FF0000)で指定する方法があります。
またサンプルを作ってみましたので宜しければ参考に。
＊下線構文をデコレーション
ピンク背景、赤色二重下線
span[style='text-decoration: underline;']{
background-color: #FFCCCC;
text-decoration: none !important;
border-bottom:3px double red;
}0
-
×
└
774@Gamerch
No.101228847
通報
-
×
└
774@Gamerch
No.101228911
通報
＊ブロック要素を複数作ってインライン表示にする
緑背景、青色破線
・wiki構文
#divclass(test1){
あああ}
#divclass(test2){
いいい(装飾したい文)}
#divclass(test1){
ううう}
※改行を入れずに括弧を閉じてください。
・独自CSS
.test1, .test2{
display:inline;
}
.test2{
margin: auto -0.3em;
background-color: #CCFFDD;
border-bottom: 2px dashed blue;
}0
例と解説をありがとうございます。
自身のWikiの副管理人以上が閲覧できるページにログとして保管しました。
後で調べてみようと思います。
自身のWikiの副管理人以上が閲覧できるページにログとして保管しました。
後で調べてみようと思います。
0
下の方に同じような質問がありましたのでこちらで質問させていただきます。
独自CSSの制限についてです。
文字数制限はとくに設定されていないとのことですが、
4000文字を超えるとエラーが発生してしまいます。
（コメント・スペース・改行含む、構文・全角半角の区別無し）
独自CSSに制限事項がありましたら教えていただけますでしょうか。
独自CSSの制限についてです。
文字数制限はとくに設定されていないとのことですが、
4000文字を超えるとエラーが発生してしまいます。
（コメント・スペース・改行含む、構文・全角半角の区別無し）
独自CSSに制限事項がありましたら教えていただけますでしょうか。
返信数 (2)
0
-
×
└
Gamerchサポート◆rfiYrD9mT6
No.101180008
通報
大変失礼致しました。
通常にご利用される分には十分な量と認識しておりましたが、現在4000文字を制限とさせていただいております。
大変ご迷惑をお掛けしますが、独自classの量を減らしていただくか、圧縮をお願いいたします。
CSS圧縮につきましては、オンラインでできるwebサイトなどで可能です。
「CSS 圧縮」で検索するといくつか対応サイト様が出てくるのでご参考にしていただければ幸いです。
引き続きGamerchをよろしくお願いいたします。0-
×
└
774@Gamerch
No.101181677
通報
回答ありがとうございますm(__)m
CSS圧縮や構文見直し等で調整したいと思います。
またこのページのテーブルヘッダーの背景色設定の項目についてですが、
「background」で色を指定してしまうと、COLSORT:を使用した際ソートアイコンが消えてしまうため、
「background-color」と記述した方が良いと思います。0
-
×
└
774@Gamerch
No.101181677
通報
独自cssで外部スタイルシートをいれることはできますか?
返信数 (2)
0
質問です。
CSSの記述ですが、記述できる文字数に制限などありますでしょうか？
562文字入れていますが保存しようとするとエラーとなってしまいます。
一応、書きたい記述は既存の構文を削除してからだと
記載も保存もできるのですが・・
記述の内容はBOXなのですが同じようなのをいくつも記載している使用方法です。
お教えいただけます様にお願い致します。
CSSの記述ですが、記述できる文字数に制限などありますでしょうか？
562文字入れていますが保存しようとするとエラーとなってしまいます。
一応、書きたい記述は既存の構文を削除してからだと
記載も保存もできるのですが・・
記述の内容はBOXなのですが同じようなのをいくつも記載している使用方法です。
お教えいただけます様にお願い致します。
返信数 (1)
0
-
×
└
Gamerchサポート◆rfiYrD9mT6
No.101010476
通報
独自CSSの文字数制限はとくに設定しておりません。
恐れ入りますが、不具合の可能性も有りますのでどのようにエラーになってしまうのか詳しくお聞かせ願えないでしょうか？
宜しければGamerchサポートメールまでご連絡お願いいたします。0
テーブルについて、以下3件のCSSはどのようになりますか。
①テーブルヘッダの背景色の設定
②偶数行の背景色の設定
③行の背景色が変わるマウスオーバーの設定
いくつか調べましたが、わからなかったので、教えていただけますでしょうか。
①テーブルヘッダの背景色の設定
②偶数行の背景色の設定
③行の背景色が変わるマウスオーバーの設定
いくつか調べましたが、わからなかったので、教えていただけますでしょうか。
返信数 (3)
0
-
×
└
Gamerchサポート◆rfiYrD9mT6
No.99597052
通報
コメントありがとうございます！あまりレイアウト崩れや不具合の原因にならなそうでしたので上に掲載させていただきました！ご参考にお願いいたしますmOm0
-
×
└
774@Gamerch
No.99603343
通報
ありがとうございます！
早速ヘッダーの背景色を設定してみましたが、ソートアイコン｢^｣が見えなくなりました。
これはどのようにしたら見えるようになりますか。0
-
×
└
774@Gamerch
No.99603343
通報
-
×
└
Gamerchサポート◆rfiYrD9mT6
No.99606914
通報
さっそくご利用いただけて嬉しいです！
ソートアイコンの消失は不具合でございます…。こちらを直すにはまだ時間がかかるそうなので、ご不便をおかけしますが改修までもう少しお待ちいただけると幸いです(><;)0
こんばんは。
独自ＣＳＳで、ＤＢの中段を３列にしたいのですが、できますでしょうか？
ちょっと挑戦してみたのですが、断念してしまいました。。。
できる方法があれば教えてください。
よろしくお願いします。
独自ＣＳＳで、ＤＢの中段を３列にしたいのですが、できますでしょうか？
ちょっと挑戦してみたのですが、断念してしまいました。。。
できる方法があれば教えてください。
よろしくお願いします。
返信数 (3)
0
レイアウトを完全に自由にできるわけではないんですね？？
トップページのレイアウトでdivブロックを使ってレイアウトすることはできないんでしょうか？
あとDBってことはデータベース形式でつくったページだけなのですか？
トップページのレイアウトでdivブロックを使ってレイアウトすることはできないんでしょうか？
あとDBってことはデータベース形式でつくったページだけなのですか？
返信数 (1)
0
-
×
└
Gamerchサポート◆rfiYrD9mT6
No.97800390
通報
独自にID付与することで制御は可能となっています。
https://howto.gamerch.com/HTML%E3%83%9E%E3%83%BC%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97%E4%B8%80%E8%A6%A7#content_1_17
またDBだけではなく通常のWiki型のページも適用されます。（上記の独自CSSは他の方が使っている例となります）
例えばlistのCSSを設定すると、個別だけではなく全体のページにも適用されてしまいますので、個別に適用したい場合は上記のIDを付与してください。0
削除すると元に戻すことは出来ません。
よろしいですか？
今後表示しない
削除しました。
このWikiに関するツイート
閉じる
1件の新しいツイートがあります
- 関連するツイートはありません
古いTweetをもっと見る
閉じる
