Private code
画像がサムネイルする
<section class="yogatabochi1">
<h2 class="title_type1">洋型墓地施工例</h2>
<ul id="luminous" class="image1">
<li>
<a href="<?php echo get_template_directory_uri(); ?>/assets/images/yougatabochi91.jpg">
<canvas style="background: url(<?php echo get_template_directory_uri(); ?>/assets/images/yougatabochi91.jpg) center / cover;"></canvas>
</a>
<h3>山梨県甲斐市</h3>
</li>
</li>
</ul>
</section>
【CSS】
.image1 {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
counter-reset: number;
}
.image1:after {
content: '';
width: 32%;
}
.image1 li {
width: 32%;
margin-bottom: 15px;
}
.image1 li canvas {
height: 150px;
width: 100%;
}
.image1 li h3 {
text-align: center;
font-weight: normal;
font-size: 15px;
margin-top: 5px;
}
.image1 li h3:before {
counter-increment: number;
content: counter(number)'.';
}
img, canvas {
max-width: 100%;
height: auto;
vertical-align: middle;
}
canvas {
background: #333;
background-size: cover !important;
background-position: center !important;
vertical-align: bottom;
}
.slider canvas {
width: 100%;
height: 27vw;
}
.image1 li canvas {
height: 150px;
width: 100%;
}
.image1 li canvas {
height: 32vw;
}
.yogatabochi1{
margin-bottom: 70px;
}
.yogatabochi1 {
margin-top: 50px;
}
.title_type1 {
font-size: 19px;
position: relative;
padding: 5px 45px;
background: #1A7DBE;
color: #fff;
font-weight: normal;
margin-bottom: 15px;
font-family: 'hiraginomarugoProN_W4';
}
.title_type1:before {
position: absolute;
content: '';
background: url(../images/item3.png) center / cover;
width: 20px;
height: 20px;
top: 50%;
left: 2%;
transform: translate(0, -50%);
opacity: 0.8;
}