settings
https://gyazo.com/32ca8bbd9692e38bc850f614c7d3043e
（上記の画像は一覧のときに白紙だとそっけなくなるので入っている。）
フッター
thanks!: /himazine/settings#5d75ec694f825300004311c9
新規作成のときに、自分のプロジェクトなのか編集権限のある他のプロジェクトなのか判断しやすくなる。
このstyle.cssをこのページの一番下に書いたら反映されなかったのでここに書いた。
code:style.css
.app:not(.presentation) .page::after {
/* 画像を使うパターン content: url("https://images-na.ssl-images-amazon.com/images/I/51L7tTg9PML._SX350_BO1,204,203,200_.jpg"); */
/* content: 'フッターのテスト'; */
/* content: url("https://nwtgck.org/static/nwtgck-30x30.jpg"); */
/* content: url("https://i.gyazo.com/d64983527b8ed7806c8559669c563614.png"); */
content: url("https://gyazo.com/d64983527b8ed7806c8559669c563614/thumb/35#.png");
display: block;
/* margin-top: 1rem; */
/* padding: 0rem 0; */
text-align: right;
/* border: solid #0003; border-width: 1px 0; font: 500 normal 1.8rem/1 sans-serif */
}
タグのデザイン
thanks: /memooooo/settings
thanks: /MISONLN41/settings#5e64f016ec4fce0000f2a76b
code:style.css
/* ＃で始まるタグをラベル風にする */
atype="hashTag" {
display: inline-block;
margin: 4px;
font-size: 14px;
height: 32px;
width: auto;
padding-left: 8px;
padding-right: 8px;
padding-top: 2px;
padding-bottom: 2px;
border-radius: 2px;
border-style: none;
color: #090909 !important;
background-color: rgba(12, 12, 13, 0.1);
}
atype="hashTag":hover {
background-color: rgba(12, 12, 13, 0.2);
}
atype="hashTag":active {
background-color: rgba(12, 12, 13, 0.3);
}
ページリンク
code:style.css
a.link, atype="link" {
color: #5884f1 !important;
}
空ページへのリンク
code:style.css
atype="link".empty-page-link {
color: #309b98 !important;
}
ブランドアイコンの変更
thanks: /yamanoku/settings
code:style.css
/* Overwrite the brand icon */
a.navbar-brand.dropdown-toggle {
position: relative;
}
a.navbar-brand.dropdown-toggle::before {
content: "";
width: 32px;
height: 32px;
display: block;
position: absolute;
top: 3px;
left: -2px;
background-image: url(https://gyazo.com/d64983527b8ed7806c8559669c563614.png);
background-size: contain;
background-repeat: no-repeat;
/* (from: http://www.safaridesign.jp/design-note/css_circle_clipping_a_photo/) */
border-radius: 50%;
}
プロジェクトタイトル系
code:style.css
/* .project-home>.title {
/* Make title line-height more narrow */
/* line-height: 1em; */
/* } */
/* Project description */
/* .project-home>.title:after { */
/* content: "\A\A　技術的なこと、想いとか \A 🎋ReadableStreamがアップロード出来るようになりますように🌟"; */
/* content: "\A\A　静的に安全性を保証できる技術が好き"; */
/* content: "\A\A　技術的なこととか、たまに非技術も。"; */
/* white-space: pre; */
/* font-size: 0.7em; */
/* } */
外部リンクにアイコンつける
thanks: /scrasobox/settings
code:style.css
/* External links */
/*
.line a.link:not(.icon)::after {
font-family:'FontAwesome';
content: ' \f08e';
display: inline-block;
}
*/
.line a.link:not(.icon)::after {
font-family:'Font Awesome 5 Free';
font-weight: 900;
content: ' \f35d';
display: inline-block;
}
Scrapboxで<kbd>みたいなキーボードショット記法
code:style.css
.deco-\< {
background-color: #fafbfc;
border: 1px solid #c6cbd1;
border-bottom-color: #959da5;
border-radius: 3px;
box-shadow: inset 0 -1px 0 #959da5;
color: #444d56;
display: inline-block;
line-height: 10px;
padding: 5px 8px;
vertical-align: middle;
}
ピンしたページのスタイル
ピンがはっきり分かって良い。
thanks: /scrasobox/settings
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: #996633;
bottom: 0;
display: inline-block;
transform: rotate(35deg);
/* (base: https://ferret-plus.com/8961) */
filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.5));
}
*/