カスタムCSS/旧版（~2020年10月14日) - felios @ wiki

カスタムCSS（~2020/10/14）

2020/10/14まで本wikiで使用していたカスタムCSS
ウィキペディア風（2カラム）ver2での使用を想定

#wikibody {
  margin-bottom: 80px;
}

h2 {
  background: white;
  border-bottom: 3px solid #888;
  border-right: 2px solid #333;
  margin: 13px 5px;
  padding: 0px;
  font-weight: bold;
  color: #333;
} 
h3 {
  background: white;
  border-top:0px solid white;
  border-bottom:2px solid #dfdfdf;
  border-left: 0px solid white;
  border-right: 2px solid #dadada;
  margin: 10px 8px;
  padding-left:10px;
  font-weight: bold;
  color: #555;
} 

#wikibody pre {
  padding: 0.5em;
  font-size: 115%;
  white-space: pre-wrap;
}
h2 ~ ul {
  margin-top: -1em;
}
div + ul, h2 + ul, h3 + ul, h4 + ul {
  margin-top: 0;
}
#wikibody a:link, a:visited, a:hover, a:active {
  color: #002bff;
}

#wikibody > h2:first-child {
 display: none;
}
#wikibody table td {
  background-color: #f0f0f0;
  vertical-align: middle;
}
#wikibody 
table.tablesorter tr.even td {
  background-color: #f9f9f9 !important;
}
#menubar ul {
  font-size: 100%;
}

#wikibody div.ctable {
  width: 700px;
  border: 1px solid #ccc;
}
#wikibody div.ctable > table {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
}
#wikibody div.ctable > pre {
  box-sizing: border-box;
  width: 100%;
  margin-top: 0;
  margin-bottom: 2px;
  background-color: #f0f0f0;
  border: 4px solid white;
  border-top-width: 2px;
  line-height: 1.2em;
}
#wikibody div.ctable.double {
  width: 100%;
  max-width: 1400px;
}
#wikibody div.ctable.double > table {
  table-layout: fixed;
  width: 100%;
}
#wikibody div.ctable.double > pre {
  width: 100%;
}

更新履歴

2020/4/7

• ページ下部に余白を設定

2020/1/8

• 整形済テキストの行間を拡大

2019/12/16

• カード情報の表示の仕方の変更に伴う修正
• !importantを無くすため、ID指定を追加

2019/12/15

• カード情報を表示するテーブルの設定を追加
• CSSの整形

2019/12/13

• ウィキペディア風テンプレートではh1は未使用のため設定を削除
• テーブル内の文字を縦方向に中央揃えするよう変更

2019/12/4

• 整形済テキストの設定を追加

2019/12/3

• ページ上部に自動で表示されるページ名を削除

2019/12/1

• リストとリストの間に改行を挟んだ場合の余白を縮小

2019/11/30

• テンプレートをウィキペディア風テンプレートに変更
• リンクの色の固定、テーブルデザインの変更など

詳細

#wikibody {
  margin-bottom: 80px;
}

• ページ下部に余白を設定

h2{
  background: white;
  border-bottom: 3px solid #888;
  border-right: 2px solid #333;
  margin: 13px 5px;
  padding: 0px;
  font-weight: bold;
  color: #333;
} 
h3{
  background: #white;
  border-top: 0px solid #white;
  border-bottom: 2px solid #dfdfdf;
  border-left: 0px solid #fff;
  border-right: 2px solid #dadada;
  margin: 10px 8px;
  padding-left: 10px;
  font-weight: bold;
  color: #555;
} 

• それぞれ大見出し、中見出しのデザインを変更
  • 現在小見出しはメニューでしか使用していない

#wikibody pre {
  padding: 0.5em;
  font-size: 115%;
  white-space: pre-wrap;
}

• 整形済テキスト（上のように点線で囲まれたテキスト）のデザインを変更
  • 点線とテキストの間の余白を縮小
  • フォントサイズを拡大
  • テキストがページの端に来た時に改行して表示されるよう変更

h2 ~ ul {
  margin-top: -1em;
}
div + ul, h2 + ul, h3 + ul, h4 + ul {
  margin-top: 0;
}

• 大見出しの後のリストの位置を上に詰める
  そのままだとリストが大見出しや中見出し等に重なるため、本文や見出しの直後にあるリストの位置はそのままとする
  • 本wikiではリストとリストの間に改行を挟んだ場合の余白を狭めるために使用している

#wikibody a:link, a:visited, a:hover, a:active {
  color: #002bff;
}

• リンクの色をデフォルトの色に固定する

#wikibody > h2:first-child {
  display: none;
}

• ウィキペディア風テンプレート使用時にページ上部に自動で表示されるページ名を削除
  • 本wikiでは代わりにページ名（カード名の場合ルビを振ったもの）を手動で挿入している

#wikibody table td {
  background-color: #f0f0f0;
  vertical-align: middle;
}

• テーブルの背景色をやや暗くする
  • ウィキペディア風テンプレートではテーブルの背景色がページの背景色と同じであり、外枠もないため、そのままではテーブルがページ背景と一体化する
• テーブルが２列以上あるとき、テーブル内の文字を縦方向に中央揃えする

#wikibody 
table.tablesorter tr.even td {
  background-color: #f9f9f9 !important;
}

• テーブルの偶数行の背景色を更に暗くする
  • 本wikiではカードのテキストなどもテーブルで書いているため、ソート機能の付いたテーブルのみを対象とする

#menubar ul {
  font-size: 100%;
}

• ウィキペディア風テンプレートのメニューの文字が小さすぎるため、通常の大きさに戻す

#wikibody div.ctable {
  width: 700px;
  border: 1px solid #ccc;
}
#wikibody div.ctable > table {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
}
#wikibody div.ctable > pre {
  box-sizing: border-box;
  width: 100%;
  margin-top: 0;
  margin-bottom: 2px;
  background-color: #f0f0f0;
  border: 4px solid white;
  border-top-width: 2px;
  line-height: 1.2em;
}
#wikibody div.ctable.double {
  width: 100%;
  max-width: 1400px;
}
#wikibody div.ctable.double > table {
  table-layout: fixed;
  width: 100%;
}
#wikibody div.ctable.double > pre {
  width: 100%;
}

• カード個別ページのカード情報（ID、画像、テキスト等）を表示するエリアのデザインを変更
  • ID、画像、イラストレーターはテーブル、テキストは整形済みテキストで表示するため、テーブルと整形済みテキストを纏めて一つのテーブルのように表示する
  • テーブルが２列以上の場合、列の横幅が均等になるようにする。