CSSカスタマイズ - oreoreoreo @ ウィキ

デザインテンプレート

基本ウィキペディア風（2カラム）ver2だが、CSSカスタマイズをスマホ表示に適用するなら
Uikit レスポンシブ (2カラム)への変更が必要と思われる。

レスポンシブの反映が遅いため、レスポンシブ→ウィキペディア風に変えた直後でも
一時的にスマホ表示でCSSカスタマイズが適用されていたりすることがある。

CSSカスタマイズ

フロート右寄せ

.float-right{float:right;}
 

基本情報をフロートで右寄せする。
トップページのツイッターにも使っている。
スマホ表示にすると画面横幅が狭くて重なりバグってしまうことになるが、
ウィキペディア風デザインでスマホ表示の場合はCSSカスタマイズが適用されない仕様なので問題ない。
#divclass(float-right){本文}で実装。

@media(min-width:751px) {.float-right{float:right;}}
 

フロートで右寄せをPCのみ適用する。（レスポンシブ対策）
#pc{ #divclass(float-right){ }　と書いてもバグるだけなのでCSS側で制限しておく。

テーブル中身中央寄せ

#wikibody table th, #wikibody table td{
text-align:center;
vertical-align:middle;
}

テーブルセルの中身をすべて中央寄せ。

左右は基本左寄せだが、
当wikiではほとんどの表に対してセル1つ1つCENTER:して中央寄せしており、デフォで中央寄せが好ましい。
表全体を#center{}で囲っても可能。
スマホ表示で適用されなくても#center{}でなんとかなる。

上下は一般的なサイトだとデフォで中央寄せになるが、アットウィキはデフォで上寄せ仕様。
当wikiではほとんどの表に対してセル1つ1つMIDDLE:して中央寄せしており、デフォで中央寄せが好ましい。

ウィキペディア風CSS

レスポンシブデザインにした上で見た目をウィキペディア風にするCSS。
まだこれで完璧ではないが、不要な物まで全コピーは推奨されない。
デベロッパーツールからCSSファイルを拾って観察すべし。

文字色

*{color:#000;}
 

薄い文字色を濃くする。

表

#wikibody table {
  border: 1px solid #ccc;
  margin: 2px;
  padding: 2px;
  background-color: white;
  display: table;
  border-collapse: separate;
  box-sizing: border-box;
  text-indent: initial;
  unicode-bidi: isolate;
  border-spacing: 2px;
 }
#wikibody table th, #wikibody table td{
  text-align:center;
  vertical-align:middle;
  background-color: #f9f9f9;
  border:solid 2px white;
 }
 

表の淵を灰色、セルの境界を白にする。
中央寄せも含まれている。

水平線

hr {
    height: 1px;
    color: #aaa;
    background-color: #aaa;
    border: 0;
    margin: .2em 0 .2em 0;
 }
 

----で表示される水平線をグレーにする。

見出し

.atwiki-contents h1, .atwiki-contents h2, .atwiki-contents h3, .atwiki-contents h4, .atwiki-contents h5, .atwiki-contents h6 {
  color: black;
  background: none;
  font-weight: normal;
  margin: 0;
  padding-top: .5em;
  padding-bottom: .17em;
  border-left: 0px;
  border-bottom: 1px solid #aaa;
 }
 .atwiki-contents h1 { font-size: 188%; }
 .atwiki-contents h1 .editsection { font-size: 53%; }
 .atwiki-contents h2 { font-size: 150%; }
 .atwiki-contents h2 .editsection { font-size: 67%; }
 .atwiki-contents h2 a {color: #0066dc;}
 .atwiki-contents h3, .atwiki-contents h4, .atwiki-contents h5, .atwiki-contents h6 {
  border-bottom: none;
  font-weight: bold;
 }
 .atwiki-contents h3 { font-size: 132%; }
 .atwiki-contents h3 .editsection { font-size: 76%; font-weight: normal; }
 .atwiki-contents h4 { font-size: 116%; }
 .atwiki-contents h4 .editsection { font-size: 86%; font-weight: normal; }
 .atwiki-contents h5 { font-size: 100%; }
 .atwiki-contents h5 .editsection { font-weight: normal; }
 .atwiki-contents h6 { font-size: 80%;}
 .atwiki-contents h6 .editsection { font-size: 125%; font-weight: normal; }
 .atwiki-contents .editsection {
  float: right;
  margin-left: 5px;
 }
 

見出しを白背景黒文字に変更。