FANDOM


翻訳が必要です

このページ(の一部)は、翻訳が必要です。 (日本語への)翻訳にご協力ください。

This cookbook is a collection of useful CSS snippets to be used however you want.

CSS tutorials

背景画像

CSSを使ってあなたのWikiの背景画像を変えたいのなら、もう探す必要はありません。一般に、これを使用して達成することができます

body {
    background-image: url(<これを背景にしたい画像のURLに置き換えます。>);
    background-color: <背景色を変更し、16進コードまたは色の名前を使用します (i.e. "red")>;
    background-blend-mode: <2つ以上の背景レイヤーをさまざまなブレンドモードで結合します。ブレンドモードの名前の1つを使用して、背景の外観を変更します。(examples: "color-dodge", "screen", "multiply", "hard-light", "difference", "luminosity")>
    background-attachment: <ページと一緒にスクロールできるようにscrollに設定するか、位置を固定するためにfixedに設定します。>;
    background-position: <画像を開始する方向のどちらかに設定します。 (i.e. "top left", "left center", "right center", etc), percentages (x% y%), or position (xpos ypos). (Note: % and pos are mixable)>
    background-repeat: <デフォルト設定では画像を垂直方向と水平方向に繰り返し、repeat-yに設定すると画像は垂直方向にのみ繰り返され、repeat-xに設定すると水平方向にのみ繰り返され、no-repeatに設定するとまったく繰り返されなくなります。>;
}

いくらかの微調整が必​​要かもしれませんが、それらは基本です。

FandomのCSSクラス

Fandomには特定の組み込みクラスがいくつかあります。

  • .ns
    • 名前空間
    • このページは.ns-0
/* Change text color in user namespace */
.ns-2 {
    color: black;
}
  • .oasis-dark-theme
    • ダークテーマ時に追加される
/* Change link color on dark wikis but not light wikis */
.oasis-dark-theme a {
    color: white;
}
  • .page
    • ページ名
    • このページは.page-CSS_Cookbook
/* Add some styling on a certain page */
.page-CSS_Cookbook h2 {
    font-weight: bold;
}
  • .user
    • ログイン状態
    • ログイン時は.user-logged未ログイン時は.user-anon
/* Hide category adder for anons */
.user-anon .CategorySelect.articlePage .last {
    display: none;
}
  • .wiki
    • Wikiドメイン名
    • このwikiは.wiki-dev
/* Add some styling only to dev wiki */
.wiki-dev .portable-infobox {
    padding: 1px;
}

Site enhancements

プレビュー窓の外側

Blackout

ライトボックスで画像を表示したときに表示されるブラックアウトをカスタマイズするには、以下のCSSスニペットを使用するといいでしょう:

.blackout {
    background: #84dcff;
    mix-blend-mode: overlay;
}

背景の色#84dcffを使いたい色に、ブレンドタイプoverlayを使いたい合成モードに変更します。

背景ぼかし

BlurBackground

DoruminによるこのCSSは背景をぼかします。

注: ブラウザサポートはIE-Edge側では比較的貧弱ですが、とにかくIEを使用しているのであれば、おそらくすべてがうまくいくとは思わないはずです。ぼやけていない画像が表示されるだけです。

body::before {
    content: '';
    background-image: url(image-url);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

ぼかし効果は通常2〜5pxに制限されます。bodyにすでに背景が定義されている場合は、いつでもそれを削除できます:

body {
    background-image: none !important;
}

固有カーソル

CustomCursor

カーソルとして表示されているアイコンを変更したい場合は、次のものを使用できます:

/* 通常のカーソル */
body {
    cursor: url("<insert URL to cursor icon>");
}
 
/* リンクにマウスを乗せたり、リンクをクリックしてから離すまでのカーソル */
a:hover, a:active {
    cursor: url("<insert URL to cursor icon>");
}

Fix the toolbar width in the VisualEditor

VEfixed

This CSS snippet by JustLeafy fixes the width of the toolbar of VisualEditor, in order to make it as wide as the editing area.

.ve-init-mw-viewPageTarget-toolbar {
    border-top: none;
}
.oo-ui-toolbar.ve-ui-toolbar.ve-ui-dir-inline-ltr.ve-ui-dir-block-ltr.ve-init-mw-viewPageTarget-toolbar {
    margin-left: -10px;
    margin-right: -10px;
}

404テキストの背景

ArticleNoTextBG

Master Ceadeus 27の作ったWikiごと専用のこのCSSは404ページの背景を変更します:

#mw-content-text .noarticletext {
    background-image: url('<エラー画像のURL>');
    background-blend-mode: normal;
    background-size: cover;
}

プロフィール背景

CustomMastheadImage

自分のページのプロフィールの右下隅に背景画像を挿入する場合は、次の方法を使用できます:

.UserProfileMasthead .masthead-info {
    background-image: url("<背景に使いたい画像のURL>");
    background-repeat: no-repeat;
    background-blend-mode: normal;
    background-position: right bottom;
}

注: 暗い背景にはcolor: white;を追加すること。

divの角を丸くする

DivRoundedCorners

PhilippLの作ったこのCSSはWikiページ上の<div>の角を丸くします。

#WikiaPage div,
#WikiaPage .avatar,
#WikiaPage section,
#WikiaPage table,
#WikiaPage .WikiaMenuElement,
#WikiaPage .widget-box,
#WikiaPage .preview_mobile.preview_icon,
#WikiaPage #wpPreviewMobile,
#WikiaPage #articleCategories {
    border-radius: 5px;
}

スクロールバーを改造

MinimalScrollbar

ウィキのスクロールバーをカスタマイズしたい場合は、これらのCSSセレクタを使用してさまざまなプロパティを適用することができます:

/* 幅を8pxにする */
::-webkit-scrollbar {
    width: 8px;
}
 
/* 黒背景にする */
::-webkit-scrollbar-track {
    background: black;
}
 
/* 緑背景バーにする */
::-webkit-scrollbar-thumb {
    background: #228B22;
}
 
/* ホバーするとバーの背景が濃い緑色になる */
::-webkit-scrollbar-thumb:hover {
    background: #222;
}

注: スクロールバーの改造はwebkit系ブラウザ(Google Chrome, Safari, 特定verからのOpera, Lunascape Webkitなど)でしか作動しません。

Source Editor header improvements

EditorSourceHeaderImprovements

This CSS snippet by JustLeafy adds minor improvements into the header of the classic editor, including a different color, box shadow removal and some opacity.

/* Source Editor Header Improvements*/
.EditPageHeader {
    opacity: .95;
    background-color: darkgreen;
    border-bottom: none;
    box-shadow: none;
    color: #fff;
}
 
/* Fix wrong colored links */
.EditPageHeader > .wordmark,
.EditPageHeader > h2,
.EditPageHeader > h1 a,
.HelpLink,
.HelpLink > a,
.NotificationsLink,
.NotificationsLink > a {
    color: inherit;
}

Unhide Lightbox Add To Article Button

A2A

This CSS snippet by JustLeafy unhides the add to article option from the lightbox. The add to article option is simply used to add the image the user currently is viewing in the lightbox into an article by typing the article's name in the inputbox that will appear after clicking the "Add to Article" button.

.LightboxModal .lightbox-add-to-article {
    display: initial;
}

Unhide the amount of characters remaining in chat

UnhideRemainingCharacters

This CSS plugin by JustLeafy keeps the characters remaining feature unhidden no matter how many characters were typed.

/** Unhide Characters Remaining **/
 
/* Display the "characters remaining" feature at any time */
 
body .remaining {
    display: initial;
    font-weight: bold;
    margin-right: 5px;
    margin-top: 30px;
    z-index: 1;
}
 
/* Limiting the width of the chat message inputbox to keep space for this feature */
 
.Write [name="message"] {
    width: 96%;
}

Username highlighting

HighlightUsername

This CSS snippet highlights links to an administrator's userpage, Message Wall, contributions and blog listing:

a[href$=":Admin's_Username"],
a[href$="/Admin's_Username"] {
    /* changes the color of the username */
    color: #006600 !important;
    /* makes the username bold */
    font-weight: bold !important;
    /* changes the font of the username */
    font-family: Arial !important;
    /* other CSS goes here */
}

Change "Admin's Username" to the username of the administrator you intend to highlight, #006600 to the intended color of highlighting and Arial to the intended font for the highlight. You can also remove certain sections if you don't need them in the highlight.

Fix the color of the file history table

FFHTC

This minor CSS plug-in makes a fix to the background color of the file history tables, making it from white to black.

/* Fix File History Table Color */
.oasis-dark-theme table.wikitable.filehistory > tbody > tr > td,
.oasis-dark-theme table.wikitable.filehistory > tbody > tr > th {
    background: black !important;
    color: white !important;
}
 
.oasis-dark-theme table.wikitable.filehistory > tbody > tr > td {
    border-bottom: 1px #222 solid !important;
}

User customizations

Custom community header

Screenshot 51ByAnon

This personal only CSS snippet by Anonminati makes full image graphic header.

header.wds-community-header {
        background-image: url(add your image url here...) !important;
        background-position: right center !important;
        background-size: auto !important;
}
 
.wds-community-header::before {
    background: linear-gradient(to right,rgba(255, 217, 0, 0),rgba(240, 133, 12, 0),rgba(51, 24, 0, 0.7),rgba(51, 27, 30, 0)),linear-gradient(to left,rgba(0, 0, 0, 0) 200px,#0000 430px) !important
}

Detect Username Template

DetectUsername

TheGoldenPatrik1の作ったこのCSSは{{USERNAME}}テンプレートに枠を付け、それが全YOUへ向けたものかをハイライトします:

.insertusername,
.inputusername,
.InsertUsername,
.InputUsername {
    border: 1px solid;
    padding: 0.5px;
}

Force default cursor

ForceDefaultCursor

This personal only CSS snippet forces all cursors to become default. This means that custom wiki cursors will be restored back to default. It also replaces the hand cursor when hovering over links with the default cursor.

body,
a:hover,
* {
    cursor: default !important;
}

注目動画を隠す

HideFeaturedVideos

英語版のスポンジボブWikiやBFDIWikiには注目動画がある。でもこのCSSで全部消えるよ。

Sophiedpの作ったこの個人専用CSSは記事上の注目動画を隠します。

/* 注目動画を隠す */
.featured-video__wrapper {
    display: none;
}

Hide main page categories

NoCat

This personal-only CSS snippet by JustLeafy prevents the bottom category bar to appear on the main page:

.mainpage .article-categories {
    display: none;
}

Hide notifications

HideNotifications

KnazOの作ったこの個人専用CSSはトークページ通知以外のすべての右下に現れる通知が表示されないようにします:

#WikiaNotifications li div[data-type="2"], /* コミュニティメッセージ更新通知 */
#WikiaNotifications li div[data-type="5"], /* グローバル通知 */
#WikiaArticle #WikiaNotifications { /* notifications users put on their pages */
    display: none !important;
}

Hide rail modules

HideRail

This personal only CSS snippet by Monochromatic Bunny hides certain modules from the Rail:

.WikiaRail .chat-module, /* Removes Chat Module */
.community-page-rail-module, /* Removes Community part of the Wiki Activity module */
.insights-module, /* Removes Insights Module */
#recirculation-rail, /* Removes Trending Articles Module */
#wikia-recent-activity { /* Removes Wiki Activity Module */
    display: none;
}

Note: Add the following code to increase the article width and not leave out the empty space on the right rail.

#WikiaMainContent {
    width: 100%;
}

Hide Trending Fandom Articles

AnonSnippet2

This personal only CSS snippet by Anonminati hides the trending Fandom articles.

#WikiaAdInContentPlaceHolder.rail-sticky-module {
    visibility: hidden;
}

Kill VisualEditor focus

Kill visual editor focus-before

Before

Kill visual editor focus-after

After

This minor CSS plugin by iynque kills the focus on the VisualEditor.

/* Clear UI—blocking VisualEditor "focus" */
body.ve .WikiaMainContent {
    box-shadow: initial;
    z-index: 1;
    border: 1px dashed rgba(230, 126, 34, 0.35);
}
 
body.ve {
    pointer-events: auto;
}

Minified PPH

MinifiedPPH

This personal-only CSS snippet by KurwaAntics minifies Fandom's new article header by removing the category list and language dropdown button on the top of the header and reducing the article's title's font size:

.WikiaPage .page-header__categories,
.WikiaPage .page-header__languages {
    display: none;
}
.WikiaPage .page-header__title {
    font-size: 34px;
}

Previous WDS Button design

OldWDSButtons

This minor CSS plugin by JustLeafy makes the buttons look like the previous style before they had rounded corners and a larger font size.

.wds-button {
    padding: 7px 12px;
    font-size: 10px;
    border-radius: 0 !important;
}

Selection customization

CustomSelection

This CSS snippet by JustLeafy makes the selection background color semi-transparent.

::selection {
  background: rgba(120,120,120,0.5);
}

Slider shadow button

Readmore

This CSS snippet by Anonminati makes the "Read more >" button from the slider have a drop shadow.

.wikiaPhotoGallery-slider-body {
    --mst-icon: none;    
}
 
.wikiaPhotoGallery-slider-body .wikia-button.secondary {
    background-color: #2193d7 !important;
    border-radius: 0px !important;
    color: black;
    font-size: 15px;
    font-weight: normal !important;
    text-transform: none;
    box-shadow: 4px 4px black;
    font-family: rubik;
}
 
.wikiaPhotoGallery-slider-body a:not(.wds-button).wikia-button.secondary:hover {
    background-color: #DDDDDD !important;
    filter: brightness(80%);
}

Static TFA rail module

StaticTFA

This personal only CSS snippet by JustLeafy makes the "Trending Fandom Articles" module static when scrolled past:

#WikiaAdInContentPlaceHolder.rail-sticky-module {
    position: static;
}

Ugly modules

UglyModules

This CSS snippet by KurwaAntics fixes ugly margins of Fandom's new rail modules.

.WikiaRail .rail-module {
    margin: 0 0 20px;
}
.WikiaRail .rail-module h2 {
    align-items: center;
    display: flex;
}

Change diff highlights

This CSS snippet by RyaNayR adds a red outline-border to diff-change highlight color-scheme. This would presumably greatly increase visibility of small, one-character changes, while also remaining palatable to the eyes on larger diffs, when anyone on your wiki is reviewing edit-differences.

.diffchange {
    border: 1px solid #f00;
}
Community content is available under CC-BY-SA unless otherwise noted.

Fandom may earn an affiliate commission on sales made from links on this page.

Stream the best stories.

Fandom may earn an affiliate commission on sales made from links on this page.

Get Disney+