settings
下のページをコピーするだけでできます。
皆様素晴らしすぎますね......
/Porin-Room/settings
https://1.bp.blogspot.com/-AWWkQisR46o/Wi4f_Acd_YI/AAAAAAABIsQ/wPCfzOpdaKAl_2RdFlEdOViQ71fWXnkbgCLcBGAs/s800/computer_ryoushi_quantum.png
code:style.css
/*吹き出しを作る*/
.deco-\{, .deco-\} {
font-weight: bold;
background-color: #181726;
padding: 1.2rem;
border-radius: .5rem;
margin: auto 1rem;
display: inline-block;
max-width: calc(100% - 100px); /* 長いセリフの折り返しをいい感じにする */
vertical-align: top;
}
/* 吹き出し内のリンク色 */
.deco-\{ a,
.deco-\} a {
color: #5050AE;
}
/* スマホ画面 */
@media screen and (max-width: 768px) {
.deco-\{, .deco-\} {
padding: 1rem;
}
}
/*右吹き出しのツノ　*/
.deco-\{:before {
position: absolute;
margin: 0;
padding: 0;
transform: translateX(-200%) translateY(calc(1em - 0%));
width: 0;
content: "";
border-width: 0 0 .6em .6em;
border-style: solid;
border-color: #181726 transparent;
}
/* 左吹き出しのツノ　*/
.deco-\}:after {
position: absolute;
margin: 0;
padding: 0;
transform: translateX(100%) translateY(calc(2rem - 0%));
width: 0;
content: "";
border-width: 0 .6em .6em 0;
border-style: solid;
border-color: #181726 transparent;
}
/* 小見出し用 */
.deco-\# {
font-weight: bold;
font-size: 110%;
border-bottom: solid 2px #ccc;
padding-bottom: .2rem;
}
code:style.css
/* ＃で始まるタグをラベル風にする */
atype="hashTag"{
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background: #fff;
color: #f27e48;
font-size: 0.8em;
border: 1px solid #f27e48;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
atype="hashTag":hover{
-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 }
.grid li.page-list-item a .pin::after {
content: '\f08d'; font-family: 'FontAwesome'; font-size: 20px; color: #00FFOO; bottom: 0;
diplay: inline-block; transform: rotate(35deg) }
マーカーはここから
code:style.css
/* 二重括弧による強調をマーカーっぽくする */
.line strong:not(class) {
background: linear-gradient(transparent 15%, #EE6500 25%, #EE6500 60%, transparent 95%)
}
code:style.css
/* 付箋記法のスタイル例 */
.line:not(.cursor-line) .deco-\~ {
display: inline-block; position: absolute; top: -0.6em; right: -6vw;
max-width: 40%; padding: .3rem 1rem;
border-right: 1rem solid #04B2D9;
color: #000;
background-color: #f9f8f6;
transform: rotate(-0.8deg); box-shadow: 4px 1px 3px rgba(0,0,0,.2) }
@media screen and (max-width: 768px) { .line:not(.cursor-line) .deco-\~ { position: static; max-width: 100% } }
.presentation .line .deco-\~ { position: static; max-width: 100% }
@media print { .line:not(.cursor-line) .deco-\~ {
right: 0; border-bottom: 1px solid #ccc; background-color: #f9f8f6 } }
/* 太字記法との組み合わせでスタイルを変える場合 */
/* カラーパレット→ https://color.adobe.com/Softie-color-theme-2233237/ */
.line .level-2 .deco-\~ { border-right-color: #009175 }
.line .level-3 .deco-\~ { border-right-color: #EFBB33 }
.line .level-4 .deco-\~ { border-right-color: #F23E2E }
/* 付箋記法内で打消し線記法と下線記法を併用する場合 */
.line .deco-\~.deco-- { text-decoration: line-through }
.line .deco-\~.deco-_ { text-decoration: underline }
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
/* マウスを乗せた時の色を変更　*/
.grid li.page-list-item a .hover {
background-color: #ACACAC;
}
code:style.css
/* マトリクス記法：[[][]...] */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.line class^="level" .deco-\| { flex-wrap: wrap }
.line .level-1 .deco-\| > span { width: calc(100%/1) }
.line .level-2 .deco-\| > span { width: calc(100%/2) }
.line .level-3 .deco-\| > span { width: calc(100%/3) }
.line .level-4 .deco-\| > span { width: calc(100%/4) }
.line .level-5 .deco-\| > span { width: calc(100%/5) }
.line class^="level" .deco-\| img.image { object-fit: cover; width: 100%; height: 100% }
/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */
.line .deco-\| > span, .line class^="level" .deco-\| > span { overflow: hidden }
.line .deco-\| img.image, .line class^="level" .deco-\| img.image { margin: .2em }
code:style.css
/* icon丸く*/
.icon {
border-radius: 50%;
}
栞はここからいじろう
code:style.css
/* しおり記法 -- 栞箇所のマークやハイライトが不要な場合はこのブロックは消してね */
@media screen {
.app:not(.presentation) .line .deco-\. {
background-color: #F5FAEA;
color: #000 }
.app:not(.presentation) .line .deco-\.::after {
position: absolute; top: 3px; left: -1.4em;
content: '\f02e'; font: 1.7rem/1 'FontAwesome'; color: yellowgreen } }
@media screen and (max-width: 990px) {
.app:not(.presentation) .line .deco-\.::after { position: static; padding-left: .3em } }
/* 栞一覧を出すページメニューボタンのスタイル -- ここは必要 */
a#Bookmarks.tool-btn:hover { text-decoration: none }
a#Bookmarks.tool-btn::before {
position: absolute; left: calc(46px/3); content: '\f097'; font: 20px/46px 'FontAwesome' }
a#Bookmarks.tool-btn img { opacity: 0 }
code:style.css
/* 文字数カウンターのスタイル */
#__charCounter__ span {
cursor: pointer; font: 88%/1 monospace;
opacity: .35; /* ←マウスを乗せてないときの濃さ 35% */
color: white;
transition: opacity .2s ease-out }
#__charCounter__ span:hover { opacity: 1 } /* ←マウスを乗せたときの濃さ 100% */
#__charCounter__ { z-index: 30; position: sticky; bottom: 0; text-align: right }
/* ポップアップのスタイル */
#__charCounterPopup__ {
z-index: 30; position: absolute; bottom: 2em; right: -1em;
border-radius: .25em; border: 1px solid #ddd; box-shadow: 0 0 8px 1px rgba(8,8,8,.1);
padding: .8em; background-color: azure; color: #5F9EA0; font: 13.5px/1.4 monospace;
transition: opacity .3s ease-out }
/* プレゼンモードのときは非表示にする */
.presentation #__charCounter__,
.presentation #__charCounterPopup__ { display: none }
codeBlockのカスタマイズ
code:style.css
.line span.code-block {
background-color: #282a36;
}
.line code > span > span {
color: #f8f8f2;
}
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
}
.hljs-built_in,
.hljs-selector-tag,
.hljs-section,
.hljs-link {
color: #8be9fd;
}
.hljs-keyword {
color: #ff79c6;
}
.hljs,
.hljs-subst {
color: #f8f8f2;
}
.hljs-title {
color: #50fa7b;
}
.hljs-string,
.hljs-meta,
.hljs-name,
.hljs-type,
.hljs-attr,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable {
color: #f1fa8c;
}
.hljs-comment,
.hljs-quote,
.hljs-deletion {
color: #6272a4;
}
.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 {
color: #bd93f9;
}
.hljs-emphasis {
font-style: italic;
}
code:style.css
.hljs-selector-id, .hljs-selector-class {
color: #50fa7b;
}
.hljs-params, .hljs-built_in {
color: #50fa7b;
}
.hljs-regexp {
color: #f1fa8c;
}
code:style.css
/* code blockのフォントを小さくする設定 */
span.code-block {
line-height: 20px;
font-size: 90%;
}
/* code blockの頭を静かな色にする */
.line span.code-block .code-block-start {
border: solid 1px #66667F;
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
body {
background-image: URL('https://i.gyazo.com/3e9849238d18e9b247c988503642af59.jpg');
}
.page {
background-color: #373737;
opacity: 0.9;
}
.line.line-title .text {
color:#D0CDDA;
}
これなんだ？
code:style.css
/* PC表示ではデフォルトより大きめに表示・文字色 */
.line {
font-size: 110%;
line-height: 1.7;
color: #D0CDDA;
}
/* スマホ表示ではより小さめに表示する */
@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
.title{
color: white;
}
.page-list-item.grid-style-item{
opacity: 0.95;
}
.page-list-item .content{
background-color: #373737;
color: white;
}
.page-list-item > a{
color: white;
background-color: #373737 !important;
opacity: 0.95;
}
.page-list-item .header{
border-color: black !important;
}
.page-list-item .header>.title{
background-color: #373737;
color: white !important;
}
箇条書きの設定
code:style.css
.line .indent-mark .dot {
background-color: transparent ;
border: 3px double #D0CDDA ;
}
カーソル白く
code:style.css
/* デフォルトのままだと背景を暗くしたコードブロック内でカーソルが見えなくなるので、色や太さを変更 */
.cursor { width: 3px; background-color: #ccc }