settings
code:style.css
@import "../scrapboxのtitleをnav barに固定するUserCSS/style.css";
@import "../画像を並べるUserCSS/style.css";
@import "../../road2noma/破線で下線なリンクデザイン/style.css";
@import "../アップロードしたファイルリンクのデザインをボタンにするUserCSS/style.css";
フォント変更
code:style.css
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');
html, body, #editor, .grid li{
font-family:'Zen Kaku Gothic New',"YuGothic",'Yu Gothic',"游ゴシック体","游ゴシック","Roboto", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";}
色
code:style.css
:root{
--body-bg: #fff;
--tool-text-color: #000;
}
/* ヘッダー */
:root{
--navbar-icon-color: #000;
--navbar-icon-hovered-color: red;
}
/* transition */
:root{
--transition-all: all 300ms cubic-bezier(0.2, 0.91, 0.85, 0.96) 0s;
}
非表示(settings)
code:style.css
.page-list li.grid-style-itemdata-page-title="settings" {display:none;}
.page-list li.grid-style-itemdata-page-title="scrapboxのtitleをnav barに固定するUserCSS" {display:none;}
.page-list li.grid-style-itemdata-page-title="画像を並べるUserCSS" {display:none;}
.page-list li.grid-style-itemdata-page-title="アップロードしたファイルリンクのデザインをボタンにするUserCSS" {display:none;}
のポートフォリオ
code:style.css
.page-list .grid li.pin a .content{
aspect-ratio: 1;
}
.page-list .grid li.pin:before{
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
}
.page-list .grid li.pindata-page-title="PowerPoint":before{
content:"の";
font-size: 25px;
}
.page-list .grid li.pindata-page-title="イラスト":before{
content:"ポート";
font-size: 25px;
}
.page-list .grid li.pindata-page-title="with_AI":before{
content:"フォリオ";
font-size: 25px;
}
ホーム
code:style.css
.page-list ul.grid{
display: flex;
flex-wrap: wrap;
width: 100%;
gap: 0;
}
.page-list .grid li{
float: none;
break-inside: avoid;
box-shadow: none;
margin: 0;
width: 16.6%;
height: 100%;
aspect-ratio: 1/1;
outline: 2px solid black;
outline-offset: -1px;
background: #F4F4F6;
}
.grid li.page-list-item a{
border-radius: 0px;
box-shadow: none;
background: transparent;
width: auto;
}
data-hover-visible .grid li.page-list-item a:hover{box-shadow:none;}
.grid li.page-list-item a .content{
height: auto;
width:100%;
padding:7px;
}
.grid li.page-list-item a .header{
position: fixed;
width: auto;
top: 50%;
left: 30px;
transform: translateX(-50%) rotate(270deg);
text-align: center;
border-top: none;
z-index:30;
pointer-events: none;
}
.grid li.page-list-item a .title{
color: transparent;
font-weight: 400;
padding: 0 10px;
}
.grid li.page-list-item a .icon {
position: relative;
padding: 0;
margin: auto;
height: 100%;
}
.grid li.page-list-item a .icon img{
width:100%;
height:100%;
aspect-ratio: 1;
object-fit: cover;
}
ピン
code:style.css
.grid li.page-list-item a .pin{display:none;}
.page-list .grid .pin a .description .line{display:none;}
ヘッダー
code:style.css
.brand-icon{display: none;}
.navbar{
background: rgb(255, 255, 255);
backdrop-filter: none;
box-shadow: none;
}
新規作成ボタン/検索ウィンドウ
code:style.css
.new-button{
background-color:transparent;
transition: var(--transition-all);
}
data-hover-visible .new-button:hover{background-color: #eeeeee;}
.new-button .horizontal-line{
background-color: #c9c9c9;
height: 3px;
}
.new-button .vertical-line{
background-color: #c9c9c9;
width: 3px;
}
.search-form .form-group input,.search-form .form-group input:focus{
background-color:#e9e9e9;
}
ホバーアニメーション(画像)
CSSでホバーしたもの以外の兄弟要素を暗くしたりスタイルを適用する
code:style.css
.page-list .grid{visibility: hidden;}
.page-list .grid li{visibility: visible;}
data-hover-visible .grid li.page-list-item a:hover .hover{opacity:0;}
.grid li.page-list-item a{
--border-design: solid 2px rgba(0,0,0,0);
--border-gap: 0px;
--scale-img: scale(1);
}
.grid li.page-list-item a:hover{
--border-design: solid 2px rgba(0,0,0,1);
--border-gap: 3px;
--scale-img: scale(1);
}
.page-list ul.grid:hover{
--brightness-img: brightness(0.7) saturate(0%);
}
.page-list ul.grid:hover li.pindata-page-title="PowerPoint":before{
content:"PowerPoint";
font-size: 20px;
}
.page-list ul.grid:hover li.pindata-page-title="イラスト":before{
content:"イラスト";
font-size: 20px;
}
.page-list ul.grid:hover li.pindata-page-title="with_AI":before{
content:"with AI";
font-size: 20px;
}
.grid li.page-list-item a:hover{
--brightness-img: brightness(1) saturate(100%);
}
.grid li.page-list-item a:before,.grid li.page-list-item a:after,.grid li.page-list-item a .content:before,.grid li.page-list-item a .content:after{
content:"";
width:30px;
height:30px;
position:absolute;
transition: var(--transition-all);
}
.grid li.page-list-item a:before{
border-left: var(--border-design);
border-top: var(--border-design);
top: var(--border-gap);
left: var(--border-gap);
}
.grid li.page-list-item a:after {
border-right: var(--border-design);
border-bottom: var(--border-design);
bottom: var(--border-gap);
right: var(--border-gap);
}
.grid li.page-list-item a .content:before{
border-right: var(--border-design);
border-top: var(--border-design);
top: var(--border-gap);
right: var(--border-gap);
}
.grid li.page-list-item a .content:after{
border-left: var(--border-design);
border-bottom: var(--border-design);
bottom: var(--border-gap);
left: var(--border-gap);
}
.grid li.page-list-item a .icon img{
transform: var(--scale-img);
transition: var(--transition-all);
filter: var(--brightness-img);
}
/* クリックしたとき */
.grid li.page-list-item a:active{
outline: 2px solid black !important;
outline-offset: -1px;
}
ホバーアニメーション(タイトル)
code:style.css
.grid li.page-list-item a:hover .title{
color: black;
background-color: white;
}
レスポンシブ
code:style.css
@media (991px <= width){
.grid li.page-list-item a .content{padding: 20px;}
.grid li.page-list-item a:hover{--border-gap: 8px; }
}
@media (767px <= width < 991px){
.page-list .grid li{width: 20%;}
.grid li.page-list-item a .content{padding: 15px;}
.grid li.page-list-item a:hover{--border-gap: 6px;}
}
@media (613px <= width < 767px){
.page-list .grid li{width: 25%;}
.grid li.page-list-item a .content{padding: 12px;}
.grid li.page-list-item a:hover{--border-gap: 5px;}
.navbar .navbar-menu .kamon-search {color: black;}
}
@media (467px <= width < 613px){
.page-list .grid li{width: 33.3%;}
.grid li.page-list-item a .content{padding: 12px;}
.grid li.page-list-item a:hover{--border-gap: 6px;}
}
@media (width < 467px){
.page-list .grid li{width: 50%;}
.grid li.page-list-item a .content{padding: 14px;}
.grid li.page-list-item a:hover{--border-gap: 6px;}
}
ノート
行頭のドットを薄く
code:style.css
.line .indent-mark .dot {
top: 11px;
width: 6px;
height: 3px;
background-color: #c9c9c9;
}
ノートデザイン
code:style.css
.page{
box-shadow:none;
padding-top:0;
}
.col-page{
max-width:810px;
}
.line .telomere{display:none;}
.line:nth-of-type(2) img.image{
margin: 0 auto;
max-height: 500px;
top: 0;
outline: 2px solid black;
}
タイトルデザイン
code:style.css
.line.line-title .text{
--border-design: solid 1px rgba(0,0,0,1);
--border-gap: 0;
font-size: 1em;
text-align: center;
letter-spacing: 0.2em;
font-weight: 400;
padding: 20px 0 50px 0;
}
.line.line-title .text:before,.line.line-title .text:after{
content:"";
width:30px;
height:50px;
position:absolute;
}
.line.line-title .text:before{
border-left: var(--border-design);
border-top: var(--border-design);
top: 0;
left: 0;
}
.line.line-title .text:after {
border-right: var(--border-design);
border-bottom: var(--border-design);
bottom: 30px;
right: 0;
}
最初の画像をトップに
code:style.css
.lines{
display: flex;
flex-direction: column;
}
.line:nth-of-type(2){order:1}
.line.line-title{
order:2;
}
.line:not(:first-of-type):not(:nth-of-type(2)){order:3}
画像を中央寄せしてアウトライン
code:style.css
.line img.image {
display : block;
margin : 0 auto 0.7em;
position: relative;
top: 1em;
outline: 2px solid #000;
outline-offset: -1px;
}
.video-player video{
margin: 0 auto 0.7em;
max-width: 100%;
vertical-align: baseline;
}
ツールボタン
code:style.css
.page-menu .tool-btn{
width: 35px;
height: 35px;
border-radius: 0;
color: #e9e9e9;
}
.kamon{
--kamon-size: 20px;
width: var(--kamon-size);
height: var(--kamon-size);
line-height: var(--kamon-size);
font-size: var(--kamon-size);
}
コードデザイン
code:style.css
.line span.code-block .code-block-start{
color: #c5c5c5;
background-color: transparent;
border: 1px solid black;
}
.line span.code-block .code-block-start a{
color: #000;
text-decoration: none;
}
関連ページ
デザイン
code:style.css
.empy-links{display:none;}
.related-page-list .toolbar{display:none;}
.related-page-list ul.grid:hover{
--brightness-img: brightness(0.7) saturate(0%);
}
.related-page-list .grid li.page-list-item a:hover{
--brightness-img: brightness(1) saturate(100%);
}
.related-page-list .grid li{
aspect-ratio: 1/1;
height: 100%;
margin: 0;
outline: 2px solid black;
outline-offset: -1px;
background: #F4F4F6;
}
.related-page-list .grid li.page-list-item a:hover{
--border-design: solid 2px rgba(0,0,0,1);
--border-gap: 5px;
}
関連ページ_レスポンシブ
code:style.csss
@media (768px <= width){
width: calc(100%/5);
}
@media (width < 768px){
width: calc(100%/4);
}
アイコンデザイン
code:style.css
.related-page-list{
overflow: inherit;
}
.grid li.relation-label.links a,
.grid li.relation-label.links a,
.grid li.relation-label.project-links a,
.grid li.relation-label.headword a {
background-color: transparent;
color: #000;
display: flex;
align-items: center;
justify-content: center;
}
.related-page-list ul.grid:hover .links a,.related-page-list ul.grid:hover li.relation-label.links a,.related-page-list ul.grid:hover li.relation-label.project-links a{
background-color: #2f2f2f;
color: #fff;
}
.related-page-list div.links-2-hop ul.grid:hover .relation-label a{
background-color: #2f2f2f;
color: #fff;
}
.grid li.relation-label a{
height: inherit;
background-color: transparent;
color: #000;
font-weight: 500;
border-radius: 0;
transition: var(--transition-all);
}
.grid li.relation-label a .title{max-height: none;}
.grid li.relation-label a .icon-lg{display: none;}
.grid li.relation-label .arrow{display: none;}
flex
code:style.css
.related-page-list{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
margin-top: 50px;
}
.related-page-sort-menu{
width: 100%;
display: none;
}
.related-page-list ul.grid{
gap: 0;
}
.grid li.splitter.splitter{display: none;}
のポートフォリオ
code:style.css
.related-page-list .grid li.page-list-item .description .line{display:none;}
.related-page-list .grid li.page-list-item:before{
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
font-size: 15px;
}
.related-page-list .grid li.page-list-itemdata-page-title="イラスト":before{content:"イラスト";}
.related-page-list .grid li.page-list-itemdata-page-title="PowerPoint":before{content:"PowerPoint";}
.related-page-list .grid li.page-list-itemdata-page-title="with_AI":before{content:"with_AI";}