過去作品ページのデザイン変更

シンプルなデザインからもう少し手を加えたいなと思い、ここ数日格闘してました。
手始めに日付部分の表示位置を動かして、リボンっぽい意匠を加えてみた。

<div class=”works-card”></div>の中にサムネイルやタイトルなどループさせたい項目を全部入れて、これを親要素とする。
この要素を基準にworks-timeを絶対配置したいので、忘れずにposition: relative;を指定する。

それから日付を<div class=”works-time”></div>で囲んでposition: absolute;を付加する。
リボンの太さ長さはお好みで。今回は日付をwriting-mode: vertical-rl;で縦書きにしました。

<div class="works-card">
    <img src="サムネイル">
    <h2><a href="">個別記事へのリンク</a></h2>
    <div>投稿日時</div>
    <div class="works-time">投稿日時</div>
</div>

.works-card {
    position: relative;
}

.works-time {
    position: absolute;
    top: -6px;
    right: 16px;
    width: 40px;
    padding: 10px 0;
    text-align: center;
    writing-mode: vertical-rl;
    border-top-left-radius: 3px;
    background: rgb(234 216 223 / 80%);
    box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
}

.works-time::before {
    top: 0.1px;
    right: -5.5px;
    width: 0;
    height: 0;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #a09191;
}

.works-time::before, .works-time::after {
	position: absolute;
	content: '';
}

.works-time::after {
    bottom: -20px;
    left: 0;
    width: 0;
    height: 0;
    border-right: 20px solid rgb(234 216 223 / 80%);
    border-bottom: 20px solid transparent;
    border-left: 20px solid rgb(234 216 223 / 80%);
}

タイトルもちょっと物足りないので変えます。

なかなかデザインが決まらず迷走しましたが……

最終的にめちゃくちゃかわいいのが出来ました！

見出しの背景に画像を指定しています。今回はこちらのサイトから素材をお借りしました。

h2 {
    background: url(画像URL.png);
    background-repeat: no-repeat;
    background-size: 85%;
    background-position-y: center;
    background-position-x: center;
    font-weight: lighter;
    border-bottom: solid 1px #eee;
    margin: 0;
    padding-bottom: 24px;
    padding-top: 24px;
}

h2 a {
    display: flex;
    justify-content: center;
    align-items: center;
/* あとは適当にpaddingやmarginで位置調整 */
}

PCではカーソルを乗せると奥からズームするような動きでハートマークが浮かび上がります。かわいい。
これは擬似要素を使って実装しました。

これも単純な仕組みですが、ソースを乗せておきます。Font Awesomeを利用しています。

h2 a::after {
    position: absolute;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f004";
    line-height: 80px;
    color: transparent;
    margin: auto;
    z-index: -9999;
    transition: 0.3s;
    transition-timing-function: ease-out;
}

h2 a:hover::after {
    position: absolute;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f004";
    font-size: 50px;
    line-height: 40px;
    color: #efdfe1;
    margin: auto;
    z-index:-9999;
}

擬似要素と擬似クラスを併用する際は、擬似クラス（hoverやactive）が先でないと動かないので注意が必要です。

ちなみに上記の例のようにタイトルが長いと背景画像と文字が重なって視認性が悪くなるので、text-shadowプロパティを使って文字の周りに白い枠をつけてます。

h2 a {
  text-shadow    : 
       2px  2px 1px rgba(255, 255, 255, 0.95),
      -2px  2px 1px rgba(255, 255, 255, 0.95),
       2px -2px 1px rgba(255, 255, 255, 0.95),
      -2px -2px 1px rgba(255, 255, 255, 0.95),
       2px  0px 1px rgba(255, 255, 255, 0.95),
       0px  2px 1px rgba(255, 255, 255, 0.95),
      -2px  0px 1px rgba(255, 255, 255, 0.95),
       0px -2px 1px rgba(255, 255, 255, 0.95); 
}