settings
見た目を調整するページです。
参考
https://1.bp.blogspot.com/-IYRj25otveo/XTPoNESJpfI/AAAAAAABTxE/K3FIyoYmbroS2nJjr0v5Gy3YOF5ZqpGZACLcBGAs/s800/haguruma_gear_set.png
code:style.css
/* #で始まるタグをラベル風にする */
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
font-size: 0.8em;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
code:style.css
/* ピン留めマークの変更*/
.grid li.page-list-item a .pin {
background-color: transparent;
background-image: none;
top: -5px !important;
right: 40% !important;
}
.grid li.page-list-item a .pin::after {
content: '\f08d';
font-family: 'FontAwesome';
font-size: 20px;
diplay: inline-block;
margin: 10px 50px 20px auto;
}
code:style.css
/* 二重括弧による強調をマーカーっぽくする */
.line strong:not(class) { background: linear-gradient(transparent 15%, #EE6500 25%, #EE6500 60%, transparent 90%) }
code:style.css
/* たいとる いじった。*/
.line.line-title {
font-weight: bold;
border-bottom: solid 3px #ccc; line-height: 1.4;
}
.line.line-title .text {
font-size: 1.2em;
padding-bottom: .5em;
}
/* スマホ表示用に調整 */
@media screen and (max-width: 670px) {
.line.line-title .text {
font-size: 1.8rem;
}
}
ページに関するカスタマイズ
code:style.css
.body {
}
.page {
}
.line.line-title .text {
color:#D0CDDA;
}
トップページに関するカスタマイズ
code:style.css
.title{
color: white;
}
.page-list-item.grid-style-item{
opacity: 0.95;
}
.page-list-item .content{
color: white;
}
.page-list-item .header{
border-color: black !important;
}
.page-list-item > a{
color: white;
background-color: #373737 !important; opacity: 0.95;
}
.page-list-item .header>.title{
color: white !important;
}
/* サムネ画像をフィットさせる */
.grid li.page-list-item a .icon {
position: relative;
}
.grid li.page-list-item a .icon img {
display: table-cell;
width: auto;
max-height: 90px;
max-width: 90%;
vertical-align: middle;
border-radius: 5px;
position: absolute;
top: calc(50% + 50px);
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
/* スマホ画面 */
@media screen and (max-width: 768px) {
.page-list .grid li {
width: 15.8rem;
height: 15.8rem;
margin: 0 .7rem 1rem 0;
}
.grid li.page-list-item a .header {
padding: 1rem .8rem;
}
.grid li.page-list-item a .title {
height: 5.3rem;
line-height: 1.3
}
.grid li.page-list-item a .icon img {
top: calc(100% + 3.3rem);
}
}
code:style.css
/* マウスを乗せた時 */
.grid li.page-list-item a .hover {
background-color: #ACACAC, transparent 30%; }
テキスト設定
code:style.css
/* PC表示ではデフォルトより大きめに表示・文字色 */
.line {
font-size: 120%;
line-height: 1.7;
}
/* スマホ表示ではより小さめに表示する */
@media screen and (max-width: 670px) {
.line {
font-size: 100%;
}
.line span.code-block { font-size: 80%; }
body:not(.presentation) .code-block code > span:not(class)::before { left: -4em;
}
}
箇条書きの設定
code:style.css
.line .indent-mark .dot {
background-color: transparent ;
}
カーソル白く
code:style.css
/* デフォルトのままだと背景を暗くしたコードブロック内でカーソルが見えなくなるので、色や太さを変更 */
.cursor { width: 3px; background-color: #ccc } codeBlockのカスタマイズ
code:style.css
.line span.code-block {
}
.line code > span > span {
}
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
}
.hljs-built_in,
.hljs-selector-tag,
.hljs-section,
.hljs-link {
}
.hljs-keyword {
}
.hljs,
.hljs-subst {
}
.hljs-title {
}
.hljs-string,
.hljs-meta,
.hljs-name,
.hljs-type,
.hljs-attr,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable {
}
.hljs-comment,
.hljs-quote,
.hljs-deletion {
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-title,
.hljs-section,
.hljs-doctag,
.hljs-type,
.hljs-name,
.hljs-strong {
font-weight: bold;
}
.hljs-literal,
.hljs-number {
}
.hljs-emphasis {
font-style: italic;
}
code:style.css
.hljs-selector-id, .hljs-selector-class {
}
.hljs-params, .hljs-built_in {
}
.hljs-regexp {
}
code:style.css
/* code blockのフォントを小さくする設定 */
span.code-block {
line-height: 20px;
font-size: 90%;
}
/* code blockの頭を静かな色にする */
.line span.code-block .code-block-start {
background-color: rgb(39, 40, 34);
padding: 2px 5px 2px 5px !important;
}
.line span.code-block .code-block-start a {
font-size: 110%;
color: white
}
code:style.css
/* 中央寄せ */
.deco-\| {
position: absolute;
width: 100%;
text-align: center;
}
/* 右寄せ */
.deco-\> {
position: absolute;
width: 100%;
text-align: right;
}
/* 左寄せ */
.deco-\< {
position: absolute;
width: 100%;
text-align: left;
}
code:style.css
/* テーブルのセルをわかりやすくする */
.table-block table { background-color: transparent; border-collapse: separate; border-spacing: 2px }
.table-block table tr td:nth-child(odd) { padding: .1em; background-color: #fcfcfc; } .table-block table tr:nth-child(even) td { background-color: rgba(0,0,0,0.06) } /* 偶数行を濃くする */
.table-block table tr:first-child td { font-weight: bolder; text-align: center } /* 1行目だけ太字&中央揃え */
.table-block table tr td:first-child { padding: 0; background-color: transparent; border-width: 0 }