ユーザに安心してクリックしてほしい。
こんにちは、「ふ」です。
自身もよく使ってきたのですが、ユーザを他の自分のページに誘導したい時に、
「前回の記事はコチラ」
などとリンクを貼っていました。
これ、ちょっと正体不明感ありますよね。ユーザの受け止め方によっては、「怪しい」印象を与えるかもしれない。
ここはリンクをサイト全体に同一のデザインで表示して、「これは自サイト内のリンクだよ」とユーザに安心して踏んでもらいたいものです。
そのためには統一された書式、似たような形式のサムネイルを添えた「リンクカード」を用意してあげるのが良いのではないでしょうか。優秀なブログなどには「関連記事」のところにサムネイル付きで記事のリンクが表示されていますよね。
そんなリンクカードの作り方について調べてみたところ、リストタグを使った方法がいくつか紹介されていました。しかし今回はflexboxを使って実装してみたいと思います。そのほうが簡単そうなので。
横パターン。
左にサムネイル、右にテキスト。
でははじめに、左にサムネイル画像、右にテキストが横並びになっているパターンを作ってみましょう。
HTML
」」
左にサムネイル、右にテキスト。
」」imgとtext部分を「div」で囲み、さらにその外側も「div」で囲みます。
CSS
親要素の「licard」をflexbox化し、幅などを調整します。ここはお好みでどうぞ。
CSS
子要素である「licard_img」と「licard_text」の幅が合計100%になるよう調整します。今回は30:70としました。
CSS
サムネイルに載せたい画像を「licard_img」のサイズにトリミングします。
CSS
「licard_text」の余白を設定しました。
後はこれらの要素を<a>〜</a>タグで囲んで完成です。
ここでいきなり使おう ♪
画像のトリミングについては以下のページで説明しています。
CSS:親要素の形状サイズで画像をトリミング（切り抜き）、object-fit。
縦パターン。
今度は上にサムネイル。
次はテキストの上にサムネイルが表示されている縦パターン。
先ほどの横パターンは、flexboxの主軸がデフォルト（水平方向）となっていました。これを縦方向に設定し、あとはサイズなどを整えるだけです。
HTML
」」
今度は上にサムネイル。
」」HTMLの構成は横パターンと同じです。
CSS
親要素「licard2」のflex-directionを「column」（Y方向）に設定し、見た目をお好みで調整。
CSS
そして子要素もカスタマイズ。サムネイルとテキストの高さを7:3としました。あっけなく完成です。
ほんとはメディアクエリ。
flexboxを使ったリンクカードの実装、簡単なコードで出来てしまいました。
今回は解説をシンプルにするためにPC、モバイルでの両方に置いてもそれなりに見えるようにsizeを設定しましたが、いざ自分のサイトに実装するにあたっては、PC/モバイルそれぞれに応じたメディアクエリを設定するべきでしょう。
PCでは横パターン、モバイルでは縦パターンで表示させているサイトもよく見かけます。
最後にサイズ調整について、その要点だけあげておきます。
・imgとtextのwidth/heightを親要素の%で設定する際、合計が100%となるようにする。
・上記の「合計100%」に設定したとしても、子要素にmarginなどが適用されていた場合、レイアウトが崩れてしまいます。
CSSで直接子要素に余白が設定されていない場合でも、HTMLファイル全体のCSSに汚染されているケースがあるので、注意してください。
・テキストの文字数に注意してください。CSSで親要素の「licard/licard2 text」にheightを指定しているため、オーバーすると要素からはみ出してしまいます。
今回はごくシンプルなカードデザインとなりましたが、皆さんお好みのカスタマイズをして、素敵なリンクカードを作ってください。
「ふ」です。
swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。
🐧 twitter 🐧