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;
}
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 0px;
transition: background-color 1s;
}
/* top items以外のpage-list-itemにボーダーを付ける(重複しないように) */
div.page-list .grid li.page-list-item a .content {
border-top: solid 1px darkgray;
border-left: solid 1px darkgray;
border-right: solid 1px darkgray;
border-bottom: solid 1px darkgray;
}
/* カーソルを重ねた場合（アニメーション） */
div.page-list .grid li.page-list-item a:hover {
box-shadow: none;
background-color: #F0F0F0;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
border: solid 2px rgba(102,204,255,2.0);
}
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;
}
/* 共通項 */
div.page-list li.page-list-item .grid-style-item a:not(href$="/About"):not(href$="/Projects"):not(href$="/Member"):not(href$="/Contact") {
height: auto;
margin: 0;
padding: 0;
border-readius: 0;
}
/* 960px以下 */
@media (max-width: 960px) {
div.page-list li.page-list-item.grid-style-item a:not(href$="/About") :not(href$="/Projects"):not(href$="/Member"):not(href$="/Contact") {
width: 100vw;
max-width: none;
}
}
/* page cardのdescriptionの大きさを制限する */
div.page-list .grid li.page-list-item a .description {
max-height: 30px;
margin-bottom: 20px;
}
/* descriptionの文末に「続きを読む」と表示してあげる */
div.page-list .grid li.page-list-item a .description::after {
content: "続きを読む";
position: absolute;
bottom: 0;
right: 5%;
padding-bottom: 10px;
}