タイル型リンクカードジェネレーター｜ブログを2列でおしゃれに整列

タイル型リンクカードジェネレーターの紹介・解説

ブログ記事やリンクを、画像付きのタイル型カードとして並べるためのHTML・CSS生成ツールです。

画像URL、日付、カテゴリ、タイトル、説明文を入力し、プレビューを見ながらカードの見た目を調整できます。生成されたCSSとHTMLをコピーして、ブログやサイトに貼り付けて使います。

HTMLとCSSを貼り付けられるブログ環境向けのツールです。ブログサービスやテーマ側の仕様によって、表示が変わる場合があります。

表示例

生成したHTMLとCSSを本文内に貼り付けた表示例です。PCでは2列、スマホでは1列表示になります。設置場所の横幅や画像サイズによって、見た目は変わります。

本ツールの主な用途

• おすすめ記事のまとめ：読んでほしい記事や関連ページを、画像付きカードとして並べたいときに。
• 商品リンク・紹介カード：商品画像、タイトル、説明文を使って、リンクカード形式で紹介したいときに。
• カテゴリーナビゲーション：主要カテゴリーや特集ページへのリンクを、カード型で整理したいときに。
• リンク集の整理：複数の外部リンクや内部リンクを、同じデザインで並べたいときに。

使い方の流れ

1. 専用CSSをコピーし、ページ内またはブログ側のCSS入力欄に1回だけ貼り付けます。
2. 2列配置にする場合は、開始コードをカード群の前に貼り付けます。
3. 作成したカードHTMLを、表示したい数だけ続けて貼り付けます。
4. 最後に終了コードを貼り付けて、カード全体を閉じます。

仕様補足

• 2列配置について：カード1枚の最小幅は300pxです。横幅に余裕がある場合は複数列で並び、狭い画面では自動的に1列になります。
• 共通CSSについて：生成されるCSSは、同じページ内のカードで共通して使う前提です。カードごとに背景色や影などを変えたい場合は、別クラスを用意するか、生成後のCSSを個別に調整してください。
• カテゴリ表示について：カテゴリは日付と同じメタ情報として、タイトルの上に表示されます。文字色と背景色を調整できます。
• カードの高さについて：タイトルや説明文の長さによって、カードの高さは変わります。高さを揃えたい場合は、説明文の文字数をそろえるか、生成後のCSSで調整してください。
• 画像について：画像URLを入力した場合のみ、カード内に画像が表示されます。画像の見え方は、画像サイズや「画像表示」の設定によって変わります。

ログイン不要、登録不要、無料で使えます。