見出しデザイン プレビューア

このツールでできること

マーカー風・下線グラデーション・リボン・角かっこ囲み・枠線ドローなど、ブログの見出しデザイン14種をその場でプレビューできる無料ツールです。h2 / h3 / h4 を切り替えながら見え方を確かめ、HTMLとCSSをまとめてコピーできます。

使い方

1. 左の「見出しテキスト」に、実際に使う文言を入力する
2. HTMLタグ（h2 / h3 / h4）を選ぶ
3. 気に入ったデザインのカードで「コピー」を押す
4. WordPressの「カスタムHTML」ブロックに貼り付ける

コピーされる内容にはHTMLとCSSの両方が含まれるので、別途スタイルを書き足す必要はありません。

関連ページ

このツールをClaude Codeで作った過程とプロンプトはブログ見出しデザインツールを作ってみたで公開しています。見出しと本文のフォントの組み合わせを決めたいときはフォントペアリング プレビューアもどうぞ。