見出しジェネレーターに続いて、今度は HTMLカード を作るツールも作りました。
実績紹介・サービス説明・事例ブロックなど、ブログやコーポレートサイトでよく使うカードコンポーネントをブラウザ上で組み立てて、コードをそのままコピペできるジェネレーターです。
🃏 Universal HTML Card Generator & Custom Component Builder
リアルタイムプレビューで調整して、インラインCSS付きの本番投入可能なコードを即出力します。
こんなカードが作れます
デザインパターンは6種類。実際に出力されるカードのイメージはこんな感じです。
事例
スタンダード
シンプルな枠線タイプ。どんなサイトにも馴染みやすい汎用デザインです。
✓ 枠線あり
スタンダード
事例
上部アクセントバー
上部に色帯を走らせてセクションに視線を引きつけます。
✓ ヘッダーライン
上部アクセントバー
事例
左側アクセントバー
左サイドラインで引用・ポイント表示にも使いやすいレイアウト。
✓ サイドライン
左側アクセントバー
事例
ダークプレミアム
高級感のある暗色背景。LPのキービジュアル周辺などにも映えます。
★ プレミアム
ダークプレミアム
主な機能
6種のデザインパターン
スタンダード・上部アクセント・左サイドライン・モダンシャドウ・ダーク・ミニマルフラットから選択。
上部・下部バッジ対応
カードの上下にバッジを3つずつ配置できます。Font Awesomeアイコンを付けることも可能。
カラー・サイズを細かく調整
メインカラー・背景色・テキスト色の3色と、角丸・枠線・余白をスライダーで直感的に設定。
ボタンリンクを追加
カード下部にリンクボタンを追加できます。テキスト・URL・左右中央の配置も自由に指定可能。
レスポンシブ対応コード出力
最大幅（max-width）を設定でき、スマートフォン表示も考慮したコードを生成します。
インラインCSS・追加設定不要
出力コードはすべてインラインCSS。外部ファイルの編集なしでどのページにも貼り付けられます。
使い方
- デザインパターンを6種から選ぶ
- カードの内容（タイトル・バッジ・本文・ボタン）を入力する
- カラー・角丸・余白などを好みに調整してプレビューで確認
- 「コピーする」ボタンでHTMLを取得して、WordPressのカスタムHTMLブロックに貼り付ける
💡 Font Awesomeアイコンを使う場合：
バッジにアイコンを設定するとき、貼り付け先のサイトでFont Awesomeが読み込まれていないと表示されません。
未導入の場合はサイトの
ツール内にも注意書きが記載されているので参考にしてください。
バッジにアイコンを設定するとき、貼り付け先のサイトでFont Awesomeが読み込まれていないと表示されません。
未導入の場合はサイトの
<head> にCDNリンクを追加する必要があります。ツール内にも注意書きが記載されているので参考にしてください。
作った背景
事例紹介ブロックやサービス説明カードを作るとき、毎回 CSS を手書きするのが地味に手間でした。
デザインパターンを切り替えながらリアルタイムで見た目を確認できて、完成したらコピペするだけ。
そういうツールが欲しかったので作った、というシンプルな経緯です。
見出しジェネレーターと組み合わせて使うと、記事やLPのデザインの統一感を出しやすくなると思います。ぜひ試してみてください。
→ HTML Card Generator を使ってみる
無料・登録不要。ブラウザだけで完結します。
