ブログ用リンクカード作成ツール｜HTML・CSSをコピーして使える

ブログ用リンクカード作成ツールの紹介

ブログ用リンクカード作成ツールは、関連記事やおすすめリンクを画像付きカードとして表示するためのHTML・CSS生成ツールです。

ブログ本文の中で関連記事やおすすめページを紹介するとき、テキストリンクだけではリンク先の内容が少し伝わりにくいことがあります。このツールでは、画像、日付、カテゴリ、タイトル、説明文を組み合わせたリンクカードを作成し、リンク先の内容を視覚的に伝えやすくできます。

カードの背景色、文字サイズ、余白、角丸、影、枠線などは、プレビューを見ながら調整できます。関連記事の紹介、まとめページへの誘導、カテゴリーナビゲーション、商品ページへのリンクなど、複数のリンクを同じデザインで並べたい場面に向いています。

生成されたHTMLとCSSはコピーして使えるため、HTMLとCSSを貼り付けられるブログ環境であれば、記事本文や固定ページ内のリンク整理に利用できます。

表示例

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

使い方の流れ

1. サイトURL、画像URL、日付、カテゴリ、タイトル、説明文などの必要項目を入力します。
2. 背景色、余白、角丸、影、文字サイズ、枠線などを調整し、プレビューで見た目を確認します。
3. 専用CSSをコピーし、ページ内またはブログ側のCSS入力欄に1回だけ貼り付けます。
4. 複数のカードを並べる場合は、開始コードをカード群の前に貼り付け、作成したカードHTMLを表示したい数だけ続けて貼り付けます。
5. 最後に終了コードを貼り付けて、カード全体を閉じます。

仕様補足

カードの並び方について：カード1枚の最小幅は300pxです。横幅に余裕がある場合は複数列で並び、狭い画面では自動的に1列になります。

共通CSSについて：生成されるCSSは、同じページ内のカードで共通して使う前提です。カードごとに背景色や影などを変えたい場合は、別クラスを用意するか、生成後のCSSを個別に調整してください。

画像について：画像URLを入力した場合のみ、カード内に画像が表示されます。画像の見え方は、画像サイズや「画像表示」の設定によって変わります。

表示について：ブログサービスやテーマ側のCSS、記事本文の横幅、貼り付ける場所によって、プレビューと実際の表示が完全に一致しない場合があります。

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

このツールのこだわりや開発経緯は[こちらの記事]で紹介しています。