settings
非表示
https://scrapbox.io/files/637b25970720eb001d77fb83.png
お借りしました。 見せられないのだ
参考にしてもいいけどけっこうガバガバですw
フォント　参考にした：/noratetsu/●（今更ながらフォント調整）、/customize
code:style.css
@import url("https://fonts.googleapis.com/css?family=Kosugi+Maru|M+PLUS+Rounded+1c");
/* .grid liはグリッドカードのところのタイトル */
.grid li {
/* font-family: "Kosugi Maru", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !important; */
font-family: BIZ UDGothic,Roboto,HelveticaNeue,Arial,sans-serif;
}
/* .editorは本文。 */
.editor, .stream {
color: #373942 !important; /* 全体のフォントカラーを変える */
/* font-family: "Kosugi Maru", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !important; */
font-family: BIZ UDGothic,Roboto,HelveticaNeue,Arial,sans-serif;
}
ページの横幅を広げる　参考にした：/foldrr/scrapbox-page-width
code:style.css
.col-page {
max-width: none;
}
.col-page-side {
width: 0%;
position: absolute;
left: 0px;
}
z
/icons/hr.icon
html
code:style.css
html {
width: 100%;
height: 100%;
}
body
code:style.css
body {
margin-bottom: 0px; /* なんで20pxって入れているんだw */
width: 100%;
height: 100%;
}
背景
code:style.css
body:before {
background-image URL('https://gyazo.com/63ea1053219b937dd27a492f90158d47.png');
/* 画像を常に天地左右の中央に配置 */
background-position: center center;
/* 画像をタイル状に繰り返し表示しない */
background-repeat: no-repeat;
/* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
background-attachment: fixed;
/* 表示するコンテナの大きさに基づいて、背景画像を調整 */
background-size: cover;
background-color: #FFFFFF;
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: blur(0px);
z-index: -1;
}
code:style.css
divid="app-container" {
width: 100%;
height: 100%;
}
.app
code:style.css
.app {
padding-top: 0px; /* なんで68pxってなっているんだろう。このサイトの製作者のミスか？ */
width: 100%;
height: 100%;
}
左右の余白
code:style.css
@media (max-width: 500px) {
.container {
max-width: none;
width: 100%;
padding: 0;
}
}
@media (min-width: 501px) and (max-width: 9999px) {
.container {
max-width: none;
width: 100%;
padding: 0 24px;
}
}
ナビゲーションバー
code:style.css
.navbar {
margin-bottom: 0px;
box-shadow: 0 5px 10px rgb(0 0 0 / 10%); /* 影 */
background: linear-gradient(to right, rgb(255 157 193 / 90%), rgb(87 232 255 / 70%));　/* グラデーション */
}
.navbar .row {
height: 100%;
align-content: center;
}
ヘッダーのScrapboxアイコンと「⌵」の親要素
code:style.css
.navbar .row .col-brand {
width: 23px !important;
flex-grow: 0 !important;
}
ヘッダーのScrapboxアイコンと「⌵」のアニメーション
code:style.css
.navbar .navbar-brand {
transition-duration: 0.4s;
padding: 0;
}
.navbar .navbar-brand:hover {
transform: scale(1.3);
}
ヘッダーのScrapboxアイコンと「⌵」　参考にした：/scrasobox/ヘッダーメニューをカスタマイズ
code:style.css
/* Scrapboxアイコンの表示をなくす */
.brand-icon {
display: none;
}
/* 三本横線を表示 */
.navbar .navbar-brand::before {
content: '\f0c9';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 1.4em;
color: #FFFFFF;
}
/* Scrapboxアイコンの右隣の「⌵」を非表示 */
.kamon-caret-down {
display: none;
}
/icons/hr.icon
.quick-launch
上
code:style.css
.quick-launch {
margin-top: -10px;
margin-bottom: 0px !important;
}
.quick-launch.layout-list {
margin: 0 calc(50% - 50vw);
background-color: #FFFFFF;
width: 100vw;
height: 190px;
background-image: URL('https://gyazo.com/be0eaab200390966692d82cd6d58a81a.png');
/* 画像を常に天地左右の中央に配置 */
background-position: center center;
/* 画像をタイル状に繰り返し表示しない */
background-repeat: no-repeat;
/* 表示するコンテナの大きさに基づいて、背景画像を調整 */
background-size: cover;
}
ヘッダーにプロジェクト名を入れる
code:style.css
.quick-launch .flex-box {
display: block;
}
.quick-launch .flex-box .flex-item {
width: 100%;
}
.quick-launch .left-box {
width: 40%; /* スマホ用、画面が縦長いときタイトルを狭くする */
position: fixed; /* スクロールしても位置が変わらない */
top: 0px; /* 垂直位置 */
z-index: 1000; /* 要素の手前に置く（デフォルトでヘッダーのz-indexが1000になっているため1000にしています */
margin-left: 65px;
}
プロジェクト名のリンクのアニメーション
code:style.css
.quick-launch .project-home {
transition-duration: 0.4s; /* トランジションによるアニメーションが完了するまでの所要時間 */
}
.quick-launch .project-home:hover {
background-color: transparent !important; /* プロジェクト名にマウスポイントするとグレーに染まるの無くす */
transform: scale(1.1); /* マウスポインタを合わせるとおっきくなるよ！ */
}
プロジェクト名について
code:style.css
.quick-launch .project-home .title {
max-width: 300px; /* 要素の最大幅を指定（プロジェクト名が長いときの対策用らしい） */
font-family: "Kosugi Maru", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !important;
color: #FFFFFF; /* プロジェクト名の色 */
font-size: 20px; /* プロジェクト名のフォントサイズ */
white-space: nowrap; /* 行を自動折り返しの場面で折り返さない */
overflow: hidden; /* 領域内に収まりきらない内容をどう処理するかを指定する(表示しねーよw) */
text-overflow: ellipsis; /* 領域内に収まりきらない内容をどう処理するかを指定する(「...」にするわw) */
}
code:style.css
.quick-launch .right-box {
position: absolute;
margin-top: 470px;
right: 0px;
left: auto;
z-index: 999;
}
.page-sort-menu .tool-btn {
transition-duration: 0.4s; /* トランジションによるアニメーションが完了するまでの所要時間 */
padding: 0px 15px 0px;
}
.page-sort-menu .tool-btn::after {
content: "\E016";
font-family: "AppIcons";
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-style: normal;
font-variant: normal;
font-weight: normal;
text-decoration: none;
text-transform: none;
font-size: 24px;
}
.page-sort-menu .tool-btn:hover {
border-radius: 8px;
}
スマホ用投稿ボタン　参考にした：/noratetsu/●newボタンをフローティングボタン風にする
code:style.css
@media screen and (max-width: 767px) {
/* newボタンの位置を変更する */
.new-button {
width: 64px !important;
height: 37px !important;
border-radius: 14px !important;
position: fixed;
z-index: 1000; /* 最前面に表示 */
bottom: 7vh;
right: 10vw; /* leftにすると左下になる */
box-shadow: 0px 0px 20px 5px rgb(0 0 0 / 10%);
}
}
/icons/hr.icon
.page-list
code:style.css
.page-list.clearfix {
min-width: 400px;
margin: 0 calc(50% - 50vw);
width: 100vw;
}
.page-list ul.grid {
margin: 20px 45px 0px 45px;
}
@media screen and (max-width: 500px) {
.page-list ul.grid {
margin: 20px 15px 0px 15px;
}
}
/arpla/ピン留めを小さなパネルにするUserCSS
code:style.css
.grid li.pin:not(data-page-title="画像を無限にミラーエッジする方法【AviUtl】",data-page-title="こきくん") {
top: 0px !important;
height: 50px !important;
width: 15% !important;
max-width: 120px;
padding: 0px 5px 0px 5px;
margin: 0 !important;
}
.grid li.pin:not(data-page-title="画像を無限にミラーエッジする方法【AviUtl】",data-page-title="こきくん") a {
background-color: #b8dcff !important;
margin: 0px !important;
}
.grid li.pin:not(data-page-title="画像を無限にミラーエッジする方法【AviUtl】",data-page-title="こきくん") .header {
border-top:none !important;
padding: 0px 0px !important;
}
.grid li.pin:not(data-page-title="画像を無限にミラーエッジする方法【AviUtl】",data-page-title="こきくん") .title {
font-size: 1em !important;
max-height: 20px !important;
color: #FFFFFF !important;
margin: 5px 5px 5px 5px !important;
}
.grid li.page-list-item a .title {
overflow: visible;
}
.grid li.pin:not(data-page-title="画像を無限にミラーエッジする方法【AviUtl】",data-page-title="こきくん") .content :is(.description,.icon) {
display: none;
}
.page-list-item a .pin:not(data-page-title="画像を無限にミラーエッジする方法【AviUtl】",data-page-title="こきくん") {
background: none !important;
}
.grid li.page-list-item a .hover {
background-color: unset;
}
.page-list.clearfix .grid lidata-page-title="こきくん" {
opacity: 0;
top: 300px !important;
height: 165px !important;
width: 300px !important;
max-height: 720px;
animation: loop 20s linear infinite;
position: absolute;
margin: 0 calc(50% - 50vw) !important;
animation-delay: 10s;
}
.page-list.clearfix .grid lidata-page-title="画像を無限にミラーエッジする方法【AviUtl】" {
opacity: 0;
top: 300px !important;
height: 165px !important;
width: 300px !important;
max-height: 720px;
animation: loop 20s linear infinite;
position: absolute;
margin: 0 calc(50% - 50vw) !important;
}
@keyframes loop {
0% {
opacity: 0;
transform: translateX(100vw);
}
0.1% {
opacity: 1;
}
100% {
opacity: 1;
transform: translateX(-100vw);
}
}
450%
-100%
/takker/ページカードのタイトルを2行に収めるUserCSS
code:style.css
li.page-list-item.grid-style-item div.title {
-webkit-line-clamp: 2;
}
/customize/一覧カードを小さくするCSS
code:style.css
/* 一覧カードを小さくする */
.page-list .grid li {
width: 160px;
height: 90px;
top: 240px;
margin: 5px;
}
カードのタイトルのフォントサイズを小さくする
code:style.css
.grid li.page-list-item a .content {
height: auto;
width: auto;
}
.grid li.page-list-item a .content .title {
font-size: 8px;
color: #000000;
line-height: 1.5em;
}
/icons/hr.icon
code:style.css
.page {
margin-top: 70px;
}
ヘッダーの検索バーと投稿ボタンの親要素
code:style.css
.navbar .row .col-search {
width: 80% !important;
flex-grow: 0 !important;
/* 右寄せ */
margin-left: auto !important;
margin-right: -5% !important;
}
検索バーの親要素
code:style.css
.navbar-form .search-form {
width: 50%;
flex-grow: 0 !important;
/* 右寄せ */
margin-left: auto !important;
margin-right: 100px !important;
}
検索バーのアニメーション
code:style.css
.search-form .form-group input {
background: rgb(0 0 0 / 10%);
border-radius: 8px 8px 8px 8px;
border: 1px solid #e3e5e7;
transition: background-color .3s;
transition-property: background-color;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0s;
color: #555;
transition-duration: 0.4s;
}
.search-form .form-group input:hover {
background: rgb(255 255 255 / 80%);
}
検索欄　参考にした：/scrasobox/のびのびドロップダウン
code:style.css
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%;
max-height: calc(100vh - 130px) !important;
overflow-y: auto;
}
虫眼鏡（Windowsなぜか反映されない）
code:style.css
.btn-search {
fill: #e9e9e9 !important;
}
スマホ用検索欄
code:style.css
@media (max-width: 767px) {
.navbar .row .col-search {
display: block !important;
}
.search-form {
margin-top: 4px;
}
.navbar-form .search-form {
margin-right: 11px !important;
}
}
.navbar-form {
padding: 0px 0px !important;
border-top: 0px !important;
border-bottom: 0px !important;
box-shadow: none !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.navbar a.mobile-search-toggle {
display: none !important;
}
/icons/hr.icon
投稿ボタン
code:style.css
/* ページ追加ボタンを検索ボックスの右に移動 */
.navbar-form {
flex-flow: row-reverse;
}
.new-button {
width: 74px;
height: 25px;
background: #5fa0f1;
border-radius: 8px;
margin-left: -30px !important;
margin-right: 8px !important;
}
.new-button::before {
content: '\f304 投稿';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 0.9em;
color: #FFFFFF;
}
投稿ボタンのアニメーション
code:style.css
.new-button {
transition-duration: 0.4s;
}
.new-button:hover {
transform: scale(1.2);
background-color: #5fa0f1 !important; /* 投稿ボタンにマウスポイントすると緑に染まるの無くす */
}
投稿ボタンのプラスマークを消す
code:style.css
.new-button .horizontal-line {
display: none;
}
.new-button .vertical-line {
display: none;
}
/icons/hr.icon
ユーザーアイコンの親要素
code:style.css
.navbar .row .col-menu {
width: 3.8% !important;
}
.navbar .navbar-menu>li:not(:first-child) {
margin-left: 0px !important;
}
.navbar .navbar-menu>li {
margin-right: 80px !important;
}
スマホ用ユーザーアイコン
code:style.css
@media screen and (max-width: 767px) {
.navbar .row .col-menu {
margin-left: auto !important;
margin-right: 0px !important;
}
.navbar .navbar-menu>li {
margin-right: 5px !important;
}
}
/icons/hr.icon
バーガーアイコンの中身
code:style.css
.project-list-tab>a:nth-child(1) {
font-size: 0px;
}
.project-list-tab>a:nth-child(1)::before {
content: '自分の鯖一覧';
font-family: "Kosugi Maru", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !important;
font-size: 14px;
position: absolute;
}
.project-list-tab>a:nth-child(2) {
font-size: 0px;
}
.project-list-tab>a:nth-child(2)::before {
content: '最近みた鯖一覧';
font-family: "Kosugi Maru", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !important;
font-size: 14px;
position: absolute;
}
.project-list-filter {
display: none;
}
/icons/hr.icon
記事関係
記事の見出しとか題名とかの所
code:style.css
.line.line-title .text {
border-bottom: none;
margin-bottom: 180px !important; /* 下線の下 */
text-align: center; /* 中央寄せ */
font-size: 22px !important;
line-height: 1.8em;
text-indent: 0%;
padding-bottom: 0px !important; /* 下線の高さ */
}
記事の詳細
code:style.css
@media (max-width: 767px) {
.col-page-side {
display: block;
}
}
@media (max-width: 767px) {
.dropdown-menuaria-labelledby="page-info-menu" {
left: 31px !important;
}
}
.page-menu {
position: absolute;
}
.page-menu>div:nth-child(2) {
display: none;
}
.page-menu .random-jump-button {
display: none;
}
.page-menu .tool-btnid="page-info-menu" {
display: none;
}
.dropdown-menuaria-labelledby="page-info-menu" {
display: block !important;
background-color: rgb(0 0 0 / 0%);
box-shadow: none;
border: 0px;
left: 105px;
right: auto;
height: 90px;
top: 100px;
}
.dropdown-menuaria-labelledby="page-info-menu">li:nth-child(1) {
font-size: 0px;
}
.dropdown-menuaria-labelledby="page-info-menu">li:nth-child(1)::before {
content: '\f017\A\f0e2';
font-family: var(--stk-font-awesome-free,"Font Awesome 5 Free")!important;
font-size: 12px;
position: absolute;
top: 8px;
left: 0px;
white-space: pre;
font-weight: 600;
color: #454545;
}
.page-menu .dropdown .date-label::before {
content: '　　'attr(title);
font-family: "Kosugi Maru", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !important;
color: #000000;
font-size: 12px;
}
.dropdown-menuaria-labelledby="page-info-menu">li:nth-child(2) {
display: none;
}
.dropdown-menuaria-labelledby="page-info-menu">li:nth-child(3) {
display: none;
}
.dropdown-menuaria-labelledby="page-info-menu">li:nth-child(4) {
display: none;
}
.dropdown-menuaria-labelledby="page-info-menu">li:nth-child(5) {
display: none;
}
.dropdown-menuaria-labelledby="page-info-menu">li:nth-child(6) {
font-family: "Kosugi Maru", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !important;
position: absolute;
top: 50px;
left: 0px;
font-size: 12px;
}
.dropdown-menuaria-labelledby="page-info-menu">li:nth-child(6)::before {
content: '███';
font-family: "Kosugi Maru", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !important;
color: #FFFFFF;
font-size: 12px;
position: absolute;
}
.dropdown-menuaria-labelledby="page-info-menu">li:nth-child(6)::after {
content: '▶';
font-family: "Kosugi Maru", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !important;
color: #000000;
font-size: 12px;
position: absolute;
top: 0px;
}
.dropdown-menuaria-labelledby="page-info-menu">li:nth-child(7) {
display: none;
}
.page-menu ul>li>div {
padding: 0;
}
@media (max-width: 767px) {
.dropdown-menuaria-labelledby="page-info-menu" {
right: 150% !important;
}
}
@media (min-width: 768px) {
.dropdown-menuaria-labelledby="page-info-menu" {
right: 700% !important;
}
}
@media (min-width: 1240px) {
.dropdown-menuaria-labelledby="page-info-menu" {
right: 900% !important;
}
}
記事の背景
code:style.css
.page {
box-shadow: 0 0 5px rgba(0,0,0,0.3);
background-color: #FFFFFF;
}
/icons/hr.icon
角丸にする　参考にした：/humanaugmentation/settings
code:style.css
.page,
.grid.grid-md li.page-list-item a,
.grid.grid-lg li.page-list-item a {
border-radius: 15px;
}
.grid li.page-list-item a .header {
position: absolute;
bottom: 0px;
z-index: 1;
background: rgba(240, 240, 240, 0.6);
border-top: 0px;
padding: 1px 2px 2px 9px;
}
@media (max-width: 767px) {
.grid li.page-list-item a .icon img {
position: absolute;
top: 0px;
left: 0px;
}
}
/* TOPページの記事一覧のところ */
.grid li.page-list-item a {
box-shadow: 0 0px 20px 0px rgb(0 0 0 / 10%);
border-radius: 15px;
transition-duration: 0.4s;
width: auto;
}
.grid li.page-list-item a:hover {
border-radius: 10px;
box-shadow: 0 0px 20px 5px rgb(0 0 0 / 10%) !important;
transform: scale(1.1); /* マウスポインタを合わせるとおっきくなるよ！ */
}
.grid li.page-list-itemdata-page-title*="AviUtl" a .title::before {
content: '　';
font-size: 15px;
background: url(https://gyazo.com/fbb80edb117024270e86b2fd21b10769.png) no-repeat;
background-size: contain;
}
.grid li.page-list-itemdata-page-title*="AE" a .title::before {
content: '　';
font-size: 15px;
background: url(https://gyazo.com/38afa48a8b03782003f8e88df0480651.png) no-repeat;
background-size: contain;
}
.grid li.page-list-item a .icon {
padding: 0;
}
ピン止め
code:style.css
.grid li.page-list-item a .header.pinned {
height: 51px;
bottom: auto;
background: none;
}
/noratetsu/●別タブで開くリンクにアイコンを添える
code:style.css
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after,
.line span > a.page-linktarget="_blank"::after {
font-family: 'Font Awesome 5 Free';
content: ' \f360';
font-weight: 900;
font-size: 0.9rem;
padding-right: 0.5rem;
display: inline-block;
}
/noratetsu/●特定のリンクにfaviconをつける
code:style.css
.line a.link:is(
[href^="https://twilog.org"],
[href^="https://note.com"],
[href^="https://twitter.com"],
[href^="https://misskey.io/"],
[href^="https://www.nicovideo.jp"],
[href^="https://seiga.nicovideo.jp"],
[href^="https://www.youtube.com"],
href*="bilibili.com",
[href^="https://www.tiktok.com/"],
[href^="https://github.com"]
)::before {
display: inline-block;
width: 16px;
height: 16px;
vertical-align: -3px;
background-size: contain;
background-repeat: no-repeat;
margin-right: 2px;
}
.line a.link[href^="https://twilog.org"]::before {
content: '';
background: url(http://www.google.com/s2/favicons?domain=https://twilog.org);
}
.line a.link[href^="https://note.com"]::before {
content: '';
background: url(http://www.google.com/s2/favicons?domain=https://note.com/);
}
.line a.link[href^="https://twitter.com"]::before {
content: '';
background: url(http://www.google.com/s2/favicons?domain=https://twitter.com/);
}
.line a.link[href^="https://www.nicovideo.jp"]::before {
content: '';
background: url(http://www.google.com/s2/favicons?domain=https://www.nicovideo.jp/);
}
.line a.link[href^="https://seiga.nicovideo.jp"]::before {
content: '';
background: url(http://www.google.com/s2/favicons?domain=https://seiga.nicovideo.jp/);
}
.line a.link[href^="https://www.youtube.com"]::before {
content: '';
background: url(http://www.google.com/s2/favicons?domain=https://www.youtube.com/);
}
.line a.linkhref*="bilibili.com"::before {
content: '';
background: url(http://www.google.com/s2/favicons?domain=https://www.bilibili.com/);
}
.line a.link[href^="https://github.com"]::before {
content: '';
background: url(http://www.google.com/s2/favicons?domain=https://github.com/);
}
.line a.link[href^="https://misskey.io/"]::before {
content: '';
background: url(http://www.google.com/s2/favicons?domain=https://misskey.io/);
}
.line a.link[href^="https://www.tiktok.com/"]::before {
content: '';
background: url(http://www.google.com/s2/favicons?domain=https://www.tiktok.com/);
}
以下のサイトの末尾のアイコンを消す　参考にした：/villagepump/特定のリンクにアイコンをつけるUserCSS
code:style.css
div.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon):is(
[href^="https://twilog.org"],
[href^="https://note.com"],
[href^="https://twitter.com"],
[href^="https://www.nicovideo.jp"],
[href^="https://seiga.nicovideo.jp"],
[href^="https://www.youtube.com"],
href*="bilibili.com",
[href^="https://github.com"],
[href^="https://misskey.io/"],
[href^="https://www.tiktok.com/"]
)::after {
display: none;
}
Twilog
note
Twitter
niconico
ニコニコ静画
YouTube
bilibili
github
misskey
/noratetsu/●スクロールバーの見た目を調整する
code:style.css
::-webkit-scrollbar {
transition-duration: 0.4s;
width: 10px;
height: 5px;
}
::-webkit-scrollbar-track{
background: rgba(255, 255, 255,0);
border: none;
border-radius: 10px;
}
::-webkit-scrollbar-thumb{
width :5px;
background: rgba(0,0,0,0.4);
border-radius: 10px;
box-shadow: none;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0,0,0,0.2);
}
左にある更新した行がぴかんってなるやつ　参考にした：/noratetsu/settings
code:style.css
.line .telomere:not(:hover) {
opacity: 0.3;
transition: opacity 0s;
}
.line .telomere:hover {
/*opacity: 0.4;*/
opacity: 1;
transition: opacity 1s;
}
.line .telomere .telomere-border {
border-color: #d4dcd6;
}
.line .telomere .telomere-border.unread {
border-color: #f5b1aa;
}
/takker/区切り線の誤クリックを防ぐUserCSS
code:style.css
.line a.iconhref$="/hr" {
pointer-events: none;
}
/scrasobox/箇条書きを控えめにする
code:style.css
.line .text {
font-size: 14.5px;
line-height: 2.8rem;
}
.line.line-title .text {
font-size: 2.8rem;
font-weight: bold;
line-height: 1.2;
border-bottom: none;
}
.line .indent-mark .dot{
height: .3rem;
width: .8rem;
border-radius: 0;
background-color: #c0c0c0;
}
・もともとこんな感じ
こんな感じ
/scrasobox/フキダシになるタグ
code:style.css
/* フキダシになるタグ ※アイコン記法は除く */
.line ahref*="/%7B":not(.icon) {
display: inline-block; position: relative; vertical-align: text-top;
line-height: 1; font-size: 91%; color: #FFF !important; background-color: #b2bcba;
padding: 3px 4px 1px 5px; margin-left: 10px;
border-radius: 4px; border-bottom-left-radius: 0 }
.line ahref*="/%7B":not(.icon):after {
display: block; /* reduce the damage in FF3.0 */
position: absolute; bottom: 0; left: -7px;
width: 0; content: "";
border-width: 0 0 7px 7px; border-style: solid; border-color: #b2bcba transparent }
.line ahref*="/%7B":not(.icon) span:first-child { display: none }
.line.cursor-line ahref*="/%7B":not(.icon) span:first-child { display: inline }
/* フキダシ記法版 */
.line:not(.cursor-line) .deco-\{ {
display: inline-block; position: relative; max-width: calc(100% - 4em);
line-height: 1; color: #FFF !important; background-color: rgba(107, 177, 148, 0.85);
padding: 3px 4px 2px 5px; margin-left: .6em;
border-radius: .4em; border-bottom-left-radius: 0 }
.line:not(.cursor-line) .deco-\{::after {
display: block; /* reduce the damage in FF3.0 */
position: absolute; bottom: 0; left: -0.45em;
width: 0; content: '';
border-width: 0 0 .5em .5em; border-style: solid; border-color: rgba(107, 177, 148, 0.85) transparent }
これがフキダシ記法だよ～
/scrasobox/チェックボックスになるタグ_2
code:style.css
/* チェックボックスになるタグ v2 Font Awesome版 */
.line:not(.cursor-line) ahref$='/o':not(.icon) span,
.line:not(.cursor-line) ahref$='/v':not(.icon) span {
display: inline-block; width: 0; text-indent: -9999px }
.line:not(.cursor-line) ahref$='/o':not(.icon)::after,
.line:not(.cursor-line) ahref$='/v':not(.icon)::after {
display: inline-block; min-width: 1.15em; padding-left: 1px;
font-family: 'Font Awesome 5 Free'; font-weight: 400;
font-size: 120%; text-align: center; vertical-align: middle }
.line:not(.cursor-line) ahref$='/o':not(.icon)::after { content: '\f0c8'; color: #08BDBD }
.line:not(.cursor-line) ahref$='/v':not(.icon)::after { content: '\f14a'; color: #2489C5 }
o こうなるよ。
v こうなるよ。
/scrasobox/マーカー
code:style.css
/* 二重括弧による強調をマーカーっぽくする */
.line strong:not(class) {
background: linear-gradient(transparent 10%, #ABFF4F 25%, #ABFF4F 70%, transparent 90%)
}
こんなかんじ
/scrasobox/ポップアップメニューをさっぱりさせてみる
code:style.css
/* ポップアップメニューの修飾ボタンをアイコン化 */
.popup-menu .button-container .button.strong-button > strong,
.popup-menu .button-container .button.italic-button > i,
.popup-menu .button-container .button.strike-button > strike {
display: inline-block; width: 0; text-indent: -9999px }
.popup-menu .button-container .button.link-button::after,
.popup-menu .button-container .button.strong-button::after,
.popup-menu .button-container .button.italic-button::after,
.popup-menu .button-container .button.strike-button::after {
font: 900 100%/normal 'Font Awesome 5 Free';
display: inline-block; min-width: 16px; text-align: center }
.popup-menu .button-container .button.strong-button::after { content: '\f032' }
.popup-menu .button-container .button.italic-button::after { content: '\f033' }
.popup-menu .button-container .button.strike-button::after { content: '\f0cc' }
/* ポップアップメニューのボタン周りの線を消す */
.selections .popup-menu .button-container .button:not(:first-of-type) { border: 0 }
/scrasobox/アイコンを大きくする
code:style.css
/* アイコンサイズを大きくする */
.line img.icon { height: 1.5em; top: -0.2em }
/scrasobox/画像を並べて表示
code:style.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.line class^="level" .deco-\| { width: 100%; flex-wrap: wrap }
.line .level-1 .deco-\| > span { width: calc(100%/1) }
.line .level-2 .deco-\| > span { width: calc(100%/2); height:100%; }
.line .level-3 .deco-\| > span { width: calc(100%/3); height:100%; }
.line .level-4 .deco-\| > span { width: calc(100%/4); height:100%; }
.line .level-5 .deco-\| > span { width: calc(100%/5); height:100%; }
.line .level-6 .deco-\| > span { width: calc(100%/6); height:100%; }
.line .level-7 .deco-\| > span { width: calc(100%/7); height:100%; }
.line .level-8 .deco-\| > span { width: calc(100%/8); height:100%; }
.line .level-9 .deco-\| > span { width: calc(100%/9); height:100%; }
.line .level-10 .deco-\| > span { width: calc(100%/10); height:100%; }
.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 }
/scrasobox/カーソルをカスタマイズ
code:style.css
/* カーソルの幅と色替え */
.cursor { width: 2px; background-color: rgba(0,0,0,.6) }
code:style.css
/* カーソルの点滅 https://codepen.io/g12n/pen/FgzEj */
@keyframes blink {
0% {opacity: 0}
30%{opacity: 1}
}
.cursor { animation: blink 0.7s infinite }
/icons/hr.icon
/customize/テーブルの見た目をカスタマイズ
code:style.css
/* セル間に線を入れる */
.table-block .cell {
/* 全てのセルの右と下 */
border-right: solid 1px #cccccc;
border-bottom: solid 1px #cccccc;
}
.table-block .cell:first-child {
/* 1列目のセルの左 */
border-left: solid 1px #cccccc;
}
.section-title + .line .table-block .cell {
/* 1行目のセルの上 */
border-top: solid 1px #cccccc;
}
/* 1行目を太字、中央揃え */
.section-title + .line .table-block .cell {
font-weight: bolder;
text-align: center;
}
table:test
1 2 3 4 5
6 7 8 9 10
インデントレベルをわかりやすくする
code: style.css
.app:not(.presentation) .indent-mark .char-index:not(:nth-last-child(1)):not(:nth-last-child(2)) {
position: relative;
}
.app:not(.presentation) .indent-mark .char-index:not(:nth-last-child(1)):not(:nth-last-child(2))::before {
content: " ";
position: absolute;
left: 43%;
margin: -4px 0;
border-left: 2px solid #dcdcdc; /* 色の指定 */
}
参考：/customize/インデントレベルをわかりやすくする
test
インデントレベルに長い縦棒でるよ！
蛍光のラインを足す　参考にした：/memooooo/settings
code:style.css
/* % <ーこれに蛍光のラインを足す */
.deco-\% {
background: linear-gradient(transparent 80%, #1E90FF 50%);
}
こんにちは
＃で始まるタグをラベル風にする　参考にした：/memooooo/settings
code:style.css
atype="hashTag" {
color: #61666D !important;
}
/* ＃で始まるタグをラベル風にする */
atype="hashTag"{
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background: #f1f2f3;
color: #f27e48;
font-size: 0.8em;
border-radius: 18px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
atype="hashTag":hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
#なんでもメモ帳
/icons/hr.icon
文字の位置揃えをする　参考にした：
code:style.css
/* 中央寄せ */
.deco-\< {
position: absolute;
width: 100%;
text-align: center;
}
/* 右寄せ */
.deco-\> {
position: absolute;
width: 100%;
text-align: right;
}
こんなかんじ
こんなかんじ
/customize/ピン留めされたページを独立した段に表示する
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
.page-list-item.pin + .page-list-item:not(.pin) {
見出しっぽい太字テキスト　参考にした：/madobes/settings
code:style.css
/* 拡張装飾記法 見出しっぽい太字テキスト */
.level .deco-\# { border-left: .6em solid #ffcfc6; padding-left: .7rem }
こんなかんじ
関連ページ一覧関係
code:style.css
.project-links .title {
color: rgb(255 255 255 / 0%);
}
.project-links .title::before {
content: 'ほかのプロジェクトの記事一覧';
color: #FFFFFF !important;
}
.headword .title::before {
content: '#';
}
.grid li.relation-label a {
border-radius: 15px;
}
/blu3mo-public/関連ページ一覧を横に移動させる
code:style.css
@media (min-width: 768px) {
.related-page-list {
flex-basis: 140px !important;
}
}
@media (min-width: 1240px) {
.related-page-list {
flex-basis: 285px !important;
}
.related-page-list .relation-label {
width: 285px !important;
}
}
@media (min-width: 768px) {
.page-wrapper {
display: flex;
justify-content: space-around;
}
.drag-and-drop-enter {
order: 1;
margin-right: 20px;
flex-basis: 100% !important;
min-width: 0;
}
.related-page-list {
order: 2;
flex-shrink: 0;
margin-top: 0px;
background-color: var(--related-page-list-bg);
overflow: inherit;
}
}
/* タイトル順とか更新日順とかのところ */
.related-page-sort-menu {
display: none;
}
@media (min-width: 768px) {
/* リンクのカードとページのカードの両方いけるやつらしい */
.related-page-list .grid li {
margin-bottom: 10px !important;
margin-right: 10px !important;
width: 140px;
}
.related-page-list .grid .splitter {
height: 15px !important;
}
/* リンクカード */
.related-page-list .relation-label {
height: auto !important;
}
.related-page-list .relation-label .arrow {
display: none !important;
}
.related-page-list .relation-label a {
/* 関連リンク ラベル */
padding: 4px !important;
}
.related-page-list .relation-label .title{
font-size: 12px;
}
.related-page-list .relation-label .icon-lg{
display: none !important;
}
/* ページカード */
.related-page-list .page-list-item {
/* カードサイズ変更 */
height: 50px !important;
}
.related-page-list .content {
/* カードサイズ変更 */
height: 100% !important;
}
.related-page-list .page-list-item .header {
border-top-width: 5px !important;
padding-top: 3px !important;
padding-bottom: 3px !important;
z-index: 1;
}
.related-page-list .page-list-item .header .title {
font-size: 12px !important;
filter: drop-shadow(0px 0px 6px var(--card-bg, #fff)) drop-shadow(0px 0px 8px var(--card-bg, #fff)) drop-shadow(0px 0px 10px var(--card-bg, #fff)) drop-shadow(0px 0px 14px var(--card-bg, #fff))
}
.related-page-list .page-list-item .description {
padding-top: 0px !important;
padding-bottom: 0px !important;
line-height: 1.4 !important;
z-index: 1;
}
.related-page-list .page-list-item .description .line {
font-size: 11px !important;
}
.related-page-list .page-list-item .description .line .inline-icon {
font-size: 9px !important;
}
.related-page-list .page-list-item .icon {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
opacity: 1;
padding: 5px !important;
}
}
/* 三点 */
.related-page-list .page-list-item .icon img {
width: 100% !important;
height: 150% !important;
width: auto !important;
margin-right: 0 !important;
object-fit: contain;
}
.related-page-list .ellipsis {
height: 30px !important;
}
.related-page-list .ellipsis a {
padding: 2px !important;
}
.related-page-list .ellipsis .circle {
width: 30px !important;
height: 30px !important;
}
/villagepump/特定のページを非表示にするUserCSS
code:style.css
.page-list .grid .page-list-itemdata-page-title="settings" {
display: none !important;
position: sticky;
}
.dropdown-menu>li>a:not(class)href="/otomadnotamariba/settings" {
display: none !important;
}
.list li.page-list-itemdata-page-title="settings" {
display: none !important;
}
.time-range .pagedata-title="settings" {
display: none !important;
}
検索ページ
code:style.css
.project-search {
display: none !important;
}
アイコンを円でくり抜く　参考にした：/Porin-Room/settings
code:style.css
.icon {
border-radius: 5px;
}
こきくん.icon
画像に影をつける。角丸もついでに
code:style.css
imgclass="image"{
box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 20%);
border-radius: 5px;
transition-duration: 0.4s;
}
imgclass="image":hover {
transform: scale(1.02);
}
code:style.css
body::after {
content: '';
background-image: URL('https://i.pinimg.com/originals/e4/51/ef/e451ef152d93bf88ca7e63b2f1480707.gif');
background-size: 100px;
width: 100px;
height: 100px;
border-radius: 25px;
background-repeat: no-repeat;
display: block;
position: fixed;
margin: auto;
animation: ball 0.8s infinite;
-webkit-animation: ball 0.8s infinite;
-moz-animation: ball 0.8s infinite;
bottom: 30px;
left: 10px;
z-index: 1000;
}
@keyframes ball{
0%,100% { transform: scale(1) translate(0px, -60px); } /* ぴょーん */
40% { transform: scale(1) translate(0px, 30px); }
70% { transform: scale(1.15,0.9) translate(0px, 40px); } /* つぶれる */
}
@-webkit-keyframes ball{
0%,100% { -webkit-transform: scale(1) translate(0px, -60px); } /* ぴょーん */
40% { -webkit-transform: scale(1) translate(0px, 30px); }
70% { -webkit-transform: scale(1.15,0.9) translate(0px, 40px); } /* つぶれる */
}
@-moz-keyframes ball{
0%,100% { -moz-transform: scale(1) translate(0px, -60px); } /* ぴょーん */
40% { -moz-transform: scale(1) translate(0px, 30px); }
70% { -moz-transform: scale(1.15,0.9) translate(0px, 40px); } /* つぶれる */
}
-webkit-
-moz-
バーガーアイコンクリックアニメーション
code:style.css
.open>.dropdown-menu {
animation: zoomIn 0.3s forwards;
}
@keyframes zoomIn {
0% {
transform: scale(1)translate(0px, -10px);
opacity: 0;
animation-timing-function: ease-out;
}
100% {
transform: scale(1)translate(0px, 0px);
opacity: 1;
}
}
/ePi5131/UserCSSでユーザーの種類ごとに条件分岐
code:style.css
.app .col-page:has(.links-1-hop lidata-page-title="非表示") {
display: none !important;
}
.app .row-flex:has(.links-1-hop lidata-page-title="非表示")::before {
display: block !important;
content: " ";
font-weight: 900;
background-image: URL('https://gyazo.com/8b99ed7a559583ec6f533c79036f5473.png');
background-size: contain;
background-repeat: no-repeat;
z-index: 999;
width: 100%;
height: 100%;
position: absolute;
}
/htmra/settings
一行目を特殊に
code:style.css
/* 一行目 の下に Border を表示する, 上下の感覚を調整する*/
.page-wrapper .lines div.line:nth-child(3) {
padding-top: 10px;
padding-bottom: 10px;
border-bottom: dashed 2px;
margin-bottom: 21px;
}
/* 一行目のテキストをセンタリングする, 色やフォントなども指定 */
.page-wrapper .lines div.line:nth-child(2) span.text {
text-align: center;
}
.page-wrapper .lines .line:nth-child(2) .cursor-line span.text::before {
content: 'サムネを入れてね';
background: #A64522;
}
.page-wrapper .lines .line:nth-child(3) .cursor-line span.text::before {
content: 'タグを入れてね';
background: #A64522;
}
code:style.css
/* 一行目に何も文字がないなら(つまり, 改行だけなら)詰める */
/* 不要ならこの style.css を削除する */
.lines .line:nth-child(2):not(.cursor-line) br.empty-char-index {
display: contents;
}
.lines .line:nth-child(3):not(.cursor-line) br.empty-char-index {
display: contents;
}