【コピペ1クリック】CSSデザイン集|超定番な見出しパターン56選

CSSデザイン集|超定番の見出しパターン56選

  • 見出しのデザインってどんなのある?
  • 手間をかけずに見出しを変えたい!

こんな悩みを解消します。

見出しのデザインを紹介しているサイトがありすぎて、見出しを変更したいのに手が付けられずにいる人、多いんじゃないでしょうか。

そんな方のために、この記事では、すぐに実践できる「見出しの変更方法」に加えて、「シンプル見出し26個」「おしゃれ見出し20個」を紹介しています。

本記事を読めば、56個の多種多様な見出しパターンが1クリックでコピーでき、すぐさまご自身のサイトに反映できます。

なお、この記事を書いている僕( @AssistLevel )は

  • ブログ歴5年
  • 月間最高18万PV

を達成しているブロガーです。

CSSデザイン|見出しの変更方法

変更方法は上の動画を見れば簡単にできます。

WordPressの「ダッシュボード → 外観 → カスタマイズ → 追加CSS」にコピペしていきましょう。

MEMO

今回紹介した方法は「POLIPU for SANGO」というSANGO小テーマへの追加方法になります。

他テーマをご使用の方は、「ダッシュボード → 外観 → テーマエディター」をクリックし、「スタイルシート(style.css)」というファイルにコピペしてみてください。

CSSで見出しを変更する前の事前知識

CSSで見出しを変更する前の事前知識

CSSを変更して見出しのデザインを変える前に知っていてほしい

  • 見出しの考え方
  • 色の指定方法

について順に解説します。

見出しの考え方

「見出し」の基本的な考えは以下のようになっています。

HTML
<h2>大見出し</h2>
<h3>中見出し</h3>
<h4>小見出し</h4>
大きな見出しは<h2></h2>で囲うことが約束事となっています。
同様に、中見出し・小見出しはそれぞれ<h3></h3><h4></h4>で囲います。
例えば、大見出しのデザインを変更したい場合は、「追加CSS」にコピペするコードの { の前の文字が大見出しを意味するh2である必要があります。
CSS
 h2 {
     /*大見出しのデザイン*/
}
このとき<>は不要です。
また、
CSS
 .entry-content h2 {
     /*記事中の大見出しのデザイン*/
}
のように、h2の前に半角スペースをはさんで.entry-contentと加えると、記事中の大見出しにだけデザインが施されます。
MEMO
「記事中の」を意味する.entry-contentは、ワードプレステーマにSANGO、Cocoonを使っている方が対象です

他テーマの方は以下に置き換えてみてください。

  • JIN → .main-contents
  • AFFINGER → .mainbox
  • THE THOR → .postContents

色の指定方法

#87CEEBのように、「#」のあとに「0〜9」の数字または「A〜F」のアルファベット※が6コ並ぶ文字列は「色」を指定する部分です。

※小文字でもOK

[カラーコード] でググってみて、お好みのカラーを探してみてください。
また、#87CEEBという記法ではなく、orangeskyblueのように「カラーネーム」で指定することも可能です。
[カラーネーム] でググってみると、140色以上のカラーネームが出てくるので、「#〜」の指定が面倒な方はカラーネームで指定するのも良いでしょう。

色の指定に加えて透明度も指定できるrgba(255,255,255,0.8)というような色指定方法もあります。

255の部分は左から赤・緑・青の配色割合を0 ~ 255の数値で指定し、0.8の部分は透明度を0 ~ 1の数値で指定します。

それでは、長々と説明してきた前提の知識はこれぐらいにして「見出しのCSSデザイン集56パターン」を紹介していきます。

CSSデザイン集|シンプルな見出し26パターン

CSSデザイン集|シンプルな見出し26パターン
26パターンのシンプルな見出しのデザイン例をギャラリー風にまとめています。
で囲われた見出しデザインをクリックするとコードが表示されますので、コピーしてご活用ください。

CSSデザイン集|おしゃれな見出し20パターン

CSSデザイン集|おしゃれな見出し26パターン
20パターンのおしゃれな見出しのデザイン例をギャラリー風にまとめています。
で囲われた見出しデザインをクリックするとコードが表示されますので、コピーしてご活用ください。

CSSデザイン集|定番の見出し56個:まとめ

以上、CSSのデザイン集として56パターンの見出しを大ボリュームで紹介させていただきました。

ボタン1つ押せばすぐにコピーできるので、いろんな見出しを着せ替えして好みの見出しを見つけてくださいね。

この記事を書く上で参考にさせていただいたサイトは以下にご紹介しております。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選 シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50 見出しをお洒落に装飾するCSSを紹介 HTMLとCSSのコピペですぐに実装できる見出しデザイン14選

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です