EDIT

【QooQ】トップページのラベルの表示を変えてみた

｜2023/09/06
アイキャッチ

トップページのレイアウトをもうちょっとスッキリさせたくなったもんで、こんな風にしてみました。

これまでリストの右下に置いていたラベルをサムネ上の左上隅に移動させたんです。

実は以前にも同じようなレイアウトにしていた時期(当時はグリッドレイアウト)があったのですが、今回は常時表示ではなくて、公式テーマの Emporio の様に普段は非表示にしておいて、マウスホバー時に浮き出るようにしてあります。もちろんラベルのリンクも有効なままです。ラベルがなくなっただけでかなりスッキリしたと思うのですがどうでしょう？

ちなみにスマホやタブレット等のタッチデバイスではマウスホバーということが出来ないので、当初はラベルを常時表示させておこうかとも思ったのですが、どうせトップページはあまり見られないだろうし、ラベルの利用頻度もたぶん低いだろうということで完全非表示にしました。

参考までにCSSを載せておきます。基本的にこのコードを追記するだけでOKです。

.list-item {
  position: relative;
}
.list-item-category {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.list-item:hover .list-item-category {
  opacity: 1;
}
/*マウスホバー時にサムネ画像の色を薄くする*/
.list-item:hover .list-item-img {
  opacity: .7;
}
/*タッチデバイスでラベル非表示*/
@media (max-width: 1024px ) {
  .list-item-category {
    display: none;
  }
}

尚、グリッドレイアウト(カードタイプ)や当ブログのような大きいサイズのサムネを使用している環境だといい感じになると思いますが、小さいサムネのリストタイプではあまりオススメできません(^^;