見出しCSSジェネレーターは、h2・h3などの見出しデザインをブラウザ上で選んで調整し、そのまま貼れるHTMLとCSSを書き出せる無料ツールです。デザイン集のコードをコピペしたあとに色を書き換えたり、2行になったときの崩れを公開後に見つけたりする手間をなくすために作りました。この記事では、使い方の手順、選べるデザイン、サイトへの貼り付け方、うまく反映されないときの対処までをまとめます。

ツールはこちらから使えます：見出しCSSジェネレーター（登録不要・無料）

見出しCSSジェネレーターとは

結論から言うと、「見出しのデザインを決めて、色を合わせて、コードをコピーする」までをブラウザ上で完結させるツールです。CSSの知識がなくても使えて、知識がある人には調整の手間を省く道具になります。

何ができるか

16種類の見出しデザインから1つ選び、メインカラー・背景色・文字色・線の太さ・角丸・文字サイズを調整します。変更はすぐにプレビューへ反映され、画面下にHTMLとCSSが自動で生成されます。あとはコピーボタンを押して、自分のサイトに貼るだけです。

誰に向いているか

WordPressでブログを運営していて見出しの見た目を変えたい方、コーディングの経験は浅いが自分でサイトを触りたい方、制作会社やフリーランスで見出しのCSSを毎回書き起こしている方。この3者を想定して作っています。

無料・登録不要・サーバー送信なし

利用は無料で、アカウント登録もありません。入力した見出しの文字や設定は、すべてお使いのブラウザの中だけで処理され、当社のサーバーへ送信されることはありません。制作中の非公開サイトの見出し文をそのまま入れて試して問題ありません。

使い方｜5つのステップ

ステップ1｜デザインを選ぶ

画面上部に16種類のデザインがカードで並んでいます。各カードには小さなプレビューが表示されているので、見た目で選んでください。クリックすると、そのデザインが下のプレビューとコードに反映されます。

ステップ2｜色と形を調整する

メインカラー・背景色・文字色は、カラーピッカーで選ぶか、6桁のカラーコード（#2589d0 のような形式）を直接入力します。ブランドカラーが決まっているなら、コードを貼り付けるのが正確です。線の太さ・角丸・文字サイズは数値で指定します。

ステップ3｜出力セレクタを決める

「h2」「h3」「クラス」の3つから選びます。h2やh3を選ぶと、サイト内のすべてのh2・h3にデザインが適用されるコードが出ます。「クラス」を選ぶと .my-heading というクラス名で出力され、そのクラスを付けた見出しだけに適用されます。ほかの見出しに影響させたくない場合はクラスを選んでください。

ステップ4｜プレビューで長い文字を確認する

「長い文字で2行になる表示を確認」ボタンを押すと、プレビューの見出しが長文に切り替わります。ここで装飾が崩れないかを確認してください。デザイン集のサンプルは短い文言で作られているため、この確認を飛ばすと公開後に崩れが見つかります。

ステップ5｜HTMLとCSSをコピーする

画面下にHTMLとCSSが並んでいます。それぞれの「コピー」ボタンを押すと、クリップボードに入ります。CSSはサイトのスタイルシートへ、HTMLは必要に応じて本文へ貼り付けてください。

選べる16種類のデザイン

1つのサイトで使うのは、h2用とh3用の2〜3種類までにしてください。種類を増やすほど、どれが上位の見出しか分からなくなります。選び方の考え方はCSSの見出しデザイン集で詳しく書いています。

調整できる項目

背景ベタ塗り・吹き出し・タグ風は、文字色が白で固定されます。メインカラーを薄い色にすると白文字が読めなくなるので、これらのデザインでは濃い色を選んでください。

サイトへの貼り付け方

WordPressの場合｜追加CSSに貼る

管理画面の「外観 > カスタマイズ > 追加CSS」を開き、コピーしたCSSを貼り付けて公開します。テーマを更新しても消えず、管理画面から編集できるので、いちばん手軽な方法です。

記事本文の見出しだけに効かせる

出力セレクタを「h2」にしたコードをそのまま貼ると、サイドバーやフッターのh2にも装飾が付きます。記事本文だけに効かせたい場合は、CSSのセレクタの前に本文を囲むクラスを足してください。多くのテーマでは .entry-content h2 や .post-content h2 です。テーマによって違うので、ブラウザの検証機能で確認します。

クラス指定で出力した場合

「クラス」で出力すると .my-heading というセレクタになります。CSSを追加CSSに貼ったうえで、装飾したい見出しに class="my-heading" を付けます。ブロックエディタでは、見出しブロックの「高度な設定 > 追加CSSクラス」に my-heading と入力すれば付与できます。

HTMLサイトの場合

スタイルシート（style.cssなど）にCSSを追記し、HTML側の見出しを書きます。出力されたHTMLは見出しタグそのものなので、既存の見出しを置き換えるか、クラス名だけ追加してください。

こんな場面で使えます

ブログの見出しを整えたい

テーマ既定の見出しが味気ない、あるいは派手すぎる場合に、h2は「左ライン＋背景」、h3は「下線」のように選んで、サイトの色に合わせて調整します。追加CSSに2つ貼れば完了です。

クライアントに見た目を確認してもらう

制作の打ち合わせで「見出しはこんな感じでどうですか」と、その場で色を変えながら見せられます。口頭で説明するより、プレビューを見せたほうが決まりが早いです。

LPのセクションタイトルを作る

「両端に線」や「影付きカード」は、ランディングページのセクション見出しに向いています。クラス指定で出力して、そのセクションだけに当ててください。

CSSの書き方を確認する

疑似要素（::before / ::after）を使ったデザインを選ぶと、生成されるCSSにその書き方が含まれます。吹き出しの三角形やグラデーション下線がどう書かれているかを、コードで確認する教材としても使えます。

うまく反映されないとき

貼ったのに見た目が変わらない

テーマ側のCSSに上書きされている可能性が高いです。ブラウザの検証機能で、貼ったCSSに打ち消し線が付いていないかを確認してください。付いていれば、セレクタを .entry-content h2 のように具体的に書き換えます。

編集画面では変わらない

追加CSSは公開ページに適用されるもので、ブロックエディタの編集画面には反映されません。実際のページを開いて確認してください。

吹き出しの三角が出ない

疑似要素を使うデザインは、CSSを途中で切り貼りすると崩れます。生成されたCSSを最初の行から最後の行まで、まとめて貼ってください。

番号付きの数字が全部「1」になる

番号付きデザインのCSSには、カウンターをリセットする指定（counter-reset）が含まれています。生成コードでは body に対して指定していますが、記事ごとに1から数えたい場合は、記事本文を囲む要素に付け替えてください。

制作会社がこのツールを作った理由

見出しのCSSは、デザイン集を見れば数分で書けます。それでも作ったのは、コピペのあとに毎回同じ手戻りが起きていたからです。

色の書き換えで手が止まる

サンプルの色をブランドカラーに変えるとき、線・背景・三角の3か所を別々に直す必要があります。1か所忘れると、吹き出しの先だけ色が違う、という状態になります。ツールならメインカラーを1つ変えれば全部に反映されます。

2行になったときの崩れを公開後に見つける

デザイン集のサンプルは短い文言です。実際の記事は見出しが長く、公開してから「2行になると線がずれる」と気づくことが繰り返されていました。長文プレビューを標準機能にしたのはこのためです。

影響範囲を意識せずに貼ってしまう

h2にそのまま当てて、サイドバーの見出しまで変わってしまう相談も多く受けます。出力セレクタに「クラス」を用意して、安全な導入を選べるようにしました。

よくある質問（FAQ）

商用サイトで使ってもいいですか？

問題ありません。生成したコードは自由に使えます。クレジット表記も不要です。

入力した内容は保存されますか？

保存されません。すべてブラウザ内で処理され、サーバーには送信されません。ページを閉じると設定は消えるので、必要なコードは先にコピーしておいてください。

スマートフォンでも使えますか？

使えます。ただしコードのコピーや貼り付けはパソコンのほうが作業しやすいので、確認はスマートフォン、作業はパソコンという使い分けをおすすめします。

h4以下の見出しにも使えますか？

出力セレクタを「クラス」にして、生成されたCSSのセレクタ名を書き換えれば、h4でもどの要素でも使えます。

デザインを組み合わせることはできますか？

ツール上では1つずつです。組み合わせたい場合は、それぞれのCSSをコピーして手で統合してください。ただし装飾を重ねるほど読みにくくなるので、基本は1つのデザインで完結させることをおすすめします。

ほかにどんなツールがありますか？

パスワード生成ツールとファビコン生成ツールを公開しています。いずれもブラウザ内で完結し、無料で使えます。提供ツール一覧からご覧ください。

まとめ

見出しCSSジェネレーターは、デザインを選び、色を合わせ、長文で崩れを確認してからコードをコピーする、という流れを1画面で完結させるツールです。WordPressなら追加CSSに貼るだけで反映されます。ほかの見出しに影響させたくない場合は、出力セレクタを「クラス」にしてください。

ツールはこちら：見出しCSSジェネレーター

スリーディープラスでは、サイトのデザイン調整やWordPressのカスタマイズのご相談を承っています。「ツールで作ったが自分のテーマでうまく反映されない」という場合も、お気軽にお問い合わせください。