QooQのHTML編集は、上の方でCSSのカスタマイズが容易に行えます。
本記事では【６記事一覧】について解説していきます！
当ブログはQooQ list版ですが、別ブログでは通常のQooQを使用しているため両方の説明をしていきます。
QooQの記事一覧CSS
投稿日時点で別ブログバラを咲かせることが好き！で実際に使用しているCSSは以下のようになっています。
少し長いですが、コメントアウトで説明を加えているので参考にしてみてください。
/****************************************
記事一覧
*****************************************/
#list{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
#list a{
color: inherit;
}
.list-item{
flex-basis: 49.5%; /*記事１つの横幅*/
margin-top: 8px; /*記事上余白*/
border-radius: 3px; /*角丸*/
background: $(other.back); /*背景色*/
}
.list-item-inner{
padding: .5em; /*文字まわり余白*/
border-top: none;
}
.list-item-date{
color: $(font.light); /*日付文字色*/
font-size: 90%; /*日付文字サイズ*/
}
.list-item-category{
display: flex;
flex-wrap: wrap;
justify-content: flex-end; /*ラベル位置末尾*/
margin-top: .5em; /*ラベル上の隙間*/
font-size: 60%; /*ラベル文字サイズ*/
font-weight: bold; /*ラベル太文字*/
}
.list-item-category-item{
display: block;
margin-top: .3em; /*ラベル上の隙間*/
margin-left: .3em; /*ラベル間*/
padding: .3em 1em; /*ラベル背景の余白*/
border-radius: 2px; /*ラベル角丸*/
background: $(brand.color); /*ラベル背景色*/
color: $(brand.font); /*ラベル文字色*/
}
.list-item-img{
display: block;
width: 100%; /*画像サイズ*/
}
.list-item-title{
margin-top: .5em; /*記事タイトル上余白*/
font-weight: bold; /*記事タイトル太字*/
}
@media ( max-width : 480px ) {
#list{
display: block;
}
}
少し数値をいじっているくらいで、あまり変更は加えていません。
QooQ list版の記事一覧CSS
投稿日時点で当ブログが実際に使用しているCSSは以下のようになっています。
少し長いですが、コメントアウトで説明を加えているので参考にしてみてください。
/****************************************
記事一覧
*****************************************/
#list{
margin-top: 10px; /*パンくずリストと記事一覧の間*/
}
#list a{
color: inherit; /*リンク文字色*/
}
.list-item{
display: flex;
align-items: center;
background: $(other.back); /*背景色*/
position: relative;
padding: 1em; /*位置調整*/
}
.list-item:after{
content:"";
display: block;
position: absolute;
width: 90%; /*記事の間の線の長さ*/
height: 1px;
border-bottom: solid 1px $(other.border); /*線の種類・太さ・色*/
left: 5%; /*記事の間の線の左余白*/
bottom: 0;
}
.list-item:last-child:after{
content: none;
}
.list-item-img-box{
flex-shrink: 0;
flex-basis: 72px;
}
.list-item-img{
display: block;
border-radius: 5%; /*サムネ丸50%～正方形0%*/
width: 72px; /*サムネ幅*/
height: 72px; /*サムネ高さ*/
object-fit: cover;
}
.list-item-inner{
flex-grow: 1;
padding: .5em;
}
.list-item-date{
color: $(font.light); /*日付文字色*/
font-size: 90%; /*日付文字サイズ*/
}
.list-item-category{
margin-top: .5em; /*ラベル上の隙間*/
display: flex;
flex-wrap: wrap;
justify-content: flex-end; /*ラベル位置末尾*/
font-size: 70%; /*ラベル文字サイズ*/
font-weight: bold; /*ラベル太文字*/
}
.list-item-category-item{
display: block;
margin-top: .3em; /*ラベル上の隙間*/
margin-left: .3em; /*ラベル間*/
padding: .3em 1em; /*ラベル背景の余白*/
border-radius: 2px; /*ラベル角丸*/
background: $(brand.color); /*ラベル背景色*/
color: $(brand.font); /*ラベル文字色*/
}
.list-item-title{
font-weight: bold;
}
@media ( max-width : 480px ) {
#list{
display: block;
}
}
QooQ list版の初期設定では、記事一覧のサムネイルは円形になっています。
.list-item-imgのborder-radiusが50%で円形、0%で正方形になります。
当ブログでは少し角を丸めたかったので5%に設定しています。
