settings
※このページをいじると全体のCSSに影響します
トップページからこのページを見えなくする
code:style.css
display: none;
}
吹き出し
code:style.css
@import url("/api/code/help-jp/文字装飾記法/style.css")
ボタン風
code:style.css
.line .deco-\& {
display: inline-block;
padding: 0.2em 0.4em;
text-decoration: none;
border-radius: 4px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
line .deco-\&{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.line .deco-\& a{
text-decoration: none;
}
白っぽくするためのスタイル定義
※Project Settingsから、ThemeをDefaultのMinimalにしておく
code:style.css
body, .page { background-color: #fff; box-shadow: unset } .navbar-default { background-color: rgba(255,255,255,.7); border-bottom: 1px solid rgba(0,0,0,.067) }
.navbar-default:hover { background-color: rgba(245,245,245,.9) }
.navbar .navbar-brand .icon-arrow-down { display: none }
.search-form .form-group input { border: 1px solid rgba(0,0,0,.13) }
.search-form .form-group button { color: rgba(0,0,0,.13) }
.navbar-default .visible-xs .navbar-form { border-color: rgba(0,0,0,.067) }
.navbar .navbar-menu>li>a { color: rgb(0,0,0) }
.navbar .navbar-menu>li>a.mobile-search-toggle { color: rgba(0,0,0,.33) }
上部のバーの検索ボックスを右寄せに
code:style.css
.navbar .row .col-menu { width: unset }
code:style.css
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%; max-height: calc(100vh - 130px) !important; overflow-y: auto }
?
code:style.css
/* プロジェクトTOPへのリンクと周辺パーツを強引にヘッダーエリアに移動 */
/* ※次のヘッダー固定と同時に使う必要がある */
@media screen and (min-width: 768px) {
.quick-launch {
position: fixed; top: 5px; left: calc((100% - 1080px)/2); z-index: 990 }
.page { padding-top: 0 } }
@media screen and (min-width: 768px) and (max-width: 1200px) {
.quick-launch { left: 80px } }
?
code:style.css
/* テロメアとページメニューを脇に寄せて本文を広く見せる */
@media screen and (min-width: 1200px) {
.line .telomere .telomere-border { left: calc((100% - 1160px)/2 - 4px) }
.app:not(.presentation) .page-menu { right: calc((100% - 1160px)/2 - 4px) } }
/* テロメアの存在感を薄くする */
.line .telomere .telomere-border:not(:hover) { opacity: .1 }
.line .telomere .telomere-border.unread:not(:hover) { opacity: .3 }
/* 本文の最後にテキスト挿入 */
.app:not(.presentation) .page::after {
content: '';
display: block; margin-top: 5rem; padding: 1rem 0; text-align: center;
border: solid rgba(0,0,0,.2); border-width: 1px 0; font: 500 normal 1.8rem/1 sans-serif }
.app:not(.presentation) .page.not-persistent::after {
content: '' }
@media screen {
/* 本文のフォント設定: 文字サイズ */
.app:not(.presentation) .editor { font-size: 130% }
/* 本文のフォント設定: 文字詰め */
.line .text:not(.code-block) { font-feature-settings: "pkna" }
/* 本文のフォント設定: 行間 */
.app:not(.presentation) .line .text:not(.code-block) { line-height: 2.1 }
.line .indent-mark .dot { top: calc(100% - .2em) }
/* ページタイトルのフォント設定と罫線 */
.app:not(.presentation) .line.line-title .text {
font-size: calc(1.2vw + 2rem); font-weight: 600; line-height: 1.2 !important;
border-bottom: 1px solid rgba(0,0,0,.2); padding-bottom: 1rem } }
/* カード型ページリンクの枠 */
.grid li.page-list-item a { border: 1px solid rgba(0,0,0,.14) }
.grid li.page-list-item a .header { border-top: unset }
/* 拡張装飾記法 見出しっぽい太字テキスト */
.level .deco-\# { border-left: .6em solid #ffcfc6; padding-left: .7rem }