settings
https://gyazo.com/3de99b155624307f9615a5856988233b
code:style.css
@import "../../road2noma/破線で下線なリンクデザイン/style.css";
フォント
code:style.css
@import url('https://fonts.googleapis.com/css2?family=Hina+Mincho&family=Zen+Kaku+Gothic+New:wght@400;500&display=swap');
html, body, #editor, .grid li{
font-family: "YuGothic",'Yu Gothic',"游ゴシック体","游ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";}
ピンした頁を単独で上部に固定
code:style.css
.page-list .grid li.pindata-page-title="スペーサー"{
width:100%;
}
.page-list .grid li.pindata-page-title="スペーサー" > a{
height:5px;
}
.page-list .grid li.pindata-page-title="スペーサー" > a .content{
background:#f0f0f0;
}
.page-list .grid li.pindata-page-title="スペーサー" > a .icon{
display:none;
}
.grid li.page-list-item a .pin{
display:none;
}
ピンした頁の高さを調整
code:style.css
.grid li.pin a .icon img{
height:300px;
}
画像を並べる[| [画像URL][画像URL][画像URL]…] ついでに影追加
code:style.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| {
display: flex;
justify-content: center;
align-items: center ;
filter: drop-shadow(0px 8px 24px rgba(149,157,165,0.22));
margin : -1em 0 -2.7em;
}
.line .deco-\| img.image {
object-fit: contain;
margin: 0;
filter: drop-shadow(0px 0px 0px ) !important;
top: 0;
}
/* 太字記法と組み合わせて列数を変える */
.line class^="level" .deco-\| { flex-wrap: wrap }
.line .level-1 .deco-\| > span { width: calc(100%/1) }
.line .level-2 .deco-\| > span { width: calc(100%/2) }
.line .level-3 .deco-\| > span { width: calc(100%/3) }
.line .level-4 .deco-\| > span { width: calc(100%/4) }
.line .level-5 .deco-\| > span { width: calc(100%/5) }
.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: .4em }
ホーム
code:style.css
.page-list ul.grid{
display: flex;
flex-wrap: wrap;
align-items: flex-end;
}
.grid li.page-list-item a .header{
display:none;
}
.page-list .grid li{
width:auto;
height:auto;
margin-right:0;
margin-bottom:20px;
aspect-ratio: inherit;
}
.grid li.page-list-item a{
border-radius: 5px;
box-shadow: none;
height:auto;
width:auto;
}
.grid li.page-list-item a .icon {
position: relative;
padding: 0;
margin: auto;
}
.grid li.page-list-item a .icon img {
display: table-cell;
width: auto;
vertical-align: middle;
border-radius: 5px;
max-width: 250px;
}
.grid li.page-list-item a .header{
padding: 13px 10px 8px;
border-top: none;
}
.grid li.page-list-item a .title{
font-size: 0.9em;
text-align: center;
}
.grid li.page-list-item a .content{
height:auto;
background:linear-gradient(180deg, rgba(205,205,205,1) 0%, rgba(255,255,255,0) 15px),linear-gradient(90deg, rgba(194,194,194,1) 0%, rgba(255,255,255,1) 5px, rgba(193,191,191,0) 100%),linear-gradient(270deg, rgba(194,194,194,1) 0%, rgba(255,255,255,1) 5px, rgba(193,191,191,0) 100%);
}
タイトル & ドロップダウンメニュー
code:style.css
.quick-launch{margin: 0;}
.quick-launch .project-home, .quick-launch .project-home .title{
font-family: 'Hina Mincho';
font-size: 1.6em;
letter-spacing: .4em;
text-indent: .4em;
}
.quick-launch .flex-box{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
}
.quick-launch .left-box{
display: flex;
justify-content: space-around;
}
.quick-launch .right-box{
display: flex;
justify-content: space-around;
}
.dropdown-menu{
box-shadow: none;
border: none;
min-width: 270px;
}
.dropdown-menu-right{
left: 50%;
transform: translate(-50%, 0);
}
.container .dropdown-menu li:nth-child(2),.container .dropdown-menu li:nth-child(4),.container .dropdown-menu li:nth-child(5),.container .dropdown-menu li:nth-child(6),.container .dropdown-menu li:nth-child(7){
display:none;
}
ホーム色系
code:style.css
body{background-color: #f5f5f5;}
.navbar{background-color: #fffbff;}
.new-button{background-color: transparent;}
data-hover-visible .new-button:hover{background-color: rgba(0, 0, 0, 0.08);}
.new-button .horizontal-line{background-color: #f55600;}
.new-button .vertical-line{background-color: #f55600;}
.search-form .form-group input{background-color: #efefef;}
ソートメニューに追加文字
code:style.css
/*.page-sort-menu:before{
content:"Titleに変更して御覧ください↓"
} */
ホバーアニメーション
code:style.css
data-hover-visible .grid li.page-list-item a:hover{box-shadow:none; }
/* 背表紙回転 */
data-hover-visible .grid li.page-list-item a:hover .hover{opacity:0}
.grid li.page-list-item a .icon{
transition: all 0.4s 0s cubic-bezier(.165,.84,.44,1);
transform: rotateX(0deg);
transform-origin: bottom;
}
data-hover-visible .grid li.page-list-item a:hover .icon{
transform: rotateX(19deg);
transform-origin: bottom;
}
/* 背表紙の影 */
.grid li.page-list-item a .icon::after{
transition: all 0.4s 0s cubic-bezier(.165,.84,.44,1);
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgb(0 0 0 / 58%) 0%, rgb(119 119 119 / 17%) 100%);
border-radius:5px;
opacity:0;
}
.grid li.page-list-item a:hover .icon::after{
opacity:1;
}
ページ
テキスト中央揃え
code:style.css
.line .text{
text-align: center;
}
行頭のドットを消す
code:style.css
.line .dot {
display: none !important;
}
頁タイトル中央揃え
code:style.css
.line.line-title .text{
text-align: center;
font-weight: bold;
}
画像に角丸+シャドウを追加
code:style.css
.line img.image {
display : block;
margin : 0 auto -1em;
border-radius: 0.2em;
filter: drop-shadow(0px 8px 24px rgba(149,157,165,0.22));
position: relative;
max-width:700px;
}
外部リンク from : /villagepump/外部リンクを区別するUserCSS
code:style.css
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon):not([href^="https://scrapbox.io"])::after {
font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
font-weight: 900;
font-size: 0.8rem;
content: ' \f35d';
display: inline-block;
color:#888;
}
テレメトリー非表示
code:style.css
.line .telomere .telomere-border{
display:none;
}
ページ影消し
code:style.css
.page{box-shadow:none;}
コード 左寄せ
code:style.css
.line span.code-block{
text-align: left;
}
関連ページ
code:style.css
.related-page-list ul.grid{
margin:0;
}
.related-page-list .grid li{
width: auto;
height: auto;
margin: 0 0 15.4px 0;
}
.related-page-list .grid li a .icon img{
max-height:330px;
max-width:200px;
}
.grid li.splitter.splitter{
display:none;
}
.links-2-hop{
display: flex;
align-items: flex-end;
}
.related-page-list{
display: flex;
flex-wrap: wrap;
width: 100vw;
position: absolute;
left: 0;
justify-content: center;
.links-container {
flex-direction: inherit;
overflow-x: scroll;
}
}
.related-page-sort-menu{width:100%;}
.related-page-list ul.grid{
display: flex;
align-items: flex-end;
}
ラベルデザイン
code:style.css
.grid li.relation-label a,.grid li.relation-label.project-links a,.grid li.relation-label.links a{
display:block;
height: auto;
font-family: 'Zen Kaku Gothic New';
color:black;
font-weight: 400;
border-radius: 6px 0 0 6px;
padding: 10px 4px 10px 3px;
border: dotted 2px #bdbdbd;
margin-right: -4px;
margin-left: 4px;
background-color:transparent;
margin:0 -4px 0 6px;
transition: all 0.4s 0s cubic-bezier(.165,.84,.44,1);
}
.related-page-list div.links-2-hop ul.grid:hover .relation-label a{
background-color:transparent;
color:black;
letter-spacing:5px;
text-indent: 5px;
transition:none;
transition: all 0.4s 0s cubic-bezier(.165,.84,.44,1);
}
.grid li.relation-label a .title{
max-height: 200px;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
.grid li.relation-label a .icon-lg{display:none;}
.grid li.relation-label .arrow{display:none;}
関連なしリンクは非表示
code:style.css
.empy-links{display:none;}
記法
サムネイル記法
code:style.css
.deco-\! > .modal-image{
display:none;
}
.deco-\!::after{
content:"thumbnail";
color:#b7b7b7;
font-size:0.4em;
letter-spacing: 1em;
text-indent: 1em;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
イタリック記法上書き
code:style.css
.deco-\/{
font-size: 0.8em;
letter-spacing: .7em;
text-indent: .7em;
color: #c8c8c8;
font-family: Yu Mincho;
position: relative;
}