ワードプレスを使っていたりブログを書いていると、地味に気になるのが「見出しのデザイン」。
テーマのデフォルトのまま使っている方も多いと思いますが、h2・h3 をちょっとおしゃれにするだけで記事全体の印象がガラッと変わります。
そこで今回、自分でも使いやすい CSS見出しジェネレーター を作ってみました。
見出しをリアルタイムプレビューしながらデザインして、コードをそのままコピペできるツールです。
どんなツールか
ひとことで言うと「パラメータをいじると即座にプレビューが更新されて、OKならコードをコピーするだけ」というジェネレーターです。
24種類のベースデザイン
エレガント・モダン・ポップ・シンプルと4カテゴリ24デザインを収録。まずベースを選んでから細かく調整できます。
リアルタイムプレビュー
色・サイズ・余白などを動かすたびに即座に反映。完成形を確認しながら直感的に調整できます。
4パターンのコード出力
インライン型・分離型・CSSのみ・HTMLのみの4形式で出力。WordPressのカスタムHTMLブロックにそのまま貼れます。
Font Awesome アイコン対応
チェック・電球・矢印など11種のアイコンを頭に付けられます。ナンバリング（連番）機能も搭載。
細かいカラー設定
メイン・サブ・文字・背景・アイコンの5色を個別に指定できます。サイトのブランドカラーに合わせてどうぞ。
サイズ・余白もコントロール
フォントサイズ・線の太さ・角丸・上下左右の余白まで細かく調整可能。h2〜h4・divタグの切り替えも対応。
使い方は3ステップだけ
- ベースデザインを24種類の中から選ぶ
- カラー・フォントサイズ・余白などを好みに調整してプレビューで確認
- 「コードをコピー」ボタンを押して、WordPressのカスタムHTMLブロックに貼り付ける
「インライン型」コードを選べば追加CSSは不要です。
ブロックエディタで「カスタムHTML」ブロックを挿入してそのまま貼るだけで表示されます。
作ってみた感想
自分が「こういうツールあったらいいな」と思ったものをそのまま形にしました。
見出しのコードを手書きしていたときと比べると、デザインのバリエーションを試すのが格段に楽になっています。
デザインのリクエストも受け付けているので、「こんなスタイルが欲しい」があればぜひ教えてください。
今後のアップデートで追加していく予定です。
無料・登録不要。ブラウザだけで完結します。
