/kiito-themes/グリッド&リスト

generated at 2/16/2025, 9:09:51 AM
グリッド&リスト
ページ一覧のデザイン
#UserCSS #design #original

トップページ、検索ページ、関連リンク
グリッド、リスト両方ともページアイコンを背景に薄く表示する
マウスオーバーで前面に表示
対象クラス
 .list :	検索ページ
 .grid :	トップページ・関連リンク
 .page-list : トップページ
 .related-page-list : 関連リンク

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;
}