ブログ運営

初心者必読!見出しデザインカスタマイズ方法【CSS】

初心者必読!見出しデザインカスタマイズ方法【CSS】
コッコ
コッコ
自分好みにブログのデザインをカスタマイズしたいな〜

ブログでオリジナリティを出すのに活躍するのが「見出し」ですよね!

そんな見出しのデザインを色別に作成したので、ぜひ参考にしてみてくだい★

HTMLやCSSを知らない人でも、コピペするだけで簡単にオリジナリティを出すことができます

カラー別の見出しデザインのリンク

色が違えば、デザインの雰囲気も違って見えますよね?

そこで、4色のパターン(黄、緑、桃、青)の見出しデザインを用意しました

色によって人に与えるイメージは異なりますので、目的や好みに合った見出しを選んでみてくださいね★

見やすい!イエロー系の見出しデザイン27種【WordPressソースコード】
見やすい!イエロー系の見出しデザイン27種【WordPressソースコード】HTMLやCSSがわからなくても、コピペでOK! このページでは、イエローベースの見出しデザインをご紹介します イエ...
おしゃれ!グリーン系の見出しデザイン27種【コピペCSS】
おしゃれ!グリーン系の見出しデザイン27種【コピペCSS】HTMLやCSSがわからなくても、コピペでOK! このページでは、グリーンベースの見出しデザインをご紹介します グリ...
かわいい!ピンク系の見出しデザイン27種【コピペOKのCSS】
かわいい!ピンク系の見出しデザイン27種【コピペOKのCSS】HTMLやCSSがわからなくても、コピペでOK! このページでは、ピンクベースの見出しデザインをご紹介します ピンク...
かっこいい!ブルー系の見出しデザイン27種【WPカスタマイズ】
かっこいい!ブルー系の見出しデザイン27種【WPカスタマイズ】HTMLやCSSがわからなくても、コピペでOK! このページでは、ブルーベースの見出しデザインをご紹介します ブルー...

基本的にはコピペすればOKですが、使用しているツール・WordPressのテーマなどにより、少し手を加える必要があります

私が実際に困ったことなどをまとめたので、ご確認ください

初心者必読!見出しデザインカスタマイズ方法

見出しのデザインは「CSS」という、サイトのデザイン全般を行う言語を使って指定します

各見出しデザイン()には、CSSコードを表記しておりますので、コピペすればOKです

とはいっても、初めて見出しデザインをカスタマイズされる方は「どこにCSSコードをペーストしたらいいの?」と疑問ですよね

ややこしいことに、CSSコードをペーストする場所は、テーマや利用しているツールにより異なります

自分に当てはまる項目を読んで試してみてください

WPテーマ「JIN」での見出し設定方法

WordPressのテーマ「JIN」を使ってる人は、下記の手順で見出しデザインの変更ができます

  1. [外観]
  2. [カスタマイズ]
  3. [見出しデザイン設定]
  4. [見出しをオリジナルデザインにする]にチェック
  5. .hl-custom h2{color:#000;}
    .hl-custom h3{color:#000;}
    .hl-custom h4{color:#000;}
    @media (max-width: 768px) {
    //ここから下にスマホ専用のCSSを記述
    }
    このコードの後に、コピーしたCSSコードをペーストします

見出しのデザインを変更する|JIN MANUAL

▼フォントサイズの変更は別で行う必要があるみたい

JINの「見出し」のフォントサイズ変更|ワードプレス「JIN」の設定方法の解説ブログ

WPテーマ「Cocoon」での見出し設定方法

Cocoonは無料で使えるので、利用者も非常に多いテーマですよね♪

下記の手順でCSS編集画面に行けます

  1. [外観]
  2. [カスタマイズ]
  3. [追加CSS]

ペーストする際、やることが2つあります

  1. デフォルトの設定をリセットするCSSコードを追加する
  2. 「.article」を追加する

順番に解説します

1.デフォルトの設定をリセットする

各見出しデザイン()のサンプルページにいくと、サンプル画像の下に下記のようなCSSコードが書かれています

/*BEFORE*/
/*サンプル*/

h2{
  margin:1.4em 0;
  padding-left: 0.5em;
  border:solid 8px #239dda;
}

このままコピペしたいところですが、Cocoonの場合、このままコピペしただけはデフォルトの見出しデザインと被さって表示されてしまいます

そこで、Cocoonの見出しデザインに設定されている値をリセットしてあげる必要があります

(私は初めてWordPressで見出しデザインのカスタマイズを行った際、このリセットが分からなくて超苦労しました😭(CSSは色を変える程度の知識しかなかった))

モコ
モコ
やり方は簡単だよ

「h2{」のあとに、下記のCSSコードを追加します

padding: 0;
border:none;
background:none;

/*AFTER*/
/*デフォルトの見出しをリセットした上で、見出しデザインを反映しています*/

h2{
  padding: 0;
  border:none;
  background:none;margin:1.4em 0;
  padding-left: 0.5em;
  border:solid 8px #239dda;
}
コッコ
コッコ
リセットもコピペすれば良いだけだから簡単だね

もし万が一、上記の方法を適用してもトラブルがある場合は、

cocoon 見出し リセット」「cocoon 見出し 反映されない」などで検索すると、いろいろと記事が出てきます

2.「.article」を追加する

CocoonはHTMLで「article」というタグを使っているらしくh2→.article h2」に変更する必要があります

/*BEFORE*/
/*サンプル*/

h2{
  margin:1.4em 0;
  padding-left: 0.3em;
  border-bottom: 7px dashed #239dda;
}
h2::before {
  color: #239dda;
  content: '▶';
}
/*AFTER*/
/*このコードの場合は、2箇所訂正が必要*/

.article h2{
  margin:1.4em 0;
  padding-left: 0.3em;
  border-bottom: 7px dashed #239dda;
}
.article h2::before {
  color: #239dda;
  content: '▶';
}

その他のテーマ・ツールを使っている場合

その他のテーマやツール(はてなブログなど)を使ってる人は、すみません

細かい設定があるかどうか、私にはわかりません😢

代わりに、CSSの編集場所について書いてある記事を集めたので、該当があれば参考にしてみてください

はてなブログ→ Yukihy Life

ライブドアブログ→ No.2宣言

FC2ブログ→ふくやり

WP:LION MEDIA→うれログ

WP:STINGER→みらしん

あとは、「(使ってるテーマの名前) 見出し カスタマイズ」「(使ってるテーマの名前) 見出し 反映されない」などで検索してみてください

見出しの「h2」について

見出しは、見出し1〜見出し6(h1〜h6)まで種類があります

大きさが様々ですが、見出し1(h1)は、ページ(記事)のタイトルのみに使用するため、文中では使用しません

文中で使う見出しは「見出し2(h2)」と「見出し3(h3)」がほとんどで、h5以下の見出しはほとんど使用しません

(使ってもいいけど、使ってる人ほぼほぼいない)

そのため、コピペ用のCSSコードも全てh2に設定しています

/*サンプル*/

h2{
  margin:1.4em 0;
  padding-left: 0.5em;
  border:solid 8px #239dda;
}

見出し3(h3)のデザインをカスタマイズしたい時は、「h2」→「h3」に変えればOKです

CSSについての参考リンク

▼参考にさせていただいたサイト

MDNN web docs

NxWorld

▼自分で色やサイズなど微調整をしたいという方は、こちらをご参考ください

見出しの装飾をするためのCSSプロパティ
見出しの装飾をするためのCSSプロパティ集 そんなお悩みをお持ちの方は参考にしてみてください https://learning-museum.inliberty.wo...