【CSS】見出しのデザインを変える方法(#コピペできるサンプル付き)

【CSS】見出しのデザインを変える方法(#コピペできるサンプル付き) Webデザイン&CSS

このページでは、Webページの見出しのデザインを変えるCSSの設定方法を、コピペできるサンプルCSS付きで解説します。

WordPressであればテーマを使えば見出しのデザインも設定されますが、オリジナルのものに変更したい場合もありますよね。

見出しのデザインを変える方法

見出しは見出しタグと呼ばれる<h1>~<h6>までのタグで囲われた部分を指します。<h1>はページのタイトル、<h2>~<h6>はページ内に記載した情報を区分するための見出しとして主に使われます。数字が小さいものから順に、大きな見出しとして扱われます

見出しのデザインを変えるには、このタグそれぞれに対してCSSを設定していきます。

/* CSSの記述 */
h1 {
  /*ここにh1用のCSSを記述*/
}

h2 {
  /*ここにh2用のCSSを記述*/
}

WordPressのテーマを使っている場合は、一覧ページと記事ページで見出しのデザインを分けたい場合があると思います。WordPressの場合は記事タグに「article」というクラス名が付いているので、以下のように設定すると記事ページの見出しだけにデザインを反映させることができます。

h1 {
  /*ここに全ページのh1用のCSSを記述*/
}

.article h1 {
  /*ここに記事ページのh1用のCSSを記述*/
}
ぼんやま
ぼんやま

見出しごとに文字のサイズやデザインを変えることで、ページ内の構造がわかりやすくなるね!

コピペできるサンプル見出し

ここからはコピペできるサンプルパターンを5つアップしていきます。WordPressのテーマにかぶせて使うことを想定して、明示的に元の線を消す「border:none」、背景色を使わないパターンでは背景色を透明にする「background: transparent」を指定しています。

見出しサンプル①
/* 見出しサンプル① */
h6 {
  padding:10px 0px 10px 10px;
  font-weight:bold;
  font-size: 16px;
  background: transparent;
  border:none;
  border-left: solid 10px #745c51;
}

見出しの左サイドに線を表示する一般的でシンプルなデザインです。幅に余裕を持たせるために上下と左に10pxずつ「padding」プロパティを設定、「border-left」で左側に線を表示しています。

見出しサンプル②
/* 見出しサンプル② */
h6 {
  padding:10px 0px 10px 10px;
  font-weight:bold;
  font-size: 16px;
  background: #f8f8ff;
  border:none;
  border-left: solid 5px #745c51;
}

背景色を表示して見出しのブロックをわかりやすくするパターンです。「background」プロパティのカラーコードを変更することで好きな背景色を設定できます。パターン①では左側の線を10pxで指定していましたが、少し細目の5pxに変更しています。

見出しサンプル③
/* 見出しサンプル③ */
h6 {
  padding:10px 0px 10px 10px;
  font-weight:bold;
  font-size: 16px;
  background: transparent;
  border:none;
  border-bottom:dotted 4px #745c51;
}

点線のパターンです。「border-bottom」プロパティで「dotted」を指定して実現しています、dottedの後ろの「4px」の部分の数字を下げると小さいドットに、上げると大きいドットになります。

見出しサンプル④
/* 見出しサンプル④ */
h6{ 

  padding:10px 0px 10px 10px;
  font-weight:bold;
  font-size: 16px;
  background: transparent;

  position: relative;
  padding: 1-;
}
h6:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  background: repeating-linear-gradient(-45deg, #ffd700, #ffd700 2px, #fff 2px, #fff 4px);
}

ストライプのパターンです。疑似要素「after」で見出しの後ろに要素を付け加え、「repeating-linear-gradient」プロパティを設定することで実現しています。「-45deg」の数字を変えるとストライプの角度を変えることができ、後ろのカラーコードを変更することでストライプの色を変更することができます。

見出しサンプル⑤
/* 見出しサンプル⑤ */
h6 {
  position: relative;

  padding: 10px 10px;
  font-weight:bold;
  font-size: 16px;
  max-width: 100%;
  color: #fff;
  background: #ffd700;
  border:none;
}

h6:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 10%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #ffd700;
}

吹き出しのパターンです。こちらも疑似要素で吹き出しの三角を付け加える設定をしています。「h6:before」の「left: 10%」の数字を変更することで吹き出しの位置をずらせます、この数字を下げると左側に、上げると右側にずらすことができます。

ぼんやま
ぼんやま

組み合わせることもできるからいろいろためしてみてね!

タイトルとURLをコピーしました