QooQトップページ記事一覧を写真コレクション風に

2023年02月04日 2023年03月11日

ホームのトップページの画像のサイズが揃ってなくて、気にはなってたんですが、、

まあ、スマフォだと一列なので、気にならないかなぁっと放置状態だった。

トップページをポラロイド写真風にオシャレに♪

こちらの達人に伝授戴いた。。🙏好きなセンス、一目惚れです？！（笑）

「CSS」の微調整

タイトルを少々目立つようにして、全体、および写真のサイズを調整、

ラベルは、個別記事の形態に合わせ、ホーバーを止めました。

現在の「CSS」はこちらになってます。

/* list */
#list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: 8px;
}
#list a{
	color: inherit;
}
/* list-item */
.list-item{
	position: relative;
	flex-basis: 48%;
	overflow: hidden;
	align-items: center;
	background: #ffffff;
	padding: .5em;
	margin-top: .5em;
	border: solid 0.5px lightgray;
	border-radius: 3px;
	box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.25);
}
.list-item >a{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}
.list-item:hover {
	box-shadow: 0px 4px 6px 1px rgba(0, 0, 0, 0.25);
	transition: all 0.3s ease 0s;
}
.list-item:last-child:after{
	content: none;
}
/* list-item-inside */
.list-item-inside{
	display:flex;
	flex-direction:column;
	flex:auto;
	position:relative;
	margin:0px;
	padding:0px;
}
/* list-item-img 画像部分*/
.list-item-img-box{ /* 画像がある場合のboxと背景 */
	display:flex;
	border-radius: 3px;
	margin: 10px;
	background-color: darkgray; /*エフェクト。darkgreenやblackがよりポラロイド感*/
}
.list-item-noimg-box{ /* 画像がない場合のboxと背景 */
	display:flex;
	border-radius: 3px;
	margin: 10px;
	background-image: radial-gradient(#808080 2px, #fff 2px);
 	background-size: 20px 20px;
 	height:330px;
 	aspect-ratio: 6/5;
}
.list-item-img{ /* 画像 */
	display:block;
	border-radius: 3px;
	object-fit: cover;
	aspect-ratio: 6/5;
	height: 330px;
}
/* list-item-inner 画像の下部分*/
.list-item-inner{
	display: flex;
	flex-direction: column;
	flex: 1;
	margin: 0px;
	padding: .5em;
	height: auto;
}
.list-item-date{ /* 日付 */
	display: flex;
	justify-content: flex-start;
	color: #999999;
	font-size: 80%;
}
.list-item-title{ /* タイトル */
	font-weight: 200;
        font-style: italic;
	height: 48px;
	overflow: hidden;
}
/* list-item-category ラベル*/
.list-item-category{ /* 全ラベルが入る */
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	margin: .5em 0 .5em 0;
	font-size: 80%;
	font-weight: normal;
}
.list-item-category-item{ /* 各ラベル */
	display: block;
	margin: .1em;
	padding: .2em .3em;
	border-radius: 2px;
	background: $(brand.color);
	color: $(brand.font);
	position: relative;
	z-index: 3; /* list-itemより手前でもページトップへボタンよりは下 */
}
.list-item-category-item >a{
	display: block;
	padding: .2em .3em;
  }
@media ( max-width : 480px ) {
	#list{
		display: block;
	}
.list-item-img{
	aspect-ratio: auto 6/5;
}
}

「HTML」に今までの変更を反映する

  <div class='list-item-inside'>
      <b:if cond='data:post.dateHeader'>
        <script>var jsdate=&#39;<data:post.dateHeader/>&#39;</script>
      </b:if>
      <b:if cond='data:post.thumbnailUrl'>
        <div class='list-item-img-box'>
    	  <img alt='list-item' class='list-item-img' expr:src='resizeImage(data:post.firstImageUrl, 480, &quot;6:5&quot;)'/>
    	</div>
      <b:else/>
    	<div class='list-item-noimg-box'>
    	</div>
      </b:if>
      <div class='list-item-inner'>
        <p class='list-item-date'><data:post.date.year/>年<data:post.date.month/>月<data:post.date.day/>日</p>
      	<h3 class='list-item-title'><data:post.title/></h3>
     	<p class='list-item-category'>
          <b:loop values='data:post.labels' var='label'>
            <span class='list-item-category-item'><a aria-label='list-item' expr:href='data:label.url + &quot;?max-results=10&quot;'><data:label.name/></a></span>
          </b:loop>
      	</p>
      </div>
    </div>

変更の詳細は、こちらをご覧き下さい。