Page list items UserCSS
code:style.css
/* pinされたページ以外を非表示にする */
div.clearfix:not(.related-page-list) li.page-list-item.grid-style-item:not(.pin) {
display: none;
}
/* pinマークも非表示にしておく */
div.page-list div.pin {
display: none;
}
code:style.css
div.page-list li.page-list-item.grid-style-item {
width: auto;
height: auto;
margin: 0;
padding: 0;
border: none;
}
div.page-list .grid li.page-list-item a {
width: 100%;
height: 160px;
margin: 10px 0;
background: none;
box-shadow: none;
transition: background-color 300ms ease;
}
code:style.css
/* top items以外のpage-list-itemにボーダーを付ける(重複しないように) */
div.page-list .grid li.page-list-item a .content {
border-top: solid 1px #DDD; border-left: solid 1px #DDD; border-right: solid 1px #DDD; }
div.page-list .grid li.page-list-item.pin:nth-child(5) a .content {
border-bottom: solid 1px #DDD; }
code:style.css
div.page-list .grid li.page-list-item a:hover {
box-shadow: none;
}
div.page-list .grid li.page-list-item a .content {
width: 100%;
height: 100%;
padding: 5%;
}
div.page-list .grid li.page-list-item a .header {
border: none;
}
div.page-list .grid li.page-list-item a .hover {
display: none;
}
code:style.css
/* 共通項 */
height: auto;
margin: 0;
padding: 0;
border-radius: 0;
}
code:style.css
width: 100vw;
max-width: 1000px;
}
code:style.css
/* 960px以下 */
@media (max-width: 960px) {
width: 100vw;
max-width: none;
}
}
code:style.css
/* page cardのdescriptionの大きさを制限する */
div.page-list .grid li.page-list-item a .description {
max-height: 200px;
margin-bottom: 10px;
}
/* descriptionの文末に「続きを読む」と表示してあげる */
div.page-list .grid li.page-list-item a .description::after {
content: "See more";
position: absolute;
bottom: 0;
right: 5%;
padding-bottom: 10px;
}