revivel~毎日が現実逃避~

スマホゲームに読書に映画にBeatlesに現実逃避の日々

コピペで使えるシンプル軽い見出しCSSを12種!

 HTMLお勉強画像

超初心者の方:見出しタグについて

 webサイトの見出しが正しく整理されていることで、ユーザーがコンテンツの内容について理解しやすくなります。そして、検索エンジンはページの階層構造を認識しやすくなるため、見出しはユーザーの利便性とSEO効果に重要となります。

見出しについては、詳しいサイトを載せておきます。

seolaboratory.jp

シンプル軽い見出し12種

 CSS(ウェブページのスタイルを指定するための言語)だけで、見出しを少し目立つようにカスタマイズしましょう。

見出し:1本線

見出し①

見出し②線を少し太くしました

見出し③太さや色を変えればイメージが変わります

.entry-content h3 {
font-size: 16px; 
line-height: 20px; /*行の高さ*/
padding: 5px; /*文字周りの余白*/
border-bottom: 1px solid #000; /*線の太さ、スタイル、色*/
}

見出し:点線

見出し①

見出し②

見出し③線の太さを変えるとイメージが変わります

.entry-content h3 {
font-size: 16px; 
line-height: 20px; /*行の高さ*/
padding: 5px; /*文字周りの余白*/
border-bottom: 1px dotted #000; /*線の太さ、スタイル、色*/
}

見出し:2本線

見出し①

見出し②

見出し③太さや色を変えてカスタマイズしましょう

.entry-content h3 {
font-size: 16px; 
line-height: 20px; /*行の高さ*/
padding: 5px; /*文字周りの余白*/
border-bottom: 4px double #483d8b; /*線の太さ、スタイル、色*/
}

見出し:上下線

見出し①

見出し②

見出し③

.entry-content h3 {
font-size: 16px; 
line-height: 20px; /*行の高さ*/
padding: 8px 0px; /*文字周り、上下の余白 左右の余白*/
border-top: 1px solid #db7093;/*上の線の太さ、スタイル、色*/
border-bottom: 1px solid #db7093; /*下の線の太さ、スタイル、色*/
}

見出し:上下点線

見出し①

見出し②

見出し③太さや色を変えてカスタマイズしましょう

.entry-content h3 {
font-size: 16px; 
line-height: 20px; /*行の高さ*/
padding: 8px 0px; /*文字周りの余白:左から、上下の余白 左右の余白*/
border-top: 1px dotted #000;/*上の線の太さ、スタイル、色*/
border-bottom: 1px dotted #000; /*下の線の太さ、スタイル、色*/
}

見出し:上下2本線

見出し①

見出し②

見出し③

.entry-content h3 {
font-size: 16px; 
line-height: 20px; /*行の高さ*/
padding: 8px 0px; /*文字周りの余白:左から、上下の余白 左右の余白*/
border-top: 4px double #696969;/*上の線の太さ、スタイル、色*/
border-bottom: 4px double #696969; /*下の線の太さ、スタイル、色*/
}

見出し:左に線いろいろ

見出しデザイン

.entry-content h3 {
margin: 30px 10px;
font-size: 16px; 
line-height: 20px; /*行の高さ*/
padding: 5px 15px; /*文字周りの余白:左から、上下の余白 左右の余白*/
border-left: 6px solid #6495ed;/*左の線の太さ、スタイル、色*/
border-bottom: 1px solid #87ceeb; /*下の線の太さ、スタイル、色*/
}

見出しデザイン

.entry-content h3 {
margin: 30px 10px;
background-color: #fff5ee;
font-size: 16px; 
padding: 5px 15px; /*文字周りの余白:左から、上下の余白 左右の余白*/
border-left: 14px double #fa8072;*左の線の太さ、スタイル、色*/
}

見出しデザイン

.entry-content h3 {
margin: 30px 10px;
background-color: #f0fff0;
font-size: 16px; 
padding: 5px 15px; /*文字周りの余白:左から、上下の余白 左右の余白*/
border-left: 15px solid #20b2aa;*左の線の太さ、スタイル、色*/
}

見出し:ステッチ風

見出し①

.entry-content h3 {
  background:#000;/*背景色*/
  color:#fff;/*文字色*/
  font-size: 16px;
  padding:6px;/*文字周りの余白*/
  border-top:2px dashed #fff;/*上の線の太さ、スタイル、色*/
  border-bottom:2px dashed #fff;/*下の線の太さ、スタイル、色*/
  box-shadow: 0 0 0 5px #000;
}

見出し②

.entry-content h3 {
  background: #ff8c00;/*背景色*/
  color: #000;/*文字色*/
  font-size: 16px;
  padding: 6px 10px;/*文字周りの余白*/
  border: 2px dashed #fff;/*線の太さ、スタイル、色*/
  box-shadow: 0px 0px 0px 5px #ff8c00;
}

見出し:角を丸く

見出し

.entry-content h3 {
  width: 400px;/*見出し全体の幅*/
  background: #3cb371;/*背景色*/
  font-size: 16px;
  color: #fff;/*文字色*/
  padding: 10px 20px;/*文字周りの余白*/
  display: inline-block;
  line-height: 20px;/*行の高さ*/
  border-radius: 20px 0px 0px 20px;/*左側の角を丸く*/ 
}

CSSの使い方

※はてなブログ以外の場合は、クラス名を変えて使ってください。

はてなブログの見出しデザインのカスタマイズ

①.entry-content h3 {

 ↑ このクラス名は、はてなブログでのクラス名になります。

 h3  ←は、見出しの順番に変えてください。

②/* */ ←これで囲まれた文字はウェブ上には表記されませんので、覚書としてあると便利です。

③記載する場所

ダッシュボード ⇒ デザイン ⇒ スパナマーク ⇒ デザインCSS

はてなブログのCSS記載場所①



※はてなブログのテーマによっては、見出しがうまくいかない場合があります。その場合の方法について、SHIROMAGさんが教えてくれています。

www.notitle-weblog.com

 HTML・CSSについて

ブログなどのwebサイトを制作するときに、HTMLやCSSの知識が少しでもあるとないとでは、見た目やSEO効果に違いが出てきます。

私もまだまだ成長途中ですので、ミス記述などお気づきの点がありましたら教えていただけると嬉しいです。

web上でお勉強するときに役立つサイトを載せておきます。

www.htmq.com

 カラーコードはこちら

www.colordic.org

c 2020 revivel.