目次
投稿記事一覧リストのデザインサンプル一覧
シンプル
記事のタイトル
<div class="t8-postlist-1">
<h4 class="t8-postname">記事のタイトル</h4>
<time class="t8-time-1" datetime="2023-02-03" aria-hidden="true">
<span class="year">2023</span></br>
<span class="date">2/3</span>
</time>
</div>.t8-postlist-1{
align-items: center;
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
.t8-time-1 {
border-right: 1px solid #808080;
font-weight: 400;
line-height: 1;
margin-right: .75em;
padding: .5em .75em .5em 0;
text-align: center;
}テキストベース
記事のタイトル
<div class="t8-postlist-2">
<div class="t8-postmeta-2">
<div class="t8-time-2">
<time class="t8-date-2" datetime="2023-02-03" aria-label="公開日">2023年2月3日</time>
</div>
<span class="t8-category-2" data-cat-id="">タグ</span>
</div>
<h4 class="t8-postname-2">記事のタイトル</h4>
</div>.t8-postmeta-2 {
align-items: center;
display: flex;
flex-wrap: wrap;
font-size: 5px;
line-height: 1.25;
margin-top: .75em;
margin-bottom: 1em;
position: relative;
}
.t8-date-2::before {
font-family: "Font Awesome 5 Free";
content: '\f017';
font-weight: 600;
margin-right: 1em;
}
.t8-category-2::before {
font-family: "Font Awesome 5 Free";
content: '\f02b';
font-weight: 600;
margin-right: 1em;
}
.t8-category-2{
margin-left: 2em;
}テキストベース(反転)
記事のタイトル
<div class="t8-postlist-2">
<h4 class="t8-postname-2">記事のタイトル</h4>
<div class="t8-postmeta-2">
<div class="t8-time-2">
<time class="t8-date-2" datetime="2023-02-03" aria-label="公開日">2023年2月3日</time>
</div>
<span class="t8-category-2" data-cat-id="">タグ</span>
</div>
</div>.t8-postmeta-2 {
align-items: center;
display: flex;
flex-wrap: wrap;
font-size: 5px;
line-height: 1.25;
margin-top: .75em;
margin-bottom: 1em;
position: relative;
}
.t8-date-2::before {
font-family: "Font Awesome 5 Free";
content: '\f017';
font-weight: 600;
margin-right: 1em;
}
.t8-category-2::before {
font-family: "Font Awesome 5 Free";
content: '\f02b';
font-weight: 600;
margin-right: 1em;
}
.t8-category-2{
margin-left: 2em;
}
サムネイルベース

記事のタイトル
<div class="t8-postlist-3">
<div class="t8-thumb-3">
<figure class="t8-imgfigure-3">
<img src="http://temp8.plat4.net/wp-content/uploads/2023/09/mt-sample-background.jpg"></figure>
<span class="t8-category-3">タグ</span>
</div>
<div class="t8-postbody-3">
<h4 class="t8-postname-3">記事のタイトル</h4> <div class="t8-postmeta-3">
<div class="t8-time-3">
<time class="t8-date-3" datetime="2023-02-03" aria-label="公開日">2023年2月3日</time></div>
</div>
</div>
</div>t8-imgfigure-3 {
z-index: 0;
}
.t8-postbody-3 {
background: rgba(0,0,0,.5);
bottom: 12px;
color: #fff;
left: 0;
padding: .75em;
position: absolute;
width: 100%;
}
.t8-category-3 {
background-color: #808080;
display: inline-block;
font-size: 15px;
line-height: 2;
overflow: hidden;
padding: 0 .75em;
position: absolute;
right: 5px;
top: 5px;
white-space: nowrap;
z-index: 1;
}
.t8-category-3::before {
font-family: "Font Awesome 5 Free";
content: '\f02b';
font-weight: 600;
margin-right: 0.5em;
}
.t8-date-3::before {
font-family: "Font Awesome 5 Free";
content: '\f017';
font-weight: 600;
margin-right: 0.5em;
}
カード型

記事タイトル
<div class="t8-postlist-4">
<div class="t8-thumb-4">
<figure class="t8-imgfigure-4">
<img src="http://temp8.plat4.net/wp-content/uploads/2023/09/mt-sample-background.jpg" ></figure>
<span class="t8-category-4" data-cat-id="">タグ</span>
</div>
<div class="t8-postbody-4">
<h4 class="t8-postname-4">記事タイトル</h4> <div class="t8-postmeta-4">
<div class="t8-time-4">
<time class="t8-date-4" datetime="2023-02-03" aria-label="公開日">2023年2月3日</time></div>
</div>
</div>
</div>.t8-category-4 {
background-color: var(--color_main);
display: inline-block;
font-size: 15px;
border-radius: 20px;
line-height: 2;
overflow: hidden;
padding: 0 .75em;
position: absolute;
right: 5px;
top: 5px;
white-space: nowrap;
z-index: 1;
}
.t8-category-4::before {
font-family: "Font Awesome 5 Free";
content: '\f02b';
font-weight: 600;
margin-right: 0.5em;
}
.t8-date-4::before {
font-family: "Font Awesome 5 Free";
content: '\f017';
font-weight: 600;
margin-right: 0.5em;
}リスト型
タグ
記事タイトル
<div class="t8-postlist-5">
<div class="t8-thumb-5">
<figure class="t8-imgfigure-5">
<img src="http://temp8.plat4.net/wp-content/uploads/2023/09/mt-sample-background.jpg" data-cat-id="">
<span class="t8-category-5" data-cat-id="">タグ</span>
</div>
<div class="t8-postbody-5">
<h4 class="t8-postname-5">記事タイトル</h4> <div class="t8-postmeta-5">
<div class="t8-time-5">
<time class="t8-date-5" datetime="2023-02-03" aria-label="公開日">2023年2月3日</time></div>
</div>
</div>
</div>.t8-postlist-5 {
display: flex;
}
.t8-thumb-5 {
width: 50%;
border-radius: 20%;
}
.t8-postbody-5 {
margin-left: 30px;
}
.t8-category-5 {
position: absolute;
font-size: 10px;
padding: 5px;
top: 10px;
left: 10px;
right: auto;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
background: #808080;
border-radius: 10px;
}
.t8-category-5::before {
font-family: "Font Awesome 5 Free";
content: '\f02b';
font-weight: 600;
margin-right: 0.5em;
}
.t8-date-5::before {
font-family: "Font Awesome 5 Free";
content: '\f017';
font-weight: 600;
margin-right: 0.5em;
}リスト型(反転)

記事タイトル
<div class="t8-postlist-5a">
<div class="t8-thumb-5a">
<figure class="t8-imgfigure-5a">
<img src="http://temp8.plat4.net/wp-content/uploads/2023/09/mt-sample-background.jpg"></figure>
<span class="t8-category-5a" data-cat-id="">タグ</span>
</div>
<div class="t8-postbody-5a">
<h4 class="t8-postname-5a">記事タイトル</h4> <div class="t8-postmeta-5a">
<div class="t8-time-5a">
<time class="t8-date-5a" datetime="2023-02-03" aria-label="公開日">2023年2月3日</time></div>
</div>
</div>
</div>.t8-postlist-5a {
align-items: flex-start;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: row-reverse;
}
.t8-thumb-5a {
width: 50%;
}
.t8-category-5a{
position: absolute;
padding: 5px;
top: 10px;
right: 10px;
font-size: 0.5em;
background: #808080;
border-radius: 10px;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.t8-category-5a::before {
font-family: "Font Awesome 5 Free";
content: '\f02b';
font-weight: 600;
margin-right: 0.5em;
}
.t8-date-5a::before {
font-family: "Font Awesome 5 Free";
content: '\f017';
font-weight: 600;
margin-right: 0.5em;
}