settings - sebyoshi-test

settings

サムネの大きさ変更

2つともに同じ値を入れてください

settings#63537204e2dacc0000afc435

settings#63537204e2dacc0000afc44e

ホバーアニメーション

コメントをつけると回転アニメーションが消えます

settings#63537204e2dacc0000afc48f

フォント

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;

background:#ffffff;

}

.page-list .grid li.pindata-page-title="スペーサー" > a .content{

display:none;

}

.page-list .grid li.pindata-page-title="スペーサー" > a .icon{

display:none;

}

.grid li.page-list-item a .pin{

display:none;

}

.grid li.pindata-page-title="スペーサー" a > .content::after{

background:#f0f0f0;

}

data-hover-visible .grid li.pindata-page-title="スペーサー" a:hover .hover{opacity:0;}

画像を並べる[| [画像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

/* サムネデザイン */

.grid li.page-list-item a{

border-radius: 5px;

box-shadow: none;

height:auto;

width: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%);

}

.grid li.page-list-item a .content{

height:auto;

min-width: 50px;

border-radius: 5px;

}

.grid li.page-list-item a .content::before{

content:"";

position:absolute;

width:100%;

height:100%;

background:linear-gradient(90deg, rgba(0,0,0,30%) 0%, rgba(0,0,0,4%) 4px, rgba(0,0,0,4%) 100%),linear-gradient(270deg, rgba(0,0,0,30%) 0%, rgba(0,0,0,4%) 4px, rgba(0,0,0,4%) 100%);

z-index:4;

}

.container .grid li.page-list-item a .header{

padding: 15px;

border-top: none;

background: white;

height:350px;

}

.grid li.page-list-item a .title{

writing-mode: vertical-rl;

position: absolute;

right: 0;

bottom: 0;

z-index: 3;

max-height: none;

/* 文字に背景追加 */

padding:5px 2px 5px 0;

font-size:13px;

color:black;

background:white;

border-radius: 3px 0 0 0;

}

.grid li.page-list-item a .icon {

position: absolute;

padding: 0;

bottom: 0;

left: 50%;

transform: translateX(-50%);

}

.grid li.page-list-item a .icon img {

width: auto;

max-height: 350px;

z-index: 2;

}

.grid li.page-list-item a .description{

display: none;

}

Flexで並べる

code:style.css

.page-list ul.grid{

display: flex;

flex-wrap: wrap;

align-items: flex-end;

}

.page-list .grid li{

width:auto;

height:auto;

margin-right:0;

margin-bottom:30px;

}

タイトル & ドロップダウンメニュー

code:style.css

.container{margin-bottom:1em;}

.quick-launch{margin: 0;}

.quick-launch .project-home, .quick-launch .project-home .title{

font-size: 1.6em;

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);

}

ホーム色系

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: #39ac86;}

.new-button .vertical-line{background-color: #39ac86;}

.search-form .form-group input{background-color: #efefef;}

ホバーアニメーション

code:style.css

data-hover-visible .grid li.page-list-item a:hover{box-shadow:none;}

.grid li.page-list-item a .hover{background-color:none;}

/* 背表紙回転(お好みでどうぞ) */

/*　ここから　*/

data-hover-visible .grid li.page-list-item a:hover .hover{opacity:0}

.grid li.page-list-item a .content{

transition: all 0.4s 0s cubic-bezier(.165,.84,.44,1);

transform: rotateX(0deg);

transform-origin: bottom;

}

.grid li.page-list-item a:hover .content{

transform: rotateX(20deg);

transform-origin: bottom;

}

/*　ここまで　*/

/* 背表紙の影 */

.grid li.page-list-item a .content::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;

z-index: 4;

}

.grid li.page-list-item a:hover .content::after{

opacity:1;

}

ページ

頁タイトル中央揃え

code:style.css

.line.line-title .text{

text-align: center;

font-weight: bold;

}

画像に角丸+シャドウを追加

code:style.css

.line img.image {

display : block;

margin : 0em auto -1em;

border-radius: 0.2em;

filter: drop-shadow(0px 8px 24px rgba(149,157,165,0.22));

position: relative;

max-width:700px;

top: 1em;

}

外部リンク 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

.page{box-shadow:none;}

行頭のドットを薄く

code:style.css

.line .indent-mark .dot {

top: 11px;

width: 6px;

height: 3px;

background-color: #c9c9c9;

}