Settings
code:style.css
.line i {
font-style: normal;
font-weight: bold;
}
.quote {
font-style: normal;
}
.level-1 img { width: 16.7%; max-height: none; }
.level-2 img { width: 33.3%; max-height: none; }
.level-3 img { width: 50%; max-height: none; }
.level-4 img { width: 66.7%; max-height: none; }
.level-5 img { width: 83.3%; max-height: none; }
.level-6 img { width: 100%; max-height: none; }
code:style.css
body {
}
.app {
width: 100vw;
margin: 50px auto;
max-width: 980px;
padding-left: 50px;
padding-right: 50px;
padding-top: 0px;
}
.container {
width: 100%;
padding: 0;
max-width: none;
}
.container .col-page {
max-width: 980px;
background-color: white;
padding: 20px;
}
.container .col-page .page {
max-width: 980px;
background: none;
box-shadow: none;
padding: 10px;
}
/* ナビゲートバー調整（タイトル位置の調整） */
.navbar {
position: relative;
}
.navbar .row {
margin-left: 10px;
margin-right: 10px;
}
.navbar.navbar-default {
background: none;
background-color: ;
}
.navbar .row {
margin-left: 10px;
margin-right: 50px;
}
/* 追加ボタン */
.new-button {
position: absolute;
right: 0px;
bottom: 0px;
}
/***************コンテナ部***************/
.container .quick-launch .flex-box {
}
.container .quick-launch .flex-box .tool-btn {
color: white;
}
/* 背景 */
.container .quick-launch {
height: 50vw;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin: 0px;
}
/* メインのタイトル部と下線 */
.container .page .line.line-title .text {
padding-bottom: 0px;
padding-left: 5px;
padding-right: 5px;
margin-bottom: 21px;
color: white;
}
.container .related-page-list {
margin-top: 50px;
}
.container .related-page-list .toolbar {
}
/* 一覧 */
.container .page-list ul.grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 200px));
}
/* pinついていない要素は非表示 */
.container .page-list .page-list-item.grid-style-item:not(.pin) {
display: none;
}
/* pinマークを非表示 */
.container .page-list div.pin {
display: none;
}
.container .page-list ul.grid {
position: relative;
flex-direction: column-reverse;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
width: 100%;
margin-top: 10px;
grid-template-columns: initial;
gap: initial;
}
.container .page-list .grid li {
aspect-ratio: initial;
}
.container .page-list li.page-list-item.grid-style-item {
width: auto;
height: auto;
margin: 0;
padding: 0;
border: none;
}
.container .page-list .grid .page-list-item a {
width: 100%;
height: 100px;
margin: 5px 0;
background: none;
box-shadow: none;
transition: background-color 300ms ease;
order-top: solid 1px #DDD; border-left: solid 1px #DDD; border-right: solid 1px #DDD; border-bottom: solid 1px #DDD; }
.container .page-list .grid .page-list-item a:hover {
box-shadow: none;
}
.container .page-list .grid .page-list-item a.header {
border: none;
}
.container .page-list .grid .page-list-item a.description {
max-height: 100px;
}
code:style.css
.line .deco-\!{
display: inline-block; min-width: 3.2em; padding: .2em .4em;
border-radius: .2em;
line-height: 1; vertical-align: unset; text-align: center;
font-size: 85%; font-weight: bold; color: #FFF !important; }
.line strong .deco-\! {
padding: .2em 0 !important;
font-size: 100%;
}
.line .deco-\! a {
}
.line .deco-\! a:hover {
opacity: .5;
}
.line strong:not(.level-1):not(.level-2) .deco-\! {
display: inline-block;
width: 100%;
}
.line strong:not(.level-1):not(.level-2) .deco-\!:after {
display: none;
}
画像を並べて表示
https://gyazo.com/3f8f99a08b4e2b4f1b0f517e6a12d711https://gyazo.com/4e7fa105206842790b8db92629f3c751
code:style.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.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: .2em }