テーマ作成用メモ

ヘッダー

タイトル

+ show block

タイトルの文字を変える

#header h1 a span {
    display: none;
}
#header h1 a:before {
    content: 'タイトル';
}

サブタイトルの文字を変える

#header h2 span {
    font-size: 0%;
}
#header h1 a:before {
    font-size: 13.44px;
    content: 'サブタイトル';
}

タイトルを中央寄せする

#header h1 {
    position: absolute;
    transform: translateX(-50%);
    display: inline-block;
    margin-left: 0;
    left: 50%;
}

サブタイトルを中央寄せする

#header h2 {
    position: absolute;
    transform: translateX(-50%);
    display: inline-block;
    margin-left: 0;
    left: 50%;
}

タイトル中央寄せの共存

#header h1 {
    top: -3%;
}
#header h2 {
    top: 52%;
}

ログインステータス/検索バー

+ show block

/*ログインアイコン全体のイチ*/
#login-status {
    top: 4px;
    right: 4px;
}
/*縦にする*/
#login-status {
    display: flex;
    flex-direction: column;
    align-content: space-around;
    font-size: 0
}
/*アカウントのアイコン*/
#login-status .printuser {
    border: 1px solid #828282;
    margin: 0 0 2px;
    padding: 0 1px 0 5px;
    background-color: #000;
    filter: brightness(120%);
    position: absolute;
    right: 0;
    width: 26px;
    height: 21px;
    border-radius: 5px 5px 0 0;
}
/*アカウントの画像*/
#login-status .printuser img.small {
    padding: 1px 2px 1px 8px
}
 
#login-status [id] {
    font-size: .72rem
}
/*アカウントボタンとその他のボタン*/
#login-status>a[href="javascript:;"] {
    border: 1px solid #828282;
    border-radius: 0;
    font-size: 0;
    font-weight: bold;
    margin-left: 0;
    padding: 0 5px;
    text-align: center;
    text-decoration: none;
    background-color: #000;
    filter: brightness(120%);
    width: 21.8px;
    position: absolute;
    top: 22px;
    height: 21px;
    right: 0px
}
 
#login-status>a[href="javascript:;"]:before {
    display: inline-block;
    font-family: FontAwesome;
    font-size: .72rem;
    margin: 4px 3px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    transform: translate(0, 0)
}
 
#login-status #account-topbutton:before {
    content: "\f013";
    color: #fff
}
 
#login-status .login-status-sign-in:before {
    content: "\f13e";
    color:#fff
}
 
#login-status .login-status-create-account {
    margin: 0 0 .25rem
}
 
#login-status .login-status-create-account:before {
    content: "\f067";
    color: #fff
}
 
#login-status #my-account {
    display: none
}
 
#login-status a strong {
    position: absolute;
    top: 0;
    right: 2.25rem;
    font-family: var(--bauhaus);
    font-size: 1rem;
    white-space: nowrap
}
 
#login-status #account-topbutton:not(:focus):not(:focus-within):not(:hover):not(:active)+#account-options {
    display: none !important
}
 
#header #login-status #account-topbutton+#account-options:focus,
#header #login-status #account-topbutton+#account-options:focus-within,
#header #login-status #account-topbutton+#account-options:hover,
#header #login-status #account-topbutton+#account-options:active {
    display: block !important
}
/*アカウントオプチョン*/
#account-options ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around
}
 
#account-options ul>li {
    flex-grow: 1;
    text-align: center;
    width: 40%
}
 
#account-options ul>li a {
    transition: all .25s ease-in-out
}
 
#account-options ul>li a:hover {
    filter: brightness(120%);
    background-color: #000;
    color: #fff;
    text-decoration: none
}
 
#login-status ul a {
    color: #000
}
#login-status>a[onclick="WIKIDOT.page.listeners.createAccount(event)"] {
    right: 0;
    top: 0px;
    border-radius: 5px 5px 0 0;
}
 
/*検索ボックス*/
div#search-top-box {
    top: 48px;
    width: 100%;
    right: 3px;
}
 
div#search-top-box form {
    display: flex;
    justify-content: flex-end
}
/*入力ボックス*/
div#search-top-box form input[type="text"],
div#search-top-box form input[type="text"]:hover {
    background-color:#000;
    display: inline-block;
    filter: brightness(120%);
    height: 1.1rem;
    width: 8rem;
    transition: width .25s;
}
 
_::-webkit-full-page-media,
_:future,
:root div#search-top-box form input[type="text"] {
    font-size: 16px
}
 
div#search-top-box form input[type="text"]:not(:focus),
div#search-top-box form input[type="text"]:not(:focus):not(:hover) {
    background-color: #000;
    color: transparent;
    cursor: pointer;
    display: inline-block;
    width: 28px;
    border-color:#828282;
    box-shadow: none;
    background-position: center;
    background-size: 40%;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23ddd%22%20d%3D%22M505%20442.7L405.3%20343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3%2044-79.7%2044-128C416%2093.1%20322.9%200%20208%200S0%2093.1%200%20208s93.1%20208%20208%20208c48.3%200%2092.7-16.4%20128-44v16.3c0%206.4%202.5%2012.5%207%2017l99.7%2099.7c9.4%209.4%2024.6%209.4%2033.9%200l28.3-28.3c9.4-9.4%209.4-24.6.1-34zM208%20336c-70.7%200-128-57.2-128-128%200-70.7%2057.2-128%20128-128%2070.7%200%20128%2057.2%20128%20128%200%2070.7-57.2%20128-128%20128z%22%2F%3E%3C%2Fsvg%3E");
    filter: brightness(120%);
    border-radius: 0 0 5px 5px;
}
/*検索ボタン*/
div#search-top-box form input[type="submit"] {
    display: none
}
#search-top-box-input {
    border: solid 1px #828282;
    border-radius: 0px;
}

トップバー

+ show block

トップバーを中央寄せする

div#top-bar {
    width: 100%;
    max-width: 100%;
}
#top-bar>div {
    width: 100%;
    max-width: none;
}
#top-bar>div>ul {
    float: none;
    display: flex;
    justify-content: center;
}

トップバーを等間隔にする

#top-bar ul {
    float: right;
    display: flex;
    width: 100%;
}
#top-bar ul>li>ul {
    display: block;
}
#top-bar div {
    width: 100%;
    max-width: none;
}
#top-bar ul li {
    border: 0;
    position: relative;
    flex-grow: 1;
    flex-basis: 100%;
}
#top-bar li:hover ul, #top-bar li.sfhover ul {
    width: 100%;
}
#top-bar ul li.sfhover ul li a, #top-bar ul li:hover ul li a {
    width: 100%;
    box-sizing: border-box;
}

トップバーの一番上のアイコンだけ変えない

#top-bar ul li a[href="javascript:;"] {
    background: transparent !IMPORTANT;
    color: #fff !IMPORTANT;
    padding: 10px 1em;
}
@media (min-width: 580px) {
#top-bar ul li a[href="/scp-international"] {
    background: transparent !IMPORTANT;
    color: #fff !IMPORTANT;   
    padding: 10px 1em;
}
}

トップバーのアイテムのstyle

#top-bar ul li.sfhover ul li a, #top-bar ul li:hover ul li a {
    border-color: #ccc; /*境界線の色*/
    color: #fff; /*文字色*/
    background: #000 !important; /*背景*/
    transition: .5s color,backgroud ease-in-out; /*文字色と背景だけを滑らかに変化させる*/
    padding: 5px 7px; /*広くする*/
}

トップバーのホバーされたアイテムのstyle

#top-bar ul li.sfhover a:hover, #top-bar ul li:hover a:hover {
    color: #000; /*文字色*/
    background: #fff !Important; /*背景*/
}

横の境界線を消す

#top-bar ul li.sfhover a, #top-bar ul li:hover a {
    border-left: none;
    border-right: none;
}

サイドバー

サイドブロック

+ show block

アイコンを変える

#side-bar .menu-item > img {
     display: none;
}
#side-bar .collapsible-block-folded {
    background: none;
}
#side-bar .collapsible-block-folded .collapsible-block-link:before,
#side-bar .menu-item > img + a:before {
    content: "\f02e";
    display: inline-block;
    font-family: 'FontAwesome';
    font-size: .9em;
    font-weight: 400;
    padding: 0 .25em 0 0;
    text-align: center;
    width: 1em;
}
#side-bar .collapsible-block-folded .collapsible-block-link:before {
    content: "\f067";
}
#side-bar .menu-item > img[src*="home.png"] + a:before {
    content: "\f015";
}
#side-bar .menu-item > img[src*="default.png"] + a:before {
    content: "\f041";
}
#side-bar .menu-item > img[src*="series.png"] + a:before {
    content: "\f1c0";
}
#side-bar .menu-item > img[src*="help.png"] + a:before {
    content: "\f129";
}
#side-bar .menu-item > img[src*="forum.png"] + a:before {
    content: "\f086";
}
#side-bar .collapsible-block-link {
    margin-left: 0;
}

サイドブロックのstyle

#side-bar .side-block {
    background: #fff !Important; /*背景*/
    border: 1px solid #000; /*境界線*/
    border-radius: 0; /*角丸*/
    box-shadow: 1px 1px 3px #ccc; /*影*/
    padding: 5px 10px;
}

リンクとヘッド文字の色

#side-bar .heading,
#side-bar > .side-block a,
#side-bar .collapsible-block-unfolded-link {
    color: rgb(54 40 156);
}

開いた折り畳みとヘッドの下線の色

#side-bar .heading,
#side-bar .collapsible-block-unfolded-link {
    border-color: rgb(54 40 156);
}

サイドバーの区切り線

+ show block

区切り線のstyle

#side-bar hr {
    height: .5px; /*太さ*/
    background: rgb(255,255,255,.8); /*色*/
}

開くボタン

+ show block

開く牡丹をええ感じにする

.open-menu a {
    display: flex;
    justify-content: center;
    align-items: center;
}

開く牡丹のstyle

.open-menu a {
    border: 0.2em solid #222 !important; /*境界線*/
    background-color: transparent !important; /*背景色*/
    border-radius: 5px; /*角丸*/
    color: #222 !important; /*文字色*/
    filter: drop-shadow(0px 0px 3px #fff); /*影*/
    transition: .3s; /*滑らかに変化させる*/
}

ホバーされた開く牡丹のstyle

.open-menu a:hover {
    filter: drop-shadow(0px 0px 5px #fff); /*影*/
    box-shadow: none; /*"影"は一人で十分だ*/
}

メインコンテンツ

ページタイトル

+ show block

ページタイトルのstyle

div#page-title {
    color: #000; /*文字色*/
    text-align: center; /*寄席*/
    letter-spacing: 1px; /*文字間隔*/
    font-size: 25.6px; /*文字サイズ*/
    border-color: #000; /*下線の色*/
}

ページタイトルのテキストを変える

div#page-title {
    font-size: 0px;
}
div#page-title:before {
    font-size: 25.6px;
    content: 'タイトル';
}

タブ

+ show block

タブボタンのstyleをリセット

.yui-navset .yui-nav li a em,
.yui-navset-top .yui-nav li a em,
.yui-navset-bottom .yui-nav li a em {
    background: none !important;
    border: none !IMPORTANT;
}
.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:hover {
    background: none !important;
    border: none !IMPORTANT;
}
.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    background: none !important;
    border: none !IMPORTANT;
}

タブをええ感じにする

.yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.yui-navset .yui-nav li, .yui-navset .yui-navset-top .yui-nav li {
    flex-grow: 1;
    text-align: center;
    margin: 0;
}
.yui-navset .yui-nav li a, .yui-navset-top .yui-nav li a, .yui-navset-bottom .yui-nav li a {
    display: block;
}

タブボタンのstyle

.yui-navset .yui-nav a,
.yui-navset .yui-navset-top .yui-nav a {
    color: #fff; /*文字色*/
}
.yui-navset .yui-nav li, .yui-navset .yui-navset-top .yui-nav li {
    background: #181818; /*背景*/
    transition: .3s; /*滑らかに変化させる*/
}

選択されたタブボタンのstyle

.yui-navset .yui-nav .selected a,
.yui-navset .yui-nav .selected a:focus,
.yui-navset .yui-nav .selected a:hover {
    color: #000; /*文字色*/
}
.yui-navset .yui-nav .selected, .yui-navset .yui-navset-top .yui-nav .selected {
    background: #fff !important; /*背景色*/
    margin: auto;
}

ホバーされたタブボタンのstyle

.yui-navset .yui-nav li:hover, .yui-navset .yui-navset-top .yui-nav li:hover {
    background:#292929; /*背景色*/
}
.yui-navset .yui-nav li:hover a, .yui-navset .yui-navset-top .yui-nav li:hover a{
    color: #fff; /*文字色*/
}

タブボタン全体のstyle

.yui-navset .yui-nav, .yui-navset .yui-navset-top .yui-nav {
    background: transparent;
    border: 1px solid #000; /*境界線*/
}

タブコンテンツのstyle

.yui-navset .yui-content {
    background-color: #fff; /*背景色*/
    border: 1px solid #000; /*境界線*/
    border-top: none;
}

引用符

+ show block

引用符のstyle

blockquote,
div.blockquote {
    border: 1px solid #999; /*境界線*/
    background-color: #fcfcfcbd; /*背景色*/
}

テーブル

+ show block

ヘッドセルのstyle

table.wiki-content-table th {
    background-color: #cd0000; /*背景色*/
    color: #ffd400; /*文字色*/
}

その他

脚注とかの

+ show block

脚注とかのやつのstyle

.hovertip {
    background: #181818e0; /*背景色*/
    color: #fff; /*文字色*/
    border: none !important; /*境界線*/
    border-radius: 6px; /*角丸*/
    padding: 1em;
    box-shadow: 0 0 3px #fff; /*影*/
}

ページオプション

+ show block

めんどくさい

div.page-options-bottom {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 0;
}
 
a.btn-default {
    flex-grow: 1;
    text-align: center;
    margin: 0 2px !Important;
    margin-bottom: 4px !Important;
    color: #fff;
    padding: 4px 10px;
    background: #000;
    border: 2px solid #ccc;
    transition: 0.5s ease-in-out;
}
 
div#page-options-bottom {
    margin-top: 3px;
}