settings
code:style.css
.grid li.page-list-item a .header .title { overflow: visible }
.grid li.page-list-item a .header { overflow: visible }
.line-img { display: none }
code:style.css
body {
background-color: #88cc88;
}
.grid li.page-list-item a .header{
background-color: #eeffee;
}
.grid li.two-two.page-list-item a .title {
background-color: #eeffee; !important
}
.grid li.page-list-item a .content{
background-color: #eeffee;
}
code:style.css
.grid li.page-list-item a .header .title { overflow: visible}
.grid li.page-list-item a .header { overflow: visible }
.line-img { display: none }
スマホの時のグリッドサイズ
code:style.css
@media (max-width: 767px) {
.page-list .grid li{
/*.page-list-item.grid-style-item {*/
width: calc(33% - 8px * 2);
height: 150px;
}
.grid li.page-list-item a {
width: 100%;
}
.grid li.page-list-item a .content {
width: 100%;
}
}
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;
}
code:style.css
.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
.line strong {
color: #FF4500;
}
強調表示をオレンジ色に
code:style.css
/* 吹き出し本体 */
.deco-\{, .deco-\} {
font-size: 1em;
color: #fff;
background-color: #a2acaa;
padding: 0.1em 0.2em 0.1em 0.2em;
border-radius: 0.4em;
margin: auto 0.3em;
display: inline-block;
max-width: calc(100% - 100px);
vertical-align: top;
}
/* 左吹き出しの角 */
.deco-\{:before {
position: absolute;
margin: 0;
padding: 0;
transform: translateX(-100%) translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0 0.6em 0.6em;
border-style: solid;
border-color: #a2acaa transparent;
}
/* 右吹き出しの角 */
.deco-\}:after {
position: absolute;
margin: 0;
padding: 0;
transform: translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0.6em 0.6em 0;
border-style: solid;
border-color: #a2acaa transparent;
}
/* 強調吹き出しの角 */
.deco-\!:before, .deco-\!:after { border-color: #ee6666 transparent; }
/* 吹き出し内のリンク色の調整 */
.deco-\{ a, .deco-\} a { color: #66F; }
ピン止め
code:style.css
.grid li.page-list-item a .pin {
background-color: transparent;
background-image: none;
}
.grid li.page-list-item a .pin::after {
content: '\f08d';
font-family: 'Font Awesome 5 Free'; font-weight: 900;
font-size: 20px;
color: #21610B;
bottom: 0;
display: inline-block;
transform: rotate(35deg);
}
/customize/ピン留めされたページを独立した段に表示する
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
https://gyazo.com/21f6d0f325b2d15055574ff3214ea44e