Settings

http://jp.seaicons.com/wp-content/uploads/2016/09/Settings-icon-2.png

背景

画像であるため重くなるのでdisableにしておく

code:_style.css

リンクをわかりやすくする

code:_style.css

/* Internal links */

.line a.page-link::after { font-family:'FontAwesome'; content: ' \f0f6'; display: inline-block }

code:style.css

/* External links */

.line a.link:not(.icon)::after { font-family:'FontAwesome'; content: ' \f08e'; display: inline-block }

引用

普段より広いスペースになる

ゆとりがあってよい

code:style.css

span.quote {

padding: 5px;

width: 100%;

display: block;

}

センタリング

code:style.css

.deco-\| {

position: absolute;

width: 100%;

text-align: center;

}

右寄せ

code:style.css

.deco-\> {

position: absolute;

width: 100%;

text-align: right;

}

左寄せ

code:style.css

.deco-\< {

position: absolute;

width: 100%;

text-align: left;

}

吹き出し

吹き出し本体

code:style.css

.deco-\{, .deco-\} {

font-size: 1em;

padding: 0.2em 0.1em 0.2em 0.1em;

border-radius: 0.4em;

margin: 1px 5px 1px 5px;

display: inline-block;

max-width: calc(100% - 100px);

vertical-align: top;

}

左吹き出しの角

code:style.css

.deco-\{:before {

position: absolute;

margin: 0;

padding: 0;

transform: translateX(-100%) translateY(calc(1em - 80%));

width: 0;

content: "";

border-width: 0 0 0.6em 0.6em;

border-style: solid;

}

右吹き出しの角

code:style.css

.deco-\}:after {

position: absolute;

margin: 0;

padding: 0;

transform: translateY(calc(1em - 80%));

width: 0;

content: "";

border-width: 0 0.6em 0.6em 0;

border-style: solid;

}

強調吹き出しの角

code:style.css

.deco-\!:before, .deco-\!:after {

}

吹き出し内のリンク色の調整

code:style.css

.deco-\{ a,

.deco-\} a {

}

code:style.css

.deco-\! {

padding: 0.1em 0.2em 0.1em 0.2em;

}

ピンされたページのスタイル

code:_style.css

.grid li.page-list-item a .pin { background-color: transparent; background-image: none }

.grid li.page-list-item a .pin::after {

display: inline-block; transform: rotate(35deg) }

アイコンを大きくする

code:style.css

/* アイコンサイズを大きくする */

.line img.icon { height: 2em }

アイコンをもっと大きくする

code:style.css

.line img.strong-icon { max-height: 20em; height: auto }

箇条書きを控えめにする

code:style.css

/* 箇条書きを控えめにする */

ヘッダーメニューを固定する

code:style.css

/* はりつくメニューバー */

@media screen and (min-height: 600px) and (min-width: 768px) {

body:not(.presentation) { padding-top: 90px; padding-right: 0 !important }

body:not(.presentation) .page-menu { position: fixed; top: 90px }

.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 990; overflow: unset }

.dropdown.open .dropdown-menu {

position: absolute;

max-height: calc(100vh - 100px); overflow-y: auto }

.page-menu .dropdown.open .dropdown-menu { position: absolute; top: 0 } }

関連リンクを左側に表示する

code:style.css

@media (min-width: 1050px) {

.row-flex .col-page {

max-width: 960px;

}

.col-page .page-wrapper {

display: flex;

flex-direction: row-reverse;

justify-content: center;

}

.page-wrapper .page {

width: 700px;

}

.page-wrapper .related-page-list {

max-width: 260px;

}

.related-page-list .grid .splitter:first-child {

display: none;

}

.related-page-list .splitter {

height: 10px!important;

}

.related-page-list .relation-label {

height: 65px !important;

}

.related-page-list .page-list-item {

height: 65px!important;

}

.related-page-list .grid li {

width: 200px!important;

padding: 0 0 0 0!important;

margin: 0 0 5px 0!important;

}

.related-page-list .grid .page-list-item .content .title{

font-size: 15px;

}

.related-page-list .icon {

display: none !important;

}

}

テロメアの未読表現の変更をカスタマイズ

code:style.css

.unread {

width: 0px !important;

border-right-width: 3px !important;

border-left-width: 10px !important; /* テロメアの太さ最大値 */

}

.unread:hover {

width: auto !important;

border-right: 0 !important;

}

カーソルをカスタマイズ

code:style.css

/* カーソルの幅と色替え */

.cursor {

width: 1px;

background-color: rgba(0,0,0,.6);

animation: blink 1s infinite;

}

@keyframes blink {

0% { opacity: 0; }

50% { opacity: 0; }

51% { opacity: 1; }

100% { opacity: 1;}

}

/* 同時作業中のユーザのカーソル設定 */

.shared-cursors .cursor {

animation: none;

}

code:style.css

/* カーソルのある行の背景色と下線を薄いグレーにする */

.cursor-line {

border-right: 5px solid rgba(30, 70, 100, 0.8);

border-bottom: 1px dashed rgba(50, 80, 120, 0.35);

box-sizing: border-box;

}

画像を左寄せにする

code:style.css

/* 行内の画像を左寄せにする */

.line .text { clear: both; overflow: hidden }

.line img.image { float: left; margin-right: .5em }

縦に長い画像でも全体が見えるようにする

画像をセンタリングしてある

code:style.css

.grid li.page-list-item a .icon img {

max-width: 100%;

max-height: 100%;

width: auto; !important;

margin: 0 auto

}

一覧カードを小さくする

code:style.css

.two-two { width: 135px !important; height: 135px !important; }

.page-list .grid li { width: 135px !important; height: 135px !important; }

.two-two .icon { padding-top: 0px !important; width: 135px !important; height: 135px !important }

.two-two .title { display: none }

.grid li.page-list-item a { background-color: white; border-radius: 5px }

.grid li.page-list-item a .header { padding: 7px 5px }

homeのgridを見やすくする

画像をセンタリングしてある

code:style.css

.grid li.page-list-item a .title {

overflow: hidden;

height: 40px;

text-align: center;

font-size: 14px;

font-weight: bold;

display: -webkit-flex;

display: flex;

-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */

align-items: center; /* 縦方向中央揃え */

-webkit-justify-content: center; /* 横方向中央揃え（Safari用） */

justify-content: center; /* 横方向中央揃え */

}

.grid .page-list-item:hover {

display: inline-block;

}

/* サムネ画像をフィットさせる */

.grid li.page-list-item a .icon img {

display: table-cell;

width: auto;

margin: 0 auto;

max-height: 65px;

max-width: 100%;

vertical-align: middle;

/* 彩度を落とすと少し静かになる */

-webkit-filter: contrast(105%);

filter: contrast(105%);

border-radius: 3px;

}

良さげな見出しにする

code:style.css

.line strong {

display: inline-block;

}

.line strong.level-3 {

width: 100%;

margin: 0.5em 0;

padding: 0.25em 0.5em;

}

.line strong.level-5 {

width: 100%;

margin: 0.75em 0;

padding: 0.25em 0.5em;

}

code:style.css

/* 二重括弧による強調をマーカーっぽくする */

}

引用

幅を広く設定した

code:style.css

span.quote {

padding: 10px;

width: 100%;

display: block;

}

箇条書きを控えめにする

code:style.css

/* 箇条書きを控えめにする */