【文字デザイン】おしゃれな見出し参考例と作成方法

WordPress

ホームページにはタイトル（見出し）を付けてテキスト文を書くことが多いので、見出しを変わったデザインに変更したり、可愛らしくしたいという方に向けてCSSにてどのようなデザインが作成できるのかをコードを入れていていきます。

コピペOK !!
誰でもすぐに見出しをデザインできます

しんぷるな見出し

タイトルはh1〜h6まであります。見出しの大きさ設定によってはh1やh3など違う見出しに使用する方も多いと思います。

<h2></h2>の箇所を<h1></h1>、<h3></h3>に変更して使用していただければ問題ありません。

h1~h6まで違うの使っているけれど、タイトルのデザインを変更したいという方にも対応できるようなコード入力方法も一緒に解説をしていきます。

下線・上下線・点線・左線

　一本線の下線

<h2>おしゃれな見出し</h2>
h2 {
	border-bottom: solid 3px #000000;
	padding: 10px 0;
    text-align:center;
}

線を引くコードは【border】を使用します。下に線を引くので【bottom】を使用

border-bottmと記載。

左：border-left

右：border-right

上：border-top

【solid】はしんぷるな1本線で表示されます。

線の太さを「3px」設定。線を細くしたい場合は1px、2pxと設定変更をお願いします。線の色は黒コードを入力しています。

【文字間】を10pxにて設定をしています。

【 text-align : center ; 】は文字を中央に設定しているコードです。

　二重下線

<h2>おしゃれな見出し</h2>
h2 {
	border-bottom: double 3px #000000;
	padding: 10px 0;
    text-align:center;
}

二重線は【double】を使用。

一本線の際は3pxは線の太さですが二重線の場合は線と線の間が3pxという見方になります。

　点線

<h2>おしゃれな見出し</h2>
h2 {
	border-bottom: dashed 2px #000000;
	padding: 10px 0;
    text-align:center;
}

次は文字の色と線の色を変更してみましょう。

　文字と点線の色を変更

<h2>おしゃれな見出し</h2>
h2 {
	border-bottom: dashed 2px #00008b;
	padding: 10px 0;
    color:#ff0000;
    text-align:center;
}

文字の色を変更する際は「color」
書体を変更したい場合は「font-family」を使用します。

h2 {
  border-bottom: dashed 2px #00008b;
  padding: 10px 0;
  color:#ff0000;
  font-family:sans-serif;
  text-align:center;
}

　左線

<h2>おしゃれな見出し</h2>
h2 {
  padding: 0.2em 0.5em;
  border-left: solid 2px #892F23;
}

paddingの「 0.2em 0.5em」は上下左右の余白をどのくらい空けるかを示している数値です。

線を細くしたい場合は1px。太くしたい場合は3px以上に変更をお願いします。

　左 2重線

<h2>おしゃれな見出し</h2>
h2 {
  padding: 0.2em 0.5em;
  border-left: 2px double #892F23;
}

　上下線

<h2>おしゃれな見出し</h2>
h2 {
  padding: 0.5rem 1rem;
  border-top: 3px solid #000;
  border-bottom: 3px solid #000;
}

　上下点線

<h2>おしゃれな見出し</h2>
h2 {
  padding: 0.5rem 1rem;
  border-top: 3px dotted #000;
  border-bottom: 3px dotted #000;
}

　上下破線

<h2>おしゃれな見出し</h2>
h2 {
   width:150px;
   text-align:center;

  padding: 0.5rem 1rem;
  border-top: 3px dashed #000;
  border-bottom: 3px dashed #000;
}

今回は3pxに指定していますが、1~2pxにすると小さく細かい点線に近いものになります。
pxの数値を増やすと太く濃い破線になります。

背景色をつける

背景色を付けることでh1~h6のデザインの区別をつけることができて便利です

　単色を使ったシンプルな背景色

背景色を付ける際のCSSコードは「backgroud」を使用

<h2>おしゃれな見出し</h2>
h2 {
   width:150px;
   text-align:center;

　　background: #fafad2;
   text-align:center;
}

backgroudは色だけではなく背景画像としても利用されます。
コード：background-image:url(◯◯◯◯◯◯◯);

　単色 + 左線

<h2>おしゃれな見出し</h2>
h2 {
   width:150px;
   text-align:center;

　　padding: 1rem 2rem;
　　border-left: 4px solid #FF66C4;
　　background: #fafad2;
　　text-align:center;
}

　単色 + 上線

<h2>おしゃれな見出し</h2>
h2 {
   width:150px;
   text-align:center;

　　padding: 1rem 2rem;
　　border-top: 2px solid #FF66C4;
　　background: #fafad2;
　　text-align:center;
}

　単色 + 下線

<h2>おしゃれな見出し</h2>
h2 {
   width:150px;
   text-align:center;

　　padding: 1rem 2rem;
　　border-bottom: 2px solid #FF66C4;
　　background: #fafad2;
　　text-align:center;
}

色コードはWEB上に公開されています。

ポイント 幅と高さを指定する場合は「width」「height」を使用して調整をしていきましょう。

おしゃれ見出しデザイン

背景や線は単色設定をしていましたが、ここからはデザインしてみましょう。

下線デザイン

2つの色を使用した下線

<h2>おしゃれな見出し</h2>
h2 {
  width:150px;
  text-align:center;

  border-bottom: solid 3px #004AAD;
  position: relative;
}

h2:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #FF914D;
  bottom: -3px;
  width: 30%;
}
ポイント 【position:relative;】 は単体では使用せず、【position: absolute;】と一緒に使用することが多いです。

relative以外に使用されるのは下記4つです。

・fixed
・absolute
・static
・sticky

現在位置から相対位置を指定するposition: relative;

width: ○○%;は色の幅を指定しています。50%に指定すると半分で色が分かれます。

立体感のある見出しデザイン

<h2>おしゃれな見出し</h2>
h2 {
  padding: 0.5em 0.6em;
  color: #494949;
  background: #f4f4f4;
  border-left: solid 4px #FF914D;
  border-bottom: solid 2px #d7d7d7;
}

シャドウを入れたボックスデザイン

<h2>おしゃれな見出し</h2>
h2 {
  padding: 0.5em;
  background: #DEF5F6;
  box-shadow: 0 0 4px #AFADAD;
}

背景色はお好みの色に変更をお願いします。
「background」が背景色の指定コードです。