独自CSS一覧

(33コメント)  

タグ一覧

>
最終更新日時：
テンプレートのデザインに飽きたら、独自CSSを活用してみましょう。
他のWikiとは違ったデザインにすることができます。
※サイトによってはレイアウトが崩れることがありますので、個人の責任において適用をお願いいたします。
また要望などもありましたら下記コメント欄にご記載願います。


独自CSS導入方法

独自CSSを導入するには「Wiki管理画面」で行う必要があります。
右上の「アカウント」をクリックして、「このWiki管理画面」を選択してください。



Wikiの管理画面から右メニューの「デザイン・カラムの設定」を選択してください。
「独自CSS」の「編集する」をクリックし下記のCSSをコピー＆ペーストで貼りつけて、画面下部にある「登録」ボタンを押すだけで導入は完了です。
もし元に戻したい場合には、先ほど貼りつけたCSSを削除して「登録」ボタンを押せば、元に戻すこともできます。

独自CSSはPCとスマホ用、それぞれ設定する必要がありますので、用途に応じて設定願います。

★独自class id 付与構文

また独自IDを付与することで更に詳細な設定も可能となっております。
変換用マークアップ説明利用例
#divclass(クラス名){
}		<div class="クラス名">を表示#divclass(original_css_class){
}
#divid(id名){
}		<div id="id名">を表示#divid(original_css_id){
}

DB上段・中段を2列にし、下段見出しを太文字にする方法（PC用）

上記の独自CSSをまとめたものです。
/* ---------- 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;
}
/* ----------------------------------------------- */

DB上段・中段を2列にし、下段見出しを太文字にする方法（PC固定レイアウト用）

PCで固定レイアウトを使用する場合、現状の2列だと領域からはみ出してしまいますので、こちらをお使いください。
/* ----- 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列にし、下段見出しを太文字にする方法（スマホ用）

以前の独自CSSの場合、スマホで編集すると右側がスライドできずに編集できないという問題がありましたので、こちらに差し替えをお願いいたします。
/* ----- 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;
}
/* ----------------------------------------------- */

文字ボタンを作る

独自CSS

下記のCSSを独自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;
}
/* ----------------------------------------------- */

Wikiへの記載方法

実際にWikiに編集する場合には下記のように記載をいたします

文字ボタン

Wikiを初めて立ち上げる方はコチラを参考に！！

Wikiへの記載方法

#divclass(link_button){
[[Wikiを初めて立ち上げる方はコチラを参考に！！>作成してみよう！]]
}

スマホメニュー（上部）の一か所背景色を変える方法（スマホ用）

特に目立たせたいメニューの背景色を変更できます。
下記の例では2段目の一番左の背景色を変更しています。

数字を変更することで、好きな箇所に変更可能です。
  • menu2：2段目
  • nth-child(1)：左から数えて1番目

/* ---------- メニューボタンの一部の背景色を変更 ---------- */
#ui_custom_menu ul.ui_cus_menu2 li:nth-child(1) a {
background: #999;
}
/* ----------------------------------------------- */

テーブル関連

テーブル（表）関連のレイアウト変更例です。

テーブルヘッダーの背景色設定

#cfe2f3が背景色となっています
/* ---------- テーブルヘッダーの背景色 ---------- */
th {
background: #cfe2f3 !important;
}
/* ----------------------------------------------- */

テーブル背景色を奇数偶数で色違いに設定

#ffedffが奇数となっています
#f5edffが偶数となっています
/* ---------- テーブル背景色を奇数偶数で色違いに設定 ---------- */
table tr:nth-child(2n+1) {background-color:#ffedff;} /* 奇数 */
table tr:nth-child(2n+0) {background-color:#f5edff;} /* 偶数 */
/* ----------------------------------------------- */

マウスオーバー時に行の背景色を変更する設定

#eeeeeeが背景色になります
/* ---------- マウスオーバー時に行の背景色を変更 ---------- */
table tr:hover td {
background-color: #eeeeee;}
/* ----------------------------------------------- */
コメント(33)
Twitter

コメント

  • WASI No.102927705 2018/08/15 (水) 20:59 通報
    　個々に書かれている独自CSSというのは、新しい携帯のWikiには適応できないのでしょうか？
    返信数 (1)
    0
    • × └ 774@Gamerch No.102944195 2018/08/20 (月) 10:59 通報
      コメントありがとうございます
      新しいサービスのwikiも独自CSSはご利用可能です
      ただこちらに掲載されている例は旧サービス用となっております。どのような独自CSS例が必要とされているのか検討中ですので、ご意見いただけると幸いです
      0
  • 774@Gamerch No.101417254 2017/10/27 (金) 21:00 通報
    シミュレーターのボタンの背景色を変えることはできないでしょうか？
    返信数 (1)
    0
    • × └ Gamerchサポート◆rfiYrD9mT6 No.101427953 2017/10/30 (月) 10:27 通報
      申し訳ございませんが、シミュレーターのボタンの背景色を変えるという機能はございません。ご了承のほどよろしくお願いいたします。
      0
  • shake No.101225890 2017/09/20 (水) 05:00 通報
    #divclass(link_button){
    }
    の独自CSSのソースに追加で自由に「ボタン文字・背景色」を引数として渡して設定できるようにするにはどのように表現すればよいですか？
    #divclass(link_button,ボタン文字色,背景色){
    }
    返信数 (2)
    0
    • × └ Gamerchサポート◆rfiYrD9mT6 No.101226681 2017/09/20 (水) 11:32 通報
      CSSの方で
      background-color: #○○○○○○;
      color: #○○○○○○;
      こちらの部分を変更してください。
      0
      • × └ shake No.101254516 2017/09/25 (月) 02:55 通報
        こんにちは。返信ありがとうございます。
        >background-color: #○○○○○○;
        >color: #○○○○○○;
        CSSの方で色を指定して決め打ちではなく、
        &color(#○○○○○○,#○○○○○○)
        のようにWiki構文で色を自由に指定したいのです。
        &color()構文はなぜ色を受け渡しできるのですか？
        Wiki構文を展開してHTMLとして表現するのは何となくわかります。
        どうすればCSSに色を渡せますか？
        N88BASIC、MSX-Cくらいならなんとなくわかります。
        0
  • shake No.101225874 2017/09/20 (水) 04:45 通報
    こんにちは。Wikiの構文でアンダーラインを引くものがありません。
    独自CSSを使ってアンダーラインの太さ、線の色を自由に設定できるものを書くにはどうすれば実現できますか？
    希望するのは以下のような形です
    divclass(underline,任意の線の太さ,任意の線の色){アンダーラインという文字列}
    参考にしたサイト
    https://techacademy.jp/magazine/9645
    <span style="border-bottom: solid 5px red;">アンダーライン</span>
    返信数 (7)
    0
    • × └ shake No.101225884 2017/09/20 (水) 04:51 通報
      &color(red,black){サンプル}
      は（）の中に色を書くと色を渡して文字の色を自由に設定できますが色を意味する変数のようなものが使われているのですか？
      具体的な内部的なラベルはどうなっているのですか？
      ※CSSはよくわかっていないと思います。
      0
    • × └ shake No.101225900 2017/09/20 (水) 05:14 通報
      https://saruwakakun.com/html-css/reference/border
      を後から見たのですが、アンダーラインの線種も指定できるようになると便利だと思います。
      点線、破線、二重線、蛍光ペン風などを指定できるとよいかなと。
      0
    • × └ Gamerchサポート◆rfiYrD9mT6 No.101226678 2017/09/20 (水) 11:31 通報
      %%%文字%%%
      上記の構文でアンダーラインが引けます。
      アンダーラインの構文は掲載されていなかったため、取り急ぎ掲載させていただきました。
      0
    • × └ 774@Gamerch No.101228825 2017/09/20 (水) 18:45 通報
      横から失礼します。
      #spanclass(){}のようなマークアップがあると便利だなと思いました。
      　
      主様はCSSに不慣れとのことですので宜しければ「」内のワード+CSSで検索してみてください。
      ＊下線を引く方法は下記の2パターンあります。
      ・テキスト自体に下線を引く「text-decoration」
      ・ボックス要素の下に線を表示する「border」
      ※点線、破線、二重線などのバリエーションも出てきます。
      　Androidブラウザでは表示できるtext-decorationのバリエーションが限られているのでご注意を。
      0
      • × └ 774@Gamerch No.101228847 2017/09/20 (水) 18:49 通報
        ＊蛍光ペン風はボックス要素に「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.101228911 2017/09/20 (水) 18:59 通報
        ＊ブロック要素を複数作ってインライン表示にする
        緑背景、青色破線
        ・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
      • × └ shake No.101254521 2017/09/25 (月) 02:59 通報
        例と解説をありがとうございます。
        自身のWikiの副管理人以上が閲覧できるページにログとして保管しました。
        後で調べてみようと思います。
        0
  • 774@Gamerch No.101176219 2017/09/11 (月) 17:20 通報
    下の方に同じような質問がありましたのでこちらで質問させていただきます。
    独自CSSの制限についてです。
    文字数制限はとくに設定されていないとのことですが、
    4000文字を超えるとエラーが発生してしまいます。
    （コメント・スペース・改行含む、構文・全角半角の区別無し）
    独自CSSに制限事項がありましたら教えていただけますでしょうか。
    返信数 (2)
    0
    • × └ Gamerchサポート◆rfiYrD9mT6 No.101180008 2017/09/12 (火) 11:27 通報
      大変失礼致しました。
      通常にご利用される分には十分な量と認識しておりましたが、現在4000文字を制限とさせていただいております。
      大変ご迷惑をお掛けしますが、独自classの量を減らしていただくか、圧縮をお願いいたします。
      CSS圧縮につきましては、オンラインでできるwebサイトなどで可能です。
      「CSS 圧縮」で検索するといくつか対応サイト様が出てくるのでご参考にしていただければ幸いです。
      引き続きGamerchをよろしくお願いいたします。
      0
      • × └ 774@Gamerch No.101181677 2017/09/12 (火) 17:56 通報
        回答ありがとうございますm(__)m
        CSS圧縮や構文見直し等で調整したいと思います。
        　
        またこのページのテーブルヘッダーの背景色設定の項目についてですが、
        「background」で色を指定してしまうと、COLSORT:を使用した際ソートアイコンが消えてしまうため、
        「background-color」と記述した方が良いと思います。
        0
  • tyau98 No.101166508 2017/09/09 (土) 22:17 通報
    独自cssで外部スタイルシートをいれることはできますか?
    返信数 (2)
    0
    • × └ Gamerchサポート◆rfiYrD9mT6 No.101174626 2017/09/11 (月) 11:47 通報
      外部サイトなどのスタイルシートは対応していないため、お手数ですが独自で書き込みお願いいたします。
      0
      • × └ tyau98 No.101184461 2017/09/13 (水) 04:32 通報
        返信ありがとうございます。
        了解いたしました。
        0
  • 774@Gamerch No.101009217 2017/08/15 (火) 00:43 通報
    質問です。
    CSSの記述ですが、記述できる文字数に制限などありますでしょうか？
    562文字入れていますが保存しようとするとエラーとなってしまいます。
    一応、書きたい記述は既存の構文を削除してからだと
    記載も保存もできるのですが・・
    記述の内容はBOXなのですが同じようなのをいくつも記載している使用方法です。
    お教えいただけます様にお願い致します。
    返信数 (1)
    0
    • × └ Gamerchサポート◆rfiYrD9mT6 No.101010476 2017/08/15 (火) 10:28 通報
      独自CSSの文字数制限はとくに設定しておりません。
      恐れ入りますが、不具合の可能性も有りますのでどのようにエラーになってしまうのか詳しくお聞かせ願えないでしょうか？
      宜しければGamerchサポートメールまでご連絡お願いいたします。
      0
  • 774@Gamerch No.99575810 2017/02/11 (土) 06:54 通報
    テーブルについて、以下3件のCSSはどのようになりますか。
    　
    ①テーブルヘッダの背景色の設定
    ②偶数行の背景色の設定
    ③行の背景色が変わるマウスオーバーの設定
    　
    いくつか調べましたが、わからなかったので、教えていただけますでしょうか。
    返信数 (3)
    0
    • × └ Gamerchサポート◆rfiYrD9mT6 No.99597052 2017/02/13 (月) 12:46 通報
      コメントありがとうございます！あまりレイアウト崩れや不具合の原因にならなそうでしたので上に掲載させていただきました！ご参考にお願いいたしますmOm
      0
      • × └ 774@Gamerch No.99603343 2017/02/13 (月) 22:48 通報
        ありがとうございます！
        早速ヘッダーの背景色を設定してみましたが、ソートアイコン｢^｣が見えなくなりました。
        これはどのようにしたら見えるようになりますか。
        0
      • × └ Gamerchサポート◆rfiYrD9mT6 No.99606914 2017/02/14 (火) 10:33 通報
        さっそくご利用いただけて嬉しいです！
        ソートアイコンの消失は不具合でございます…。こちらを直すにはまだ時間がかかるそうなので、ご不便をおかけしますが改修までもう少しお待ちいただけると幸いです(><;)
        0
  • 774@Gamerch No.98406438 2016/10/17 (月) 00:14 通報
    こんばんは。
    独自ＣＳＳで、ＤＢの中段を３列にしたいのですが、できますでしょうか？
    ちょっと挑戦してみたのですが、断念してしまいました。。。
    できる方法があれば教えてください。
    よろしくお願いします。
    返信数 (3)
    0
    • × └ Gamerchサポート◆rfiYrD9mT6 No.98407956 2016/10/17 (月) 09:08 通報
      文字の横幅が超えてしまうので、レイアウトが崩れてしまいます。
      大変申し訳ないですが、こちらからは対応いたしかねます mOm
      0
      • × └ 774@Gamerch No.98408610 2016/10/17 (月) 12:13 通報
        残念ですが、わかりましたー。
        ご返信ありがとうございました。
        0
      • × └ Gamerchサポート◆rfiYrD9mT6 No.98416678 2016/10/18 (火) 08:10 通報
        今後の要望（設定で列数を選択できるなど）としては承っておきますので
        引き続きよろしくお願いいたします
        0
  • Mix◆*0 No.97789207 2016/08/25 (木) 16:31 通報
    レイアウトを完全に自由にできるわけではないんですね？？
    トップページのレイアウトでdivブロックを使ってレイアウトすることはできないんでしょうか？
    あとDBってことはデータベース形式でつくったページだけなのですか？
    返信数 (1)
    0
    • × └ Gamerchサポート◆rfiYrD9mT6 No.97800390 2016/08/26 (金) 09:01 通報
      独自に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
goodランキングへ

削除すると元に戻すことは出来ません。
よろしいですか？

今後表示しない

名前
コメント（必須）
(300文字まで)
必ず「Gamerch ガイドライン」をご覧の上、書き込みをお願いします。
画像
sage機能

対象コメント

選択項目

詳細

※上記の内容はWiki管理者へ通報されます。

通報完了

通報内容を送信しました

エラー

エラーが発生しました

削除しました。
 このWikiに関するツイート  閉じる
1件の新しいツイートがあります
  • 関連するツイートはありません
 古いTweetをもっと見る   閉じる

このページをシェアしよう！

メニュー  

Gamerch会員特典

基本マークアップ

Wikiの基本編集・新規機能

その他

人気Wikiの作り方講座

Gamerchサポート

左サイドメニューの編集

サイト内ランキング
DBを使ってみよう！
HTMLマークアップ一覧
掲示板を使ってみよう！
4 編集してみよう！
5 スマホから編集してみよう！
6 ブログ型を編集してみよう！
7 投票システムを使ってみよう！
8 【第4回】荒らしの効果的な対策
9 装飾してみよう！
10 注意・禁止事項
最近の更新

2018/11/09 (金) 21:18

2018/11/05 (月) 12:12

2018/11/05 (月) 11:40

2018/09/18 (火) 10:08

2018/09/12 (水) 22:48

2018/09/12 (水) 17:08

2018/09/12 (水) 17:05

2018/09/06 (木) 21:13

2018/09/03 (月) 11:15

2018/09/01 (土) 11:29

2018/08/27 (月) 11:55

2018/08/22 (水) 19:10

2018/08/20 (月) 20:58

2018/08/20 (月) 10:59

2018/08/20 (月) 10:56

2018/08/16 (木) 12:59

2018/08/15 (水) 20:59

2018/08/14 (火) 23:45

2018/07/05 (木) 23:29

2018/06/26 (火) 02:08

更新履歴一覧へ
編集履歴のみ一覧へ
新規作成

2017/12/21 (木) 16:52

2017/09/12 (火) 16:01

2017/07/28 (金) 17:42

2017/06/05 (月) 18:52

2017/02/06 (月) 16:13

2016/10/13 (木) 17:08

2016/10/13 (木) 15:35

2016/10/11 (火) 18:46

2016/10/05 (水) 09:32

2016/06/09 (木) 11:34

新規作成履歴一覧へ
注目記事
【ましろウィッチ】リセマラ当たりランキング ましろウィッチ攻略wiki
【プレカトゥスの天秤】リセマラ当たりランキング プレカトゥスの天秤攻略wiki
【ゆるゲゲ】リセマラ当たりランキング ゆる～いゲゲゲの鬼太郎妖怪ドタバタ大戦争攻略wiki
【アルテイルNEO】最新おすすめデッキレシピ アルテイルNEO攻略wiki
【FGO】星4配布おすすめサーヴァント【1500万DL記念】 FGO攻略wiki
ページ編集 トップへ
コメント 33