WEBサイトでよく見かける「タイル型リンクカード」というのは、2010年代前半、特に2012年〜2014年頃から急速に普及したらしいです。
Windows 8のリリース (2012年): 「メトロUI」と呼ばれる、四角いタイルを並べたデザインが採用され、このデザインがWeb業界に大きな影響を与えました。
調べるとそのように出てくるのですが、自分がタイル型リンクカードに触れたのは確か「はてなブログ」を利用しているころでした。
初めて見たときの洗練されたUIにとてもワクワクしたことを覚えています。さらに、そのUIを自分の使いたい場所で使いたくてデベロッパーツールでコードを眺めてあれこれしたのが勉強になったと思います。
タイル型リンクカードはサイトにやや負担がかかる
タイル型リンクカードのメインはやはり画像だと思います。今は画像の拡張子WebPがありますから画像の容量を昔よりは抑えられますが、それでも新着記事の全てに画像を使うとサイトに負担はかかります。
もちろん新着記事の表示件数や、画像の拡張子がWebPだとしても容量次第ではあります。
サイトの表示スピードを意識して思い切ってトップページの画像を外して運用する選択も勿論あります。その選択に間違いはありません。
しかし、ちょっとだけ、ワンポイントだけタイル型リンクカードを使って部分的に目立たせる選択も悪くはないですし、テキストメインのトップページにひとつ、ふたつ、タイル型リンクカードを使ってオススメ記事を置いてみたらどうでしょうか。
新着記事すべてに画像を使っていたころよりも、サイトにかかる負担を減らした見せ方が出来るのではないでしょうか。
あの頃に使いたかったタイル型リンクカードジェネレーター
ということで、テーマに縛られない箇所にタイル型リンクカードを設置する為のWEBツールを作りました。
名前はそのまま「タイル型リンクカードジェネレーター」
タイル型リンクカードに必要なのはもちろん表示項目です。
サイトURLは勿論、画像、年月日、カテゴリ、タイトル、記事の詳細文。更にあったら嬉しいのは画像の配置方法選択に、カードの角を丸くできる設定もあります。
各項目の文字サイズ設定と配色設定も変更できます。更に必要ならリンクを新しいタブで開くための設定もワンクリックで出来ます。
また、背景色も設定できます。外枠、画像枠も必要なら設定可能です。そしてタイル型リンクカード自体に影も付けられます。
PCでは2列、スマホでは1列とレスポンシブに対応
設定は全てリアルタイムでコードに反映されます。そしてタイル型リンクカードの横幅は300pxから400pxまで変化し、タイル型リンクカードの間隔を決めた後の用意された開始コードと終了コードを使うことで、PCでは2列の横並びに表示する事ができます。
横幅に余裕があるなら3列も可能です。サイトの構成に合わせて開始と終了コードの中に入れるコードの数は、こちらで制限する物ではなく、実際に使用される人しだいです。
各項目は文字の削除で表示を消すことができます。また、このタイル型リンクカードのタイトルには見出しは使用していません。
タイル型リンクカードを設置したい人へ
タイル型リンクカードジェネレーターを使えばサイト表示が軽くなる訳ではありません。あくまでも画像設置数を減らしたサイトのワンポイントになればと、そういった思いがあって制作したWEBツールです。
ミコトホドのこだわりでもありますが、タイル型リンクカードジェネレーターはブラウザ上で処理するため、サーバーにはユーザーのデータは送信しません。登録やログインも必要なく、必要なときにページを開いてすぐ使えます。
タイル型リンクカードジェネレーターは、以下のページから利用できます。
コメント