英傑大戦wiki
英傑大戦wiki

CSSカスタマイズ管理・編集要項


はじめに

「CSS」とは「カスケーティング・スタイル・シート」（Cascading Style Sheets）の略称で、
ウェブページの修飾を指定・指示するための「WWWC」に勧告された仕様になります。

CSSカスタマイズについて

atwikiでは管理者権限に与えられたページデザインに関する「CSSカスタマイズ」が用意されています。
「アットウィキ(@WIKI)ご利用ガイド」の「管理画面/デザイン/CSSカスタマイズ」に使用方法の詳細が記されています。

atwikiの構造

通常のページ編集時の「表組み」（テーブル）を例として記します。

  • 編集ページにて「表組み」を記述する場合、以下のように記述します。
編集時では、以下のように記述します。

|a0|a1|a2|

通常閲覧時には、上記のatwiki用の構文が以下のようにシステム側にて変換されます。

<table>
<tr class="atwiki_tr_1" > <!--0-0--><td style="">a1</td>
<!--0-1--><td style="">a2</td>
<!--0-2--><td style="">a3</td></tr>
</table>

ウェブブラウザで以下のように閲覧できます。
0 1 2

  • 表組みで「ヘッダ行」がある場合は編集時、変換時、閲覧時が以下のようになります。
編集時では、以下のように記述します。

|h0|h1|h2|h
|a0|a1|a2|

通常閲覧時には、上記のatwiki用の構文が以下のようにシステム側にて変換されます。

<table>
<thead><tr class="atwiki_tr_1" > <!--0-0--><th style="">h0</th>
<!--0-1--><th style="">h1</th>
<!--0-2--><th style="">h2</th></tr></thead>
<tr class="atwiki_tr_2" > <!--1-0--><td style="">a1</td>
<!--1-1--><td style="">a2</td>
<!--1-2--><td style="">a3</td></tr>
</table>

ウェブブラウザで以下のように閲覧できます。
h0 h1 h2
a0 a1 a2

上記の簡素に記述した場合、左詰めの表組みが生成されるだけです。

CSSの記述方法とその考え方

atwikiでは、利用者にある程度の表現方法の創造性を与えるための「プラグイン」が用意されています。

ここで上記の簡素な表組みに変化を与える方法を記述します。
「アットウィキ(@WIKI)ご利用ガイド」>「プラグイン一覧」の中の
プラグイン「cssクラスをdivで指定(divclass)」
を用います。

  • 武将カードページに使われている「プラグイン」について
すでに武将カードページの編集時の表組みにて目にされていると思われるプラグインがあります。

#divclass(cardData){
||||h
～
|BGCOLOR(#e0e0e0):|>||
}

上記の編集時のプラグイン「divclass」の「武将カードデータ表組み」が
編集時には以下のようになります。
「cardData」はクラス名として重要な役割が与えられています。

#divclass(cardData){
「武将カードデータ表組み」
}

変換時には以下のようになります。

<div class="atwiki_plugin_divclass cardData" ><!--@@@@@-->
「武将カード情報のテーブル」
</div>

閲覧時には以下のように表示されます。
HTMLタグの「<div class="atwiki_plugin_divclass cardData">」「</div>」は表示されません。

「武将カードデータ表組み」

上記のようになって、「武将カードデータ表組み」として表示されています。

しかし、これだけでは「武将カードデータ表組み」として閲覧に耐えうる表示設定になっていません。
事前に専用の「CSS」の構文を「カスタマイズCSS」に追加編集されているからです。

  • 「武将カードデータ表組み」専用の「CSS」について
事前に作成されていたCSSは以下のようになっています。

/* 武将カードデータ表組み用css設定 START */
#wikibody .cardData{
width: auto;
}
#wikibody .cardData table{
width: 100%;
background-color: #ffffff;
}
/*
書式指定行としてヘッダ行を代用しています。
書式指定行のヘッダを非表示する場合は、
thタグに「visibility: collapse;」を設定します。*/
#wikibody .cardData table thead{
visibility: collapse;
}
#wikibody .cardData table th{
visibility: collapse;
}
#wikibody .cardData table th:nth-of-type(1){
width: 100px;
}
#wikibody .cardData table th:nth-of-type(2){
width: 150px;
}
#wikibody .cardData table th:last-of-type{
width: auto;
}
/* 武将カードデータ表組み用css設定 END */

一目では何を設定しているかわからないので順を追って説明します。

CSSの基礎の記述方法は各種の説明書籍・説明サイト等に詳しく記述されています。
記述ルールは、下記が基準構成になります。

クラス名{
スタイル対象名: 属性、値;
}

「クラス名」部分は、左から右への記述順が、親要素から子要素への影響順になります。

クラス名に多く記述されている「#wikibody」は、
atwiki標準設定で閲覧されているページの主体部分を配下に置いています。
そのため利用者が編集・閲覧するための必須の宣言となります。

次のクラス名には「.cardData」を記述し、これがプラグイン「divclass(cardData)」に指定してあるクラス名「cardData」と紐づけされます。

そして「.cardData」以下に記述してあるタグ名やクラス名が「武将カードデータ表組み」の見栄えを構成していきます。

#wikibody .cardData{
width: auto;
}
は、ページ管理としての
「#wikibody」に含まれる
「<div class="atwiki_plugin_divclass cardData" >」の「横幅をauto」にしています。
通常閲覧時では表示されていませんが「#wikibody」の横幅に合わせて自動計算によりほぼ限界幅（「width: 100%;」でも可）になります。

#wikibody .cardData table{
width: 100%;
background-color: #ffffff;
}
は、上記の<div>の横幅限界（100%）まで、タグ「table」の横幅を広げ、背景色を「白色」と設定しています。
この時点で編集記述した武将カード情報表組みは横幅限界まで広がっています。

さらにその先のクラス設定は「武将カード情報表組み」の各カラムの横幅やヘッダ行の非表示の設定になります。
記述内容は複雑ではないので割愛させていただきます。

/*
書式指定行としてヘッダ行を代用しています。
書式指定行のヘッダを非表示する場合は、
thタグに「visibility: collapse;」を設定します。*/
#wikibody .cardData table thead{
visibility: collapse;
}
#wikibody .cardData table th{
visibility: collapse;
}
#wikibody .cardData table th:nth-of-type(1){
width: 100px;
}
#wikibody .cardData table th:nth-of-type(2){
width: 150px;
}
#wikibody .cardData table th:last-of-type{
width: auto;
}
/* 武将カードデータ表組み用css設定 END */

本題


表組み用CSSの記述例

表組みの横幅を最大まで表示させたい

クラス名は任意設定。
クラス名例：tableWidthMAX
  • ページ編集側記述例：

#divclass(tableWidthMAX){
|h0|h1|h2|h
|a0|a1|a2|
}
  • カスタマイズCSS記述例：

/* 表組み横幅最大用css設定 START */
#wikibody .tableWidthMAX{
width: auto;
}
#wikibody .tableWidthMAX table{
width: 100%;
}
/* 表組み横幅最大用css設定 END */

表組み横幅を最大、カラム一部を横幅指定させたい

クラス名は任意設定。
クラス名例：tableWidthMAX_Col01W150
  • ページ編集側記述例：

#divclass(tableWidthMAX_Col01W150){
|h0|h1|h2|h
|a0|a1|a2|
}
  • カスタマイズCSS記述例：

/* 表組み横幅最大・カラム01_W150px用css設定 START */
#wikibody .tableWidthMAX_Col01W150{
width: auto;
}
#wikibody .tableWidthMAX_Col01W150 table{
width: 100%;
}
#wikibody .tableWidthMAX_Col01W150 table th:nth-of-type(1){
width: 150px;
}
/* 表組み横幅最大・カラム01_W150px用css設定 END */

表組み横幅を最大、ヘッダ行非表示、カラム一部を横幅指定させたい

クラス名は任意設定。
クラス名例：tableWidthMAX_TheadNO_Col01W150
  • ページ編集側記述例：

#divclass(tableWidthMAX_TheadNO_Col01W150){
|h0|h1|h2|h
|a0|a1|a2|
}
  • カスタマイズCSS記述例：

/* 表組み横幅最大・ヘッダ行非表示・カラム01_W150px用css設定 START */
#wikibody .tableWidthMAX_TheadNO_Col01W150{
width: auto;
}
#wikibody .tableWidthMAX_TheadNO_Col01W150 table{
width: 100%;
}
#wikibody .tableWidthMAX_TheadNO_Col01W150 table thead{
visibility: collapse;
}
#wikibody .tableWidthMAX_TheadNO_Col01W150 table th:nth-of-type(1){
width: 150px;
}
/* 表組み横幅最大・ヘッダ行非表示・カラム01_W150px用css設定 END */

追加希望カスタマイズCSS


汎用性を持たせた表組み用css、ヘッダあり、第1列目の1カラム目から5カラム目の横幅をそれぞれ50px・100px・150px・200pxにする

  • クラス名：Col01W50 Col02W50 Col03W50 Col04W50 Col05W50
  • クラス名：Col01W100 Col02W100 Col03W100 Col04W100 Col05W100
  • クラス名：Col01W150 Col02W150 Col03W150 Col04W150 Col05W150
  • クラス名：Col01W200 Col02W200 Col03W200 Col04W200 Col05W200
  • 使用プラグイン設定例：#divclass(Col01W100,Col02W50,Col03W200){}
  • 使用プラグイン設定例：#divclass(Col01W100,Col02W200,Col03W100,Col04W200,Col05W100){}
  • 使用プラグイン設定例：#divclass(Col01W100,Col02W100,Col03W100,Col04W100,Col05W100){}
また、カスタマイズCSS「tableWidthMAX」（表組幅最大表示用）との組み合わせ例：
  • 使用プラグイン設定例：#divclass(tableWidthMAX,Col01W200,Col02W100){}
  • プラグイン対象：表組みの横幅（px）を各カラムごとに指定（1カラム目から5カラム目まで）
th:nth-of-type(n)の「n」を指定すれば増設可能
増設例：6カラム目への設定を増やしたい
#wikibody
.Col06W50 table th:nth-of-type(6){
width: 50px;
}
  • 追加希望内容：汎用性を持たせた表組み用cssのテーブルヘッダ
  • カスタマイズCSS記述内容：

/* 表組みのテーブルヘッダ用css設定 カラム01～05、横幅50px */
#wikibody
.Col01W50 table th:nth-of-type(1){
width: 50px;
}
#wikibody
.Col02W50 table th:nth-of-type(2){
width: 50px;
}
#wikibody
.Col03W50 table th:nth-of-type(3){
width: 50px;
}
#wikibody
.Col04W50 table th:nth-of-type(4){
width: 50px;
}
#wikibody
.Col05W50 table th:nth-of-type(5){
width: 50px;
}

/* 表組みのテーブルヘッダ用css設定 カラム01～05、横幅100px */
#wikibody
.Col01W100 table th:nth-of-type(1){
width: 100px;
}
#wikibody
.Col02W100 table th:nth-of-type(2){
width: 100px;
}
#wikibody
.Col03W100 table th:nth-of-type(3){
width: 100px;
}
#wikibody
.Col04W100 table th:nth-of-type(4){
width: 100px;
}
#wikibody
.Col05W100 table th:nth-of-type(5){
width: 100px;
}

/* 表組みのテーブルヘッダ用css設定 カラム01～05、横幅150px */
#wikibody
.Col01W150 table th:nth-of-type(1){
width: 150px;
}
#wikibody
.Col02W150 table th:nth-of-type(2){
width: 150px;
}
#wikibody
.Col03W150 table th:nth-of-type(3){
width: 150px;
}
#wikibody
.Col04W150 table th:nth-of-type(4){
width: 150px;
}
#wikibody
.Col05W150 table th:nth-of-type(5){
width: 150px;
}

/* 表組みのテーブルヘッダ用css設定 カラム01～05、横幅200px */
#wikibody
.Col01W200 table th:nth-of-type(1){
width: 200px;
}
#wikibody
.Col02W200 table th:nth-of-type(2){
width: 200px;
}
#wikibody
.Col03W200 table th:nth-of-type(3){
width: 200px;
}
#wikibody
.Col04W200 table th:nth-of-type(4){
width: 200px;
}
#wikibody
.Col05W200 table th:nth-of-type(5){
width: 200px;
}



実装済みカスタマイズCSS


計略リストデータ表組み用CSS

  • クラス名：stratData
  • 使用プラグイン設定：#divclass(stratData){}
  • プラグイン対象：計略リストページ用の装飾
  • 追加希望内容：作成中の計略リストページ用の装飾
  • カスタマイズCSS記述内容：

/* 計略リストデータ表組み用css設定 START */
#wikibody .stratData{
width: auto;
}
#wikibody .stratData table{
width: 100%;
}
#wikibody .stratData table thead{
visibility: collapse;
}
#wikibody .stratData table th:nth-of-type(1){
width: 100px;
}
#wikibody .stratData table th:nth-of-type(2){
width: auto;
}
#wikibody .stratData table th:nth-of-type(3){
width: 100px;
}
/* 計略範囲画像の周囲に4px分の隙間を作る */
#wikibody .stratData table th:nth-of-type(3) img{
margin: 4px;
}
/* 計略リストデータ表組み用css設定 END */

汎用性を持たせた表組み用css、ヘッダあり、第1列目のカラムの横幅を100px

  • クラス名：tableWidthMAX_Col01W100
  • 使用プラグイン設定：#divclass(tableWidthMAX_Col01W100){}
  • プラグイン対象：汎用性を持たせた表組み用css、ヘッダあり、第1列目のカラムの横幅を100px
  • 追加希望内容：汎用性を持たせた表組み用css、ヘッダあり、第1列目のカラムの横幅を100px
  • カスタマイズCSS記述内容：

/* 表組み横幅最大・カラム01_W100px用css設定 START */
#wikibody .tableWidthMAX_Col01W100{
width: auto;
}
#wikibody .tableWidthMAX_Col01W100 table{
width: 100%;
}
#wikibody .tableWidthMAX_Col01W100 table th:nth-of-type(1){
width: 100px;
}
/* 表組み横幅最大・カラム01_W100px用css設定 END */

汎用性を持たせた表組み用css、ヘッダあり

  • クラス名：tableWidthMAX
  • 使用プラグイン設定：#divclass(tableWidthMAX){}
  • プラグイン対象：汎用性を持たせた表組み用css、ヘッダあり
  • 追加希望内容：汎用性を持たせた表組み用css、ヘッダあり
  • カスタマイズCSS記述内容：

/* 表組み横幅最大用css設定 START */
#wikibody .tableWidthMAX{
width: auto;
}
#wikibody .tableWidthMAX table{
width: 100%;
}
/* 表組み横幅最大用css設定 END */

武将カードデータ表組み用css設定

  • クラス名：cardData
  • 使用プラグイン設定：#divclass(cardData){}
  • プラグイン対象：武将カードデータ表組み
  • css効果：

英傑大戦wiki内の表組み全般

  • css効果：表組み表示の視認性向上

タグ：

+ タグ編集
  • タグ：
タグの更新に失敗しました
エラーが発生しました。ページを更新してください。
ページを更新
「CSSカスタマイズ管理・編集要項」をウィキ内検索
最終更新：2022年07月11日 22:16