今回はブログのトップページの記事へのリンクのデザインを整えてみました。
本ブログのトップページでは現在、記事（投稿）一覧が表示されています。
この記事へのリンクひとつひとつを「ブログカード」とか「カード」なんて呼ばれていたりします。そのブログカードのデザインを見ていきたいなぁと思います。
ブログカードとは
ブログカードとは、「サムネイル」、「タイトル」、「抜粋」などの情報で構成された、ブログ記事へのリンクを含む“モジュール”です。また、これは外部ブログや通常のページへのリンクとしてもよく使用され、単に「カード」や「カード型リンク」などとも呼ばれます。
要は見た目が“カード”っぽくなっているリンクです！
どんな見た目？
ブログカードの見た目は、大別すると「縦」と「横」の２種類に分かれると思います。
縦型、いわゆるカード型
サムネイルを大きく表示しやすく、一つ一つの記事を視覚的にまとまった形で表示することができます。
私たちは“情報”が並んでいるとき、多くの人が左から上から順に“読み取ろう”とするとよく言われますが、ぱっと見たとき“絵”として広く見せることができるので、より過去の記事にもアプローチしやすいのではないかなと思います。
横長
テキストをきちんと読ませるのに適した形だと思います。更新順であったり、オススメ順であったり上から順番に表示されます。
ほとんどの場合は上から読むと思うので、運営側がPVをコントロールしやすい形なのかなと思います。抜粋がよく読まれるようなユーザー層やジャンルであればピッタリな形だと思います。ニュース系など相性が良いのではないでしょうか。
縦型のブログカードを作りたい！
現状、本サイトは横型のカードで記事一覧を表示しています。それを縦型のデザインにしたいと思っていました。
何列にする？
縦にする場合、何列で並べるかを考えなければいけませんね。多くの個人ブログでよく見かけるのは２列です。
３列以上は、記事数が大量にあり多岐にわたるカテゴリを扱っている大手メディアや、１カラムのブログに多く見受けられる印象です。
本ブログはまだ記事数が少ないというのと、サイドバーを設置している２カラムのブログなので、まずは２列で作ってみようと思います。（スマホの表示は１列）
こんな感じのデザインにする！
とりあえずラフを書いてみました。。
特筆すべき部分もない、ありふれたブログカードですが、今回は抜粋をはずしてみました。というのも、本ブログはタイトルをわりと長く書くということを意識しているのと、自分自身の経験として興味があったブログに入ってしまえばもう抜粋ってあまり読まないなぁと思い、
ということはじゃあ抜粋は必要ないなぁという考えです。
検索によりサーチエンジンで表示される抜粋は、アクセスしてもらうには非常に大切だと思いますが、トップページまで来たユーザーにとっては案外不要な要素なのかなと思いました。（ブログのジャンルによるとは思いますが。。。）
あと著者も不要なのではずしました。
なぜなら、私しかいないから！
ということで、
さっそく作っていこうと思います！
コードを見てみる
HTML のコード
<article class="article-list">
<a href="*">
<div class="article-list__thumb">
<figure class="article-list__img-wrapper">
<img src="*">
</figure>
<span class="article-list__cat">カテゴリ</span>
<span class="article-list__date-post">
<i class="far fa-clock article-list__icon"></i>
<time datetime="2023-11-04">2023/11/12</time>
</span>
<div><!--/.article-list__thumb-->
<div class="text article-list__text">
<h2 class="article-list__title">タイトル</h2>
</div><!--/.article-list__text-->
</a>
</article>WordPress のコードなので実際は php でちょっと違うのですが、html だとだいたいこんな感じになるかと思います。
カード全体をリンクにしたかったので、a要素で囲ってます。その内側にサムネイル部分とテキスト部分でdivで分けて囲っています。その他、特に特殊なことはしていないつもりです。
CSS のコード
サムネイル部分
サムネイル部分は「画像」、「カテゴリ」、「投稿日」で構成されています。
「画像」の上に「カテゴリ」、「投稿日」をそれぞれ配置できるようにしていきます。
まず、サムネイル部分のブロック（.article-list__thumb）にposition: relative;を記述します。
画像のサイズはaspect-ratio: 1.91 / 1;によって比率を指定することで、記事のアイキャッチ画像（1200px × 630px）の比率を維持したまま表示できるようにしました。
.article-list__thumb {
position: relative;
}
.article-list__img-wrapper{
width:100%;
aspect-ratio: 1.91 / 1;
overflow:hidden;
}
img{
width:100%;
object-fit: cover;
object-position: center;
}次に、サムネイル上に「カテゴリ」と「投稿日」を配置できるように、position: absolute;を記述し、その他の細かな調整をします。
.article-list__cat{
position: absolute;
font-size: .8em;
top: .5em;
left: .5em;
padding: .3em .5em;
color: #fff;
background-color: rgba(85,79,68,1);
}
.article-list__date-post {
position: absolute;
font-size: .8em;
bottom: .2em;
right: .2em;
font-weight: normal;
display: inline-block;
margin-right: .5rem;
margin-bottom: .5rem;
color: #fff;
text-shadow: 0 0 5px #000;
}テキスト部分
テキスト部分は、最大３行が納まるように高さを調整しました。
.article-list__title {
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
height:3.5em;
font-size:1.125em;
line-height:125%;
text-overflow: ellipsis;
}また、３行以上の文字数になってしまった場合にボックスからはみ出た部分は省略して、さらに文末に「…」と表示されるように設定しました。
並んだ時のレイアウト
あとは flex で並んだ時に２列になるようにレイアウトを調整して完成です。
.article-list{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
width:100%;
}
.article-list__item {
width:calc(50% - 10px);
margin-bottom: 2em;
}まとめ
ブログカードは多くのブログで採用されていることだけあり見栄えがとてもよく積極的に盛り込みたいデザインですね。ただ、少し要素が密集してしまうので全体のバランスを考えないとかえって見づらいサイトになってしまうかもしれませんね。サムネイルの画像をよりシンプルなものにしたり、カラムの間隔を調整したりして見やすいブログを目指していきましょう！
本ブログも少しごちゃっとしてしまいましたので、背景とマージンの調整などしていきたいと思います。
