CSSのグリッドレイアウトでは、一部のグリッドを大きくすることができます。今回は、グリッドレイアウトで、レスポンシブ対応のアーカイブを作成する方法を紹介します。
今回は、サムネイルのアーカイブです。
14個のサムネイルを表示しています。画像が正方形になっています。PCでは、最初と最後が大きく表示されます。SPでは全て同じ大きさです。
コード
PHPに下記コードを入力します。
<div id="grid-column"＞
<ul class="gridcolumn">
<?php
$custom_posts = get_posts(array(
'post_type' => 'all_demos',
'posts_per_page' => 14,
));
global $post;
?>
<?php if($custom_posts): ?>
<?php foreach($custom_posts as $post): setup_postdata($post); ?>
<li class="grid-item">
<div class="about-news-icon zoomIn">
<a href="<?php echo esc_url(get_permalink()); ?>">
<?php if(has_post_thumbnail()): ?>
<?php the_post_thumbnail('medium_large'); ?>
<?php else: ?>
<img src="<?php echo esc_url(get_theme_file_uri('/assets/images/damy001.jpg')); ?>" alt="damy" >
<?php endif; ?>
</a>
</div>
</li>
<?php endforeach; ?>
<?php endif; wp_reset_postdata(); ?>
</ul>
</div>CSSでスタイルを整えます。
#grid-column {
max-width: 1500px;
margin: 0 auto;
padding: 0 4%;
}
#grid-column .about-news-icon {
width: 100%;
height: 100%;
aspect-ratio: 1/1;
overflow: hidden;
float: left;
object-position: 50% 50%;
margin-bottom: 0;
padding-bottom: 0;
border-radius: 5px;
will-change: transform;
}
#grid-column .news{
text-align: left;
margin-bottom: 0;
padding-bottom: 0;
width: 100%;
display: inline-block;
}
.gridcolumn {
display: grid;
gap: 1em;
grid-template-columns: repeat(4, 1fr);
padding-top: 6%;
padding-bottom: 6%;
}
.gridcolumn li:first-child {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
.gridcolumn li:nth-child(14) {
grid-column: 3 / 5;
grid-row: 4 / 6;
}
@media (max-width: 740px) {
.gridcolumn {
grid-template-columns: repeat(2, 1fr);
}
.gridcolumn li:first-child {
grid-column: auto;
grid-row: auto;
}
.gridcolumn li:nth-child(14) {
grid-column: auto;
grid-row: auto;
}
}以上で今回の説明は終了です。デザインに合わせてCSSでレイアウトが変更できるので便利ですね。アーカイブページや、トップページで使えます。画像のギャラリーとしても使えます。
