トップページの記事一覧を当サイトのようにタイル状のレスポンシブレイアウトにするカスタマイズ方法です。
パソコンでは4列、タブレットでは3列、スマホでは2列になります。
吐き出しているhtmlはこちら。
<div class="type-column row">
<!--ここに記事一覧に表示したいコンテンツを記述-->
<article class="article-list post-XX<!-- 記事のclass名 -->">
<a href="<!-- 記事のurl -->">
<div class="img-wrap">
<!--画像を追加-->
<img width="250" height="167" src="<!-- 画像のurl -->">
</div><!--end img-warp-->
<div class="text">
<h2><!--記事タイトル--></h2>
<!--投稿日を表示-->
<span class="article-date">
<time datetime="2021-02-15">
<!-- ここに日時が表示される--></time>
</span>
<!--カテゴリ-->
<span class="cat-data">カテゴリー</span>
</div><!--end text-->
</a>
</article>
</div>.row {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}
.article-list {
width: 21%;
height: auto;
padding: 2% .5%;
position: relative;
margin-bottom: 1rem;
}
.article-list a {
display: block;
text-decoration: none;
color: #333;
}
.img-wrap {
overflow: hidden;
width: 100%;
height: 158px;
margin-bottom: 20px;
}
.article-list .img-wrap img {
width: 100%;
height: 158px;
object-fit: cover;
display: block;
overflow: hidden;
display: block;
width: 100%;
max-width: 100%;
max-height: 100%;
-moz-transition: -moz-transform 0.5s linear;
-webkit-transition: -webkit-transform 0.5s linear;
-o-transition: -o-transform 0.5s linear;
-ms-transition: -ms-transform 0.5s linear;
transition: transform 0.5s linear;
margin: 0;
}
.article-list .img-wrap img:hover {
opacity: .85;
-webkit-transform: scale(1.15);
-moz-transform: scale(1.15);
-ms-transform: scale(1.15);
transform: scale(1.15);
margin: 0;
background-color: transparent;
display: block;
padding: 0 !important;
max-width: 100%;
min-height: 100%;
height: auto;
width: 100%;
max-height: 158px;
}
.article-list .text h2 {
font-size: .95rem;
margin-bottom: 20px;
color: #121212;
text-align: left;
transition: all ease-out .2s;
font-weight: 300;
letter-spacing: .05em;
}
.article-list .text h2:hover {
opacity: 0.7;
}
.article-list .text .article-date {
font-size: .8rem;
font-weight: 300;
display: block;
margin-bottom: .5rem;
color: #666666;
font-family: 'Open Sans',"Helvetica Neue", sans-serif;
font-style: italic;
}
.article-list .cat-data {
font-size: .75rem;
color: #777777;
display: block;
font-style: italic;
font-family: 'Open Sans',"Helvetica Neue","Helvetica",'Avenir','Avenir Next Condensed', sans-serif;
letter-spacing: .04em;
}
.article-list .cat-data:hover {
text-decoration: underline;
}
.article-list .text p {
font-size: .8125rem;
line-height: 1.7;
}
/* タブレット表示 */
@media(max-width: 1024px) {
.article-list {
width: 31%;
height: auto;
padding: 2% 0;
position: relative;
margin-bottom: 1rem;
}
.img-wrap {
overflow: hidden;
width: 100%;
height: 158px;
margin-bottom: 20px;
}
.article-list a {
max-width: 237px;
margin: 0 auto;
}
}
/* スマホ表示 */
@media(max-width: 599px) {
.row {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin: auto;
box-sizing: border-box;
}
.article-list {
width: 50%;
height: auto;
padding: 0 2% 2% 2%;
position: relative;
margin-bottom: 2rem;
box-sizing: border-box;
}
.img-wrap {
width: 100%;
height: 25vw;
}
.article-list .img-wrap img {
width: 100%;
height: 25vw;
margin: 0;
}
.article-list .img-wrap .cat-data {
font-size: .5rem;
font-family: 'Open Sans',"Helvetica Neue","Helvetica",'Avenir','Avenir Next Condensed', sans-serif;
}
.article-list .text h2 {
font-size: .85rem;
margin-bottom: 1rem;
max-width: 100%;
}
.article-list .text .article-date {
font-size: .65rem;
margin-bottom: .3rem;
font-family: 'Open Sans',"Helvetica Neue", sans-serif;
font-style: italic;
font-weight: 300;
}
}display: flexを使い、デバイスの画面の幅に合わせて4列、3列、2列と可変するようにしています。（％の部分を変えれば他の個数にも対応可能）
画像はマウスホバー時に大きくなるエフェクトをつけています。
こちらは正しい書き方がイマイチわからず、もう少しスマートな書き方があるような気がします。。
お使いのテーマによって吐き出しているhtml、class名は異なるので、デベロッパーツールなどを使いながら確認してみてください。
フォントや余白はご自身のサイトに合わせて調整していただければ。
サービスメニュー
Postscript執筆後記
今更ながら初めてUber Eatsを使ってみました。（先輩におごってもらったのですが…）はまる方の気持ちがわかった気がします。
Something New一日一新
手伝いで先輩税理士の事務所Uber Eats
＼本を出版しました／
＼セルフマガジン無料送付／
