グリッド&リスト
ページ一覧のデザイン
#UserCSS #design #original
トップページ、検索ページ、関連リンク
グリッド、リスト両方ともページアイコンを背景に薄く表示する
マウスオーバーで前面に表示
対象クラス
.list: 検索ページ
.grid: トップページ・関連リンク
.page-list: トップページ
.related-page-list: 関連リンク
code:style.css
.related-page-list {
overflow: visible;
width: 100%;
}
@media (min-width: 768px) {
.related-page-list {
width: 20%;
}
}
.page-list ul,
.related-page-list ul.grid {
display: flex;
flex-wrap: wrap;
margin: .8em 0 !important;
}
.related-page-list ul.grid {
margin: 0;
}
@media (min-width: 1050px) {
.page-wrapper .related-page-list {
max-width: none;
margin: 0;
overflow: visible;
width: 20%;
}
}
@media (min-width: 1050px) {
.related-page-list .grid .splitter {
display: none !important;
height: 10px !important;
}
}
/* Item */
/* Default (Small): 6 columns */
.page-list .grid li.page-list-item,
.list li.page-list-item {
height: 210px;
padding: 0.5%;
margin: 0;
}
.page-list .grid li.page-list-item {
width: 50%;
height: 250px;
}
.list li.page-list-item {
background: none;
box-shadow: none;
}
@media (min-width: 768px) {
.page-list .grid li.page-list-item {
width: 25%;
height: 230px;
}
}
@media (min-width: 1050px) {
.page-list .grid li.page-list-item {
width: 16.6%;
height: 210px;
}
}
.page-list .grid li.page-list-item.pin {
width: 100%;
}
@media (min-width: 768px) {
.page-list .grid li.page-list-item.pin {
width: 50%;
}
}
@media (min-width: 1050px) {
.page-list .grid li.page-list-item.pin {
width: 33.3%;
}
}
.page-list .grid li.page-list-item.pin:first-child {
width: 100% !important;
}
/* Medium: 4 columns */
.page-list .grid.grid-md li.page-list-item {
width: 50%;
height: 230px;
}
.page-list .grid.grid-md li.page-list-item.pin {
width: 100%;
}
@media (min-width: 768px) {
.page-list .grid.grid-md li.page-list-item {
width: 25%;
}
.page-list .grid.grid-md li.page-list-item.pin {
width: 50%;
}
}
/* Large: 2 columns */
.page-list .grid.grid-lg li.page-list-item,
.list li.page-list-item {
height: 250px;
}
.page-list .grid.grid-lg li.page-list-item,
.list li.page-list-item {
width: 50%;
}
.page-list .grid.grid-lg li.page-list-item.pin,
.list li.page-list-item.pin {
width: 100%;
}
.page-list .grid li.page-list-item.pin:first-child {
height: auto;
}
.grid li.splitter.splitter {
display: none;
}
.related-page-list .grid li {
padding: .4em;
margin: 0;
height: 180px;
width: 50%;
}
@media (min-width: 768px) {
.related-page-list .grid li {
padding: .4em 0 .4em .4em;
}
}
@media (min-width: 768px) {
.related-page-list .grid li {
width: 100%;
}
}
.related-page-list .grid li.page-list-item.empty {
opacity: .8;
height: auto;
}
.related-page-list .grid li.relation-label {
height: auto;
padding: .6em .4em;
width: 100%;
}
@media (min-width: 768px) {
.related-page-list .grid li.relation-label {
padding: .6em 0 .6em .4em;
}
}
.related-page-list .grid li.relation-label a {
display: block;
}
@media (max-width: 768px) {
.grid li.relation-label .arrow {
display: none;
}
}
.list li.page-list-item a,
.grid li.page-list-item a {
position: relative;
overflow: hidden;
padding: 1.2em 10%;
width: 100%;
height: 100%;
box-shadow: 4px 1px 10px rgba(0, 0, 0, .15);
border-radius: 0 !important;
background-color: #fff;
}
.list li.page-list-item a {
grid-template-rows: 100%
}
.list li.page-list-item a:hover,
.grid li.page-list-item a:hover {
box-shadow: 4px 1px 10px rgba(0, 0, 0, .18);
}
.list li.page-list-item a *,
.grid li.page-list-item a * {
line-height: normal !important;
z-index: 1;
}
.grid li.page-list-item a .hover {
z-index: 3;
}
/* Pin Icon */
.page-list .grid li.page-list-item a .pin {
display: none;
}
/* Content */
.grid li.page-list-item a .content,
.list li.page-list-item a {
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: minmax(0, 100%) minmax(0, 35%);
width: 100%;
height: 100%;
margin: 0;
}
.list li.page-list-item a .content {
max-width: 100%;
margin: 0;
grid-row: 1;
grid-column: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
.page-list .grid li.page-list-item.pin:first-child a .content {
height: auto;
text-align: center;
}
.list li.page-list-item a .content:only-child {
grid-column: 1 / 3;
}
/* Header */
.grid li.page-list-item a .header,
.list li.page-list-item a .title-with-description {
border: none;
padding: .8em 0 !important;
margin: 0;
}
.list li.page-list-item a .title-with-description {
max-height: none;
font-size: 1.7em;
font-weight: bold;
color: #4e505d;
text-overflow: ellipsis;
overflow: hidden;
}
.grid li.page-list-item a .header {
grid-row: 1;
grid-column: 1 / 3;
}
.page-list .grid li.page-list-item.pin a .header {
grid-column: 1;
}
@media (min-width: 1050px) {
.page-list .grid li.page-list-item.pin a .header {
grid-column: 1 / 3;
}
}
.page-list .grid.grid-md li.page-list-item.pin a .header,
.page-list .grid.grid-lg li.page-list-item.pin a .header {
grid-column: 1 !important;
}
.page-list .grid li.page-list-item.pin:first-child a .header {
grid-column: 1 / 3 !important;
}
.related-page-list .grid li.page-list-item .header {
padding: 0;
}
/* Title */
.grid li.page-list-item a .title {
display: block;
font-size: 1.1em !important;
max-height: none !important;
}
.page-list .grid li.page-list-item.pin a .title {
font-size: 1.3em !important;
}
@media (min-width: 768px) {
.page-list .grid.grid-lg li.page-list-item.pin a .title {
font-size: 1.45em !important;
}
.page-list .grid.grid-lg li.page-list-item. a .title {
font-size: 1.3em !important;
}
}
@media (min-width: 1050px) {
.page-list .grid.grid-md li.page-list-item a .title {
font-size: 1.3em !important;
}
.page-list .grid.grid-md li.page-list-item.pin a .title {
font-size: 1.45em !important;
}
.page-list .grid.grid-lg li.page-list-item a .title {
font-size: 1.6em !important;
}
.page-list .grid.grid-lg li.page-list-item.pin a .title {
font-size: 1.75em !important;
}
}
/* Icon */
.list li.page-list-item a .icon {
grid-row: 2;
grid-column: 2;
position: relative;
width: 100%;
top: auto;
left: auto;
transform: none;
padding: 0;
opacity: 1;
}
@media (min-width: 768px) {
.page-list .grid.grid-lg li.page-list-item a .icon {
grid-row: 2;
grid-column: 2;
position: relative;
width: 100%;
top: auto;
left: auto;
transform: none;
padding: 0;
opacity: 1;
}
}
@media (min-width: 1050px) {
.page-list .grid li.page-list-item.pin a .icon {
grid-row: 2;
grid-column: 2;
position: relative;
width: 100%;
top: auto;
left: auto;
transform: none;
padding: 0;
opacity: 1;
}
}
.list li.page-list-item a .icon {
grid-row: 1;
background: none;
}
.grid li.page-list-item a .icon {
position: absolute;
top: 50%;
left: 50%;
width: 110%;
height: 100%;
margin: 0;
max-height: none;
transform: translate(-50%, -50%);
background-color: #fff;
z-index: 0;
transition: opacity 0.4s 0.02s ease, filter 0.4s 0.02s ease;
opacity: .06;
}
.page-list .grid.grid-md li.page-list-item.pin a .icon,
.page-list .grid.grid-lg li.page-list-item.pin a .icon {
grid-row: 1 / 3;
}
.related-page-list .grid li.relation-label .icon {
display: none;
}
/* マウスオーバーでアイコンを前面に表示 */
.grid li.page-list-item a:hover .icon {
z-index: 2;
opacity: .95;
}
.grid li.page-list-item a .icon img,
.list li.page-list-item a .icon img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100%;
filter: grayscale(40%);
backface-visibility: hidden;
}
.page-list .grid li.page-list-item.pin a .icon img,
.list li.page-list-item a .icon img {
margin-left: auto;
}
.list li.page-list-item a .icon img {
opacity: .85;
filter: none;
max-height: 100%;
max-width: 100%;
width: auto;
margin-left: auto;
margin-right: 0;
padding-left: 10%;
}
@media (min-width: 768px) {
.page-list .grid.grid-lg li.page-list-item a .icon img {
opacity: .85;
filter: none;
max-height: 100%;
max-width: 100%;
width: auto;
margin-left: auto;
margin-right: 0;
padding-left: 10%;
}
}
.grid li.page-list-item a:hover .icon img {
filter: grayscale(0%);
}
/* Description */
.list li.page-list-item a .description,
.grid li.page-list-item a .description {
margin: 0 !important;
padding: 0 !important;
height: auto;
transition: inherit;
max-height: 100%;
grid-row: 2;
grid-column: 1 / 3;
font-size: 0.9em !important;
}
@media (min-width: 768px) {
.page-list .grid.grid-lg li.page-list-item a .description {
font-size: 1.1em !important;
}
}
@media (min-width: 1050px) {
.page-list .grid.grid-md li.page-list-item a .description {
font-size: 1.1em !important;
}
.page-list .grid.grid-lg li.page-list-item a .description {
font-size: 1.3em !important;
}
}
.page-list .grid.grid-md li.page-list-item.pin a .description,
.page-list .grid.grid-lg li.page-list-item.pin a .description,
.page-list .grid.grid-lg li.page-list-item a .description.fix {
grid-column: 1 !important;
}
.page-list .grid li.page-list-item.pin:first-child a .description {
grid-column: 1 / 3 !important;
}
.related-page-list .grid li.page-list-item .description {
padding: 0;
}
.related-page-list .grid li.page-list-item.empty .description {
display: none;
}
/* 詳細文を複数行に分けて表示する */
.list li.page-list-item a .description span {
display: block;
color: #8a8c95;
margin: 0;
}
/* 詳細文の一行目だけ少しフォントサイズを上げる */
.list li.page-list-item a .description span:first-child {
font-size: 1.1em;
padding-bottom: 0.8em;
}
.list li.page-list-item a .description br,
.grid li.page-list-item a .description br {
display: none;
}
/* ヒットしたページ数を非表示 */
.search-result-count {
display: none;
}
.related-page-list .related-page-sort-menu {
float: none;
}
.related-page-list .related-page-sort-menu .dropdown-menu-right {
right: auto;
}
https://gyazo.com/66a8c74f9770b3eec6ee8069c15afab3