CSSによるDBリストのカスタマイズ
最終更新日時 :
1人が閲覧中
CSSによるDBリストのカスタマイズ
- 「Wiki管理」＞「基本設定」＞「デザイン設定」画面の「独自CSS」の「パソコン用」で以下の指定をする
- DBテーブルデータ部の文字色の変更（使うことはないと思いますが…）
/*DBテーブルデータ部 文字*/
.mu__wikidb-list .mu__table table td{ color:#09e; }
- 縞々の色を変えたいときに指定（以下は、デフォルトと同じ設定）
(注)マウスオーバーと一緒に設定するときは、こちらを先に記述する必要があります
/*DBテーブル行 縞々*/
.mu__wikidb-list .mu__table table tr:nth-child(odd) td{ background-color:#fff; }
.mu__wikidb-list .mu__table table tr:nth-child(even) td{ background-color:#fcfcfc; }
- DBテーブルにマウスをかざすと行がグレーになる設定 【お勧め設定】
/*DBテーブル行 マウスオーバー*/
.mu__wikidb-list .mu__table table tr:hover td{ background-color:#f5f5f5; }
- DBテーブルの隙間を狭くする
/*DBテーブルの隙間 デフォルト8px*/
.mu__wikidb-list .mu__table table th{ padding:2px 2px 8px; } /*ソート用に下だけ8pt*/
.mu__wikidb-list .mu__table table td{ padding:1px 2px; } /*[上下][左右]*/
- DBテーブルの指定カラムを横スクロール時に左に固定する
プレビューでは利きません 【お勧め設定】
/*DBテーブルの指定カラムを横スクロール時に左に固定*/
.mu__wikidb-list .mu__table table th:nth-child(4){ position:sticky; left:0; }
.mu__wikidb-list .mu__table table td:nth-child(4){ position:sticky; left:0; }
表示例
本サイトは、上記CSSを設定しています
DB
| 画像 | 名前 | レアリティ | 文字列型（必須） | 文字列型（任意） | 整数型（必須） | 整数型（任意） | 小数型（必須） | 小数型（任意） | 長文型（必須） | 長文型（任意） | 選択型（必須） | 選択型（任意） |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
 | １件目 | ★４ | ほげ | 「WikiDB管理のコツ」 | 0 | 0.00 | ほげ~~ふが | 1 2 | ２選択２ | |||
| ２件目 | ★４ | ふが | 「DBレコード管理ページのコツ」 | 0 | 0.00 | ほげ~~ふが | 1 2 | ２選択２ | |||
| ３件目 | ★２ | はふ | 「[[DBレコード管理ページのコツ]]」~~ 改行しない | 0 | 0.00 | ほげ~~ふが | 1 2 | ２選択２ |
TABLE
| ヘッダ１ | ヘッダ2 |
|---|---|
| データ1 | データ2 |
コメント (CSSによるDBリストのカスタマイズ)
この記事を作った人
編集者紹介
アラカンつるっぱげおやじ
新着スレッド(Gamerch Wikiのコツ)
