如何にしてtheme/componentをローカライズするか

1. ENとJPのテーマを見比べる

+ show block

主要

#content-wrap

min-height:2100px;
height: 1850px;

min-height: 1300px;
height: 1500px;

#top-bar

width: 100%;

none

#top-bar ul li ul

none

border-width: 0 1px 1px 1px;
width: auto;

#side-bar

margin: 0 0 0 2em;
left: 0;

left: 2em;
overscroll-behavior: none;

#side-bar .collapsible-block-link

margin-left: 15px;

margin-left: 0;

#side-bar .collapsible-block-unfolded-link .collapsible-block-link

none

margin-left: 15px;

#main-content

margin: 0 4em 0 20em;

margin: 0 2em 0 22em;

.yui-navset .yui-nav,

.yui-navset .yui-navset-top .yui-nav

border-color: #444;

none

.yui-navset li

line-height: 141%;
word-break:break-all;

line-height: normal;

.page-rate-widget-box

display: inline;
margin:0;
padding:0;

display: inline-block;
margin-right: 2em;

.page-rate-widget-box .rate-points

color: #FFF;
font-weight: bold;
padding: 0 10px;

none

.page-rate-widget-box .cancel a

padding: 0 5px;

none

.rateBox

display:inline-block;

当該セレクタ無し

.rateBox p

display:inline;
margin:0;
padding:0;

当該セレクタ無し

副次

a:visited

none

color: #824;

#side-bar a:visited

none

color: #b01;

sup

none

vertical-align: top;
position: relative;
top: -.5em;

#search-top-box-form input[type=submit]

background: linear-gradient(to bottom, #966,#633,#300);

background-image: linear-gradient(to bottom, #966, #633, #300);

#search-top-box-form input[type=submit]:hover,

#search-top-box-form input[type=submit]:focus

background: linear-gradient(to bottom, #c99,#966,#633);

background-image: linear-gradient(to bottom, #966, #633, #300);

#side-bar .side-block.media

該当セレクタ無し

background: #e5e5ff;

#side-bar .side-block.resources

該当セレクタ無し

background: #e7f7e9;

#side-bar .menu-item.small

該当セレクタ無し

font-size: 90%;

#breadcrumbs

font-size: 85%;

none

.pseudocrumbs

none

margin: -1em 0 1em;

.heritage-rating-module

.heritage-rating-module .page-rate-widget-box

.heritage-rating-module .heritage-emblem

.heritage-rating-module .heritage-emblem img

[省略]

当該セレクタ無し

@media (max-width: 768px)

.scp-clear-true.scp-image-block

float: none;
clear: both;
margin-left: auto;
margin-right: auto;

当該セレクタ無し

.footer-wikiwalk-nav

.licensebox .collapsible-block-link

.licensebox .collapsible-block-link:hover

.licensebox .collapsible-block-link:active

当該セレクタ無し

[省略]

.thread-container .post .head

background: linear-gradient(to right, #eee, #eeecec);

background-image: linear-gradient(to right, #eee, #eeecec);

div.curved

当該セレクタ無し

border-radius: 10px;
margin: 1em 3em;

@media (max-width: 479px)

div.curved

当該セレクタ無し

margin: 1em 0;

@media (min-width: 480px) and (max-width: 580px)

div.curved

当該セレクタ無し

margin: .5em;

.changes-list-item td.title

.changes-list-item .flags

.changes-list-item .mod-date

.changes-list-item .mod-by

@media (max-width: 435px)

.changes-list-item .revision-no

当該セレクタ無し

[省略]

@-moz-document url-prefix()

.emph

background-image: url(http://scp-jp.wikidot.com/local--files/component%3Atheme/dot.png), none;

none

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)

.emph

background-image: url(http://scp-jp.wikidot.com/local--files/component%3Atheme/dot.png), none;

none

@media (max-width: 767px)

.mobile-top-bar ul li:last-of-type ul

span, a

該当セレクタ無し

[省略]

@media (max-width: 479px)

#search-top-box-input

width: 5em;

display: none;

@media (max-width: 479px)

table.form td, table.form th

width: 5em;

display: none;

@media (max-width: 479px)

table.form td, table.form th

padding: 0;

none

@media (max-width: 479px)

td.title

width: 30%;

width: 15em;

@media (max-width: 479px)

#page-content div.title

@media (max-width: 385px)

#header

#header h1, #header h2

#header, #top-bar

.mobile-top-bar

#top-bar li a

該当セレクタ無し

[省略]

@media (max-width: 479px)

td.title

width: 30%;

width: 15em;

@media (min-width: 480px) and (max-width: 580px)

td.title (JP)

#page-content div.title (EN)

width: 30%;

word-break: keep-all;

@media (min-width: 480px) and (max-width: 580px)

td.name

該当セレクタ無し

width: 15em;

@media (max-width: 767px)

.open-menu a

border: 0.2em solid #888 !important;
background-color: #fff !important;
color: #888 !important;

border: .2em solid #888;
background-color: #fff;
color: #888;

不要?

#top-bar

z-index: 50;

プロパティ被り 20に上書き

#top-bar ul li ul

セレクタ重複 統合しては…?
L253, L295

#top-bar ul li ul li, #top-bar ul li ul li.sfhover,

#top-bar ul li ul li, #top-bar ul li ul li:hover

セレクタ重複
#top-bar ul li ul li

#side-bar div.menu-item.sub-item

既述無し

@media (max-width: 479px)

table.form td, table.form th

セレクタ重複 統合
L1089 L1097

2. 色々なテーマのローカライズの内容

+ show block

WWS

/*  Localized by ukwhatn.*/
/* for SCP-JP */
 
#page-content .page-rate-widget-box .cancel {
    padding: 0;
    overflow: hidden;
}
 
#page-content .creditRate {
    margin-right: unset;
}
 
#page-content .creditRate.creditModule .rate-box-with-credit-button {
    background-color: unset;
    border: unset;
    border-radius: unset;
    box-shadow: unset;
}
 
#page-content .creditRate.creditModule .rate-box-with-credit-button .page-rate-widget-box .rate-points {
    border-left: solid 1px #665731;
}
 
.creditRate.creditModule .rate-box-with-credit-button .creditButton {
    background-color: #a3c162!important;
}
 
.creditRate.creditModule .rate-box-with-credit-button .page-rate-widget-box .cancel {
    border-radius: 0 5px 5px 0;
}

Simple Yonder

/*  Localized by ukwhatn.*/
/* en */
body {
    font-size: 14px;
    --accentColor: #F24F4F;    
}
#top-bar a {    
    font-weight: bold;
}
 
/* jp */
body {
    font-size: 14.3px;
    --accentColor: #E53C35;
}
#top-bar a {    
    font-weight: normal;
}
 
/* JP ONLY */
/* Credit */
#page-content .page-rate-widget-box .rate-points {
    font-family: "Open Sans", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif;
    font-size: unset;
    padding: 0 5px;
}
 
#page-content .page-rate-widget-box .cancel a {
    color: #7E2520;
}
 
#page-content .page-rate-widget-box .cancel a:hover {
    color: #E53C35;
}
 
#page-content .rate-box-with-credit-button .creditButton {
    background-color: transparent;
    border: none;
    box-shadow: none;
    margin-left: unset;
}

3. まとめ

• サイドバー位置
• Creditモジュール
• フォントサイズ
• Credit/infoモジュール周辺