settings
#management
背景
code:style.css
.page { background-color: #fff;}
code:import.css
@import "https://scrapbox.io/api/code/scrasobox/フキダシになるタグ/style.css";
フォント
code:style.css
@import url("https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c");
.editor, .stream {
font-family: 'M PLUS Rounded 1c', sans-serif;
}
ピン留め
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: '\f02e'; font-family: 'Font Awesome 5 Free'; font-weight: 900;
font-size: 20px; color: #FF66CC; bottom: 0; transform: rotate(20deg); }
- ピン留め表示しない
code:style.css
.page-list .grid li.page-list-itemdata-page-title="settings"{
display: none;
}
.page-list .grid li.page-list-itemdata-page-title^="HowToWrite"{
display: none;
}
.page-list .grid li.page-list-itemdata-page-title^="diary"{
display: none;
}
.page-list .grid li.page-list-itemdata-page-title^="tokirosu"{
display: none;
}
吹き出し
/Porin-Room/settings
code:style.css
.deco-\{, .deco-\} {
font-weight: bold;
background-color: #FDB9C8;
padding: 1.2rem;
border-radius: .5rem;
margin: auto 1rem;
display: inline-block;
max-width: calc(100% - 100px); /* 長いセリフの折り返しをいい感じにする */
vertical-align: top;
}
/* 吹き出し内の文字色 */
.deco-\{ span,
.deco-\} span {
color: #455D49;
}
/* 吹き出し内のリンク色 */
.deco-\{ a,
.deco-\} a {
color: #0000CD;
}
/* スマホ画面 */
@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: #FDB9C8 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: #FDB9C8 transparent;
}
文字装飾
/Porin-Room/settings
code:style.css
/* 太字の太さを変更 */
htmldata-os*='mac' .line strong.level, .line strong.leveldata-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%;
}
}
.line.line-title {
font-weight: bold;
border-bottom: solid 3px #ccc;
line-height: 1.4;
color: #916264;
/* 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;
}
}
リンク
/Porin-Room/settings
code:style.css
/* 空のリンクの色を通常リンクと同じにする */
.line a.empty-page-link {
color: #5e8af7;
}
/* 別タブ開くリンクをわかりやすくする */
.line a.link:not(.icon)::after {
font-family:'Font Awesome 5 Free';
font-weight: 900;
content: ' \f360';
display: inline-block
}
/* ページ内リンクには別のアイコンをつける */
.line a.page-link {
border-bottom: solid .1rem #5e8af7;
}
.line a.page-link::before {
font-family:'Font Awesome 5 Free';
content: '\f15c';
display: inline-block;
margin-right: .2rem;
}
画像に黒枠
/Porin-Room/settings
code:style.css
.deco-\| img{
box-shadow: 0px 0px 10px 0px #000;
}
円アイコン
/Porin-Room/settings
code:style.css
.icon {
border-radius: 50%;
max-height: 16em; height: auto;
}
ヘッダーメニュー
/Porin-Room/settings
code: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
}
}
/* 不要な要素を隠す */
a.new-button {
display: none;
}
.navbar-default {
/* background-color: #9eb6f3; */
}
/* 不要なメニューを消す */
input.grid-size-range {
display: none;
}
/* タイトル */
quick-launch .project-home {
border-radius: 0;
}
a.project-home {
border-bottom: solid .2rem #BC8F90;
}
ネタバレ防止記法
/villagepump/曇りガラス記法より
code:style.css
.deco-\~:not(:hover) {
filter: blur(3px);
}
.cursor-line .deco-\~:not(:hover) {
filter: none;
}
＃で始まるタグをラベル風にする
settings - Porter for Scrapbox オンラインヘルプより
code:style.css
atype="hashTag" {
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background: #fff;
font-size: 0.8em;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
color: #4b7ff5;
border: 1px solid #4b7ff5;
}
atype="hashTag".empty-page-link {
color: #ed8362;
border: 1px solid #ed8362;
}
atype="hashTag":hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
/customize/ピン留めされたページを独立した段に表示する
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
カードに画像が不要
code:style.css
.grid li.page-list-item a .icon {
display:none;
}