今回はサイト内で使うシンプルでお洒落なリンクカードデザインのサンプルコードを紹介します。
ブログやウェブサイトのページ上で他ページへのリンクを掲載することはよくありますが、通常のテキストリンクだけではリンク先のページの概要が掴めなかったりリンクが目立たなかったりします。
そんなときにリンクカードのデザインを予め用意しておくと見栄えがよく使いまわしもきくので大変便利です。
ワードプレスではリンクカードのプラグイン等もあるのでそちらをカスタマイズして使ってもよいですが、ワードプレス以外のウェブサイトだったり、プラグインのデザインがあまり気に入らないといった場合には利用をご検討頂ければと思います。
サンプル表示
以下が今回ご紹介するリンクカードのデザインサンプルです。
HTML部
<div class="td-card"> <div class="td-card-l"> <div class="td-card-header"> <span class="td-card-info">xxxx/xx/xx</span><span class="td-card-tag">タグ名</span> </div> <div style="clear:left;"></div> <p class="td-card-title">ページタイトル</p> </div> <div class="td-card-r"> <img src="" width="100%" height="" alt="" /> </div> <div style="clear:left;"></div> <div><a href=""></a></div> </div>
少々コードが複雑ですがコピペの上テキストの箇所を変更して使えばよいので問題ないかと思います。
CSS部
<style><!--
.td-card { border-top:1px solid #eee; border-bottom:1px solid #eee; padding:15px 0 25px 0; position:relative; }
.td-card:hover { opacity:0.9; }
.td-card a { position:absolute; display:block; left:0; top:0; width:100%; height:100%; }
.td-card .td-card-l { width:calc(100% - 170px); float:left; }
.td-card .td-card-r { width:150px; float:right; }
.td-card .td-card-header { }
.td-card .td-card-header .td-card-info { display:inline-block; color:#666; float:left; font-size:12px; }
.td-card .td-card-header .td-card-tag { display:inline-block; float:right; background:#ff0000; color:#ffffff; font-size:10px; padding:2px 5px; }
.td-card .td-card-title { font-weight:bold; margin:10px 0 0 0; line-height:1.5; }
--></style>
CSSの方は共通ファイル（ワードプレスなら追加CSS等）に設定しておけばあとはいつでも使いまわすことができます。CSSは環境によって見栄えが異なる場合があるのでその場合はご調整をお願いします。