settings
使いながら少しずつ改良を重ね中(Last Updated 2018/12)
使用上の注意
◆目次
>
>▼Settingページの説明
>(該当箇所へ) ➡︎ settings#5b67f3241a4b8a0000ef783f
>
>▼カスタマイズ内容
>(該当箇所へ) ➡︎ settings#5b62a5521a4b8a0000037899
>
Settingページの説明
◆作成する際参考にしたページ
◆このページのCSSを他ののScrapboxプロジェクトでも適用するには？
▼参考にしたページ
▼設定方法
①「settings」というタイトルのページを作成する]
このページと同様にScrapboxにsettingページを作成する
②スタイルシートをインポートする
「style.css」というタイトルのコードブロックを作り、以下のように記載
"インポートしたいスタイルシートのURL"」部分を「"/api/code/Porin-Room/settings/style.css"」にするとこのページのcssをインポートできる
style.css @import "インポートしたいスタイルシートのURL"; ③ページを再読み込み
あとはページを再読み込みすれば、CSSが適用されて同じデザインが使える...はず
その他の詳しい内容
参照ページ：インポート構文 - Scrapboxとあそぶに載ってる
2. カスタマイズ内容
>
>1. コードブロック：(該当箇所へ) ➡︎ settings#5b67a2c31a4b8a0000b4dde7>
>2. 吹き出し：(該当箇所へ) ➡︎ settings#5b5c21e01a4b8a00007c0c2e
>3. 強調文字：(該当箇所へ) ➡︎ settings#5b62a5a01a4b8a00000378a4
>4. エディタ内の文字表示：(該当箇所へ) ➡︎ settings#5b5fc2cf1a4b8a0000b016bc
>5. 各記法のアレンジ：(該当箇所へ) ➡︎ settings#5b62a20e1a4b8a0000284207
>6. 画像：(該当箇所へ) ➡︎ settings#5b64f4a21a4b8a00007db7be
>7. 背景：(該当箇所へ) ➡︎ settings#5b77d9581a4b8a0000f58523
>8. ヘッダー：(該当箇所へ) ➡︎ settings#5b62a03d1a4b8a00007db37c
>9. トップページ：(該当箇所へ) ➡︎ settings#5b62a6141a4b8a00000378bd
>
1. コードブロック
◆コードブロックに行番号を表示
style.css.section-title, .code-block-start { counter-reset: codeline }
.code-block code > span:not([class]) {
counter-increment: codeline
}
body:not(.presentation) .code-block code > span:not([class])::before {
content: counter(codeline);
position: absolute;
display: inline-block;
left: -4rem;
z-index: 10;
min-width: 50px;
text-align: right;
vertical-align: bottom;
}
/* 行番号の色 */
.code-block code > span:not([class])::before { color: #D181FF; }
/* カーソル選択時の行番号の色 */
.cursor-line .code-block code > span:not([class])::before {
color: #FF00F0;
font-weight: bolder ;
}
◆コードブロックの背景や文字
追記
(2018/8/6)こちらを参考に、ちょっと手直しした
style.css/* コード全体のCSS */
.line code {
color: #f8f8f2;
}
.line span.code-block {
background-color: black;
/* code blockのフォントを小さくする設定 */
line-height: 1.4;
font-size: 100%;
}
.page-list-item .description code,
.line code,
.line span.code-block {
font-family: "MyricaM M", "Ricty Discord", "Ricty Diminished Discord", "Ricty", "Ricty Diminished", monospace ;
}
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
}
style.css /* コードブロックのタイトルの文字色 */
.line span.code-block .code-block-start { color: #342d9c; }
style.css/* 各セレクタやプロパティの色を変更 */
.hljs-title,
.hljs-built_in,
.hljs-selector-tag,
.hljs-section,
.hljs-link,
.hljs-attribute {
color: #00FFFF;
}
.hljs,
.hljs-subst {
color: #f8f8f2;
}
.hljs-name,
.hljs-meta {
color: #65B5FF;
}
.hljs-type,
.hljs-attr,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable,
.hljs-params,
.hljs-built_in {
color: #f1fa8c;
}
.hljs-comment,
.hljs-quote,
.hljs-deletion {
color: #0C0;
}
.hljs-class .hljs-title,
.hljs-literal,
.hljs-number {
color: #bd93f9;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-selector-id,
.hljs-selector-attr,
.hljs-keyword,
.hljs-selector-pseudo {
color: #FE7F7F;
}
.hljs-selector-class,
.hljs-string { color: #FFC323; }
.hljs-regexp {
color: #f1fa8c;
}◆キャレット（カーソル）の色を変える
style.css/* デフォルトのままだと背景を暗くしたコードブロック内でカーソルが見えなくなるので、色や太さを変更 */
.cursor { width: 3px; background-color: #ccc }
▼こんな感じ
2. セリフ用の吹き出し
◆吹き出しの枠
style.css.deco-\{, .deco-\} {
font-weight: bold;
background-color: #8B8B8C;
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: #0000CD;
}
/* スマホ画面 */
@media screen and (max-width: 768px) {
.deco-\{, .deco-\} {
padding: 1rem;
}
}◆右吹き出しのツノ
style.css.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: #8B8B8C transparent;
}◆左吹き出しのツノ
style.css.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: #8B8B8C transparent;
}▼こんな感じに
左吹き出し
強調文字
◆太字の表示
style.css/* 太字の太さを変更 */
html[data-os*='mac'] .line strong.level, .line strong.level[data-os*='mac'] {
font-weight: bold;
}
/* 通常太字 */
.line strong:not([class]) {
color: #009999;
}
/* 小見出し用 */
.deco-\# {
font-weight: bold;
font-size: 110%;
border-bottom: solid 2px #ccc;
padding-bottom: .2rem;
}
/* アスタリスク4つの強調文字 */
.line strong.level-4 {
font-weight: bold;
line-height: 2;
border-bottom: solid .2rem #ccc;
border-left: solid #5e8af7 1rem;
padding: 1.5rem;
}
/* アスタリスク4つの強調文字 */
.line strong.level-2 {
font-size: 1.3em;
border-left: solid .5rem #7D7D7D;
background: linear-gradient( transparent 90%, #AD6464 0% );
line-height: 1.5;
padding: .8rem;
padding-left: 1rem;
}
/* スマホ表示を調整 */
@media screen and (max-width: 768px) {
.line strong.level-4 {
font-size: 130%;
line-height: 1.8;
font-weight: bold;
padding: .7rem;
}
.line strong.level-2 {
font-size: 110%;
font-weight: bold;
line-height: 2;
}
.deco-\# {
font-size: 100%;
}
}
▼表示結果と記法
アスタリスク4つ
書き方：
[**** アスタリスク4つ] 表示：アスタリスク4つ
アスタリスク二つ
書き方：
[** アスタリスク2つ] 表示：アスタリスク2つ
小見出し用
書き方
[# 小見出し] 表示：小見出し
通常の太字
書き方：
[[通常の太字]] 表示：通常の太字
◆重要な部分を強調
style.css/* 赤背景に白文字 */
.deco-\! {
color: #fff;
background-color: #ee6666; /* 赤背景 */
border-radius: .4em;
padding: .3em;
border-bottom: none;
}
/* 赤線 */
.deco-\% {
font-weight: bold;
background: linear-gradient( transparent 65%, #ee6666 0% )
}▼表示結果と記法
赤背景に白文字
書き方
[! 赤背景に白文字] 表示：赤背景に白文字
黒文字に赤線
書き方：
[% 黒文字に赤線] 表示：黒太字に赤線
◆タイトル
style.css.line.line-title {
font-weight: bold;
border-bottom: solid 3px #ccc;
line-height: 1.4;
color: white;
}
.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;
}
}▼こんな感じになる
3. 基本の文字表示
◆通常テキスト
style.css/* フォント */
@font-face {
font-family: "Yu Gothic" ;
src: local("Yu Gothic Medium") ;
font-weight: 100 ;
}
@font-face {
font-family: "Yu Gothic" ;
src: local("Yu Gothic Medium") ;
font-weight: 200 ;
}
@font-face {
font-family: "Yu Gothic" ;
src: local("Yu Gothic Medium") ;
font-weight: 300 ;
}
@font-face {
font-family: "Yu Gothic" ;
src: local("Yu Gothic Medium") ;
font-weight: 400 ;
}
@font-face {
font-family: "Yu Gothic" ;
src: local("Yu Gothic Bold") ;
font-weight: bold ;
}
@font-face {
font-family: "Noto Sans CJK JP" ;
src: src("Noto Sans CJK JP Medium") ;
font-weight: 100 ;
}
@font-face {
font-family: "Noto Sans CJK JP" ;
src: src("Noto Sans CJK JP Medium") ;
font-weight: 200 ;
}
@font-face {
font-family: "Noto Sans CJK JP" ;
src: src("Noto Sans CJK JP Medium") ;
font-weight: 300 ;
}
@font-face {
font-family: "Noto Sans CJK JP" ;
src: src("Noto Sans CJK JP Medium") ;
font-weight: 400 ;
}
@font-face {
font-family: "Noto Sans CJK JP" ;
src: src("Noto Sans CJK JP Bold") ;
font-weight: bold ;
}
@font-face {
font-family: "Apple Fallback" ;
src: local("-apple-system"), local("BlinkMacSystemFont") ;
}
@font-face {
font-family: "Windows Fallback" ;
src: local("Meiryo");
}
@font-face {
font-family: "Unix Fallback" ;
src: local("TakaoPGothic"),local("VL PGothic") ;
}
html, body, .editor, .grid li {
font-family:
"YakuHanJP", "Noto Sans CJK JP", "Source Hans Sans Japanese", "Yu Gothic", "YuGothic",
"Noto Sans CJK", "Source Hans Sans", "Apple Fallback", "Windows Fallback", "Unix Fallback", sans-serif ;
-moz-font-feature-settings: "lnum", "pnum" ,"plat" ;
-webkit-font-feature-settings: "lnum", "pnum", "plat" ;
font-feature-settings: "lnum", "pnum", "plat" ;
}
style.css/* PC表示ではデフォルトより大きめに表示 */
.line {
font-size: 110%;
line-height: 1.7;
color: white;
}
/* スマホ表示ではより小さめに表示する */
@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;
}
}◆リンク
style.css/* 空のリンクの色を通常リンクと同じにする */
.line a.empty-page-link {
color: #5e8af7;
}
/* 別タブ開くリンクをわかりやすくする */
.line a.link:not(.icon)::after {
font-family:'FontAwesome';
content: ' \f08e';
display: inline-block
}
/* ページ内リンクには別のアイコンをつける */
.line a.page-link {
border-bottom: solid .1rem #5e8af7;
}
.line a.page-link::before {
font-family:'FontAwesome';
content: ' \f0f6';
display: inline-block;
margin-right: .2rem;
}
▼こんな感じ
通常リンク：Porin's Workspace
ページ内リンク：Porin
4. 各記法のアレンジ
◆リスト
style.css.line .indent-mark .dot {
border-radius : 1px ;
background-color: transparent ;
border: 3px double #ccc ;
}◆引用文
style.css.line .quote {
font-style: normal;
padding: .1rem 1em;
}>こんな感じに表示される
◆テーブル記法
▼テーブル記法とは？
style.css.table-block-row .cell:nth-child(even) {
color: black;
background-color: gray;
}
.table-block-row .cell:nth-child(odd) {
color: black;
background-color: #ccc;
}5. 画像
◆画像の周りに影をつける
▼参考
▼コード
style.css .deco-\| img{
box-shadow: 0px 0px 10px 0px #000;
}▼書き方
[| [画像URL]] ▼表示
Before
After
◆アイコンを円でくり抜く
style.css.icon {
border-radius: 50%;
}6. 背景
▼コード
style.css.page { background-color: #373737; }7. ヘッダー
◆ヘッダーメニューを固定する
style.css/* PC画面 */
@media screen and (min-height: 600px) and (min-width: 768px) {
.app:not(.presentation) {
padding-top: 90px;
padding-right: 0 !important
}
.app: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;
left: auto;
top: auto;
max-height: calc(100vh - 100px);
overflow-y: auto
}
.dropdown.open .dropdown-menu.global-menu {
left: 0;
top: 54px
}
.page-menu .dropdown.open .dropdown-menu {
position:
absolute;
top: 0
}
}
/* スマホ向け */
@media screen and (orientation: portrait) and (min-height: 600px) and (max-width: 768px) {
.app:not(.presentation) { padding-top: 90px }
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 990;
overflow: unset
}
.dropdown.open .dropdown-menu {
max-height: calc(100vh - 130px);
overflow-y: auto
}
}◆ヘッダーの見た目
style.css/* 不要な要素を隠す */
a.new-button {
display: none;
}
.navbar-default {
/* background-color: #9eb6f3; */
}8. トップページ
◆トップページのレイアウト
style.css
/* 不要なメニューを消す */
input.grid-size-range {
display: none;
}
/* タイトル */
.quick-launch .project-home {
border-radius: 0;
}
a.project-home {
border-bottom: solid .2rem #BC8F90;
}
/* ページカード */
.page-list .grid li {
width: 18rem;
height: 18rem;
margin: 0 2.5rem 2.5rem 0;
}
.grid li.page-list-item a {
border-radius: .5rem;
border: solid #555 .1rem;
}
/* ページタイトル */
.grid li.page-list-item a .header {
border-top: none;
padding: 1.3rem 1.5rem;
color: white;
}
.grid li.page-list-item a .title {
height: 8rem;
font-weight: bold;
}
html[data-os*='mac'] .grid li.page-list-item a .title {
font-weight: bold;
}
/* サムネ画像をフィットさせる */
.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% + 40px);
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);
}
}▼表示はこんな感じに
◆ピンアイテムの表示を変更
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: #A45AFF;
bottom: 0;
display: inline-block;
transform: rotate(35deg);
}◆ページカードをホバー時の色を変える
style.css/* マウスを乗せた時 */
.grid li.page-list-item a .hover {
background-color: #ACACAC;
}
▼表示はこんな感じ
（了）
Kyashについてはこちら
▼ 39円送金してThank Youを送れます
ここからKyashの送金画面に飛べます
▼QRコード（Kyashアプリで読み込んでね）
