ブログでオリジナリティを出すのに活躍するのが「見出し」ですよね！
そんな見出しのデザインを色別に作成したので、ぜひ参考にしてみてくだい★
HTMLやCSSを知らない人でも、コピペするだけで簡単にオリジナリティを出すことができます
カラー別の見出しデザインのリンク
色が違えば、デザインの雰囲気も違って見えますよね？
そこで、4色のパターン（黄、緑、桃、青）の見出しデザインを用意しました
色によって人に与えるイメージは異なりますので、目的や好みに合った見出しを選んでみてくださいね★
基本的にはコピペすればOKですが、使用しているツール・WordPressのテーマなどにより、少し手を加える必要があります
私が実際に困ったことなどをまとめたので、ご確認ください
初心者必読！見出しデザインカスタマイズ方法
見出しのデザインは「CSS」という、サイトのデザイン全般を行う言語を使って指定します
各見出しデザイン（黄、緑、桃、青）には、CSSコードを表記しておりますので、コピペすればOKです
とはいっても、初めて見出しデザインをカスタマイズされる方は「どこにCSSコードをペーストしたらいいの？」と疑問ですよね
ややこしいことに、CSSコードをペーストする場所は、テーマや利用しているツールにより異なります
自分に当てはまる項目を読んで試してみてください
WPテーマ「JIN」での見出し設定方法
WordPressのテーマ「JIN」を使ってる人は、下記の手順で見出しデザインの変更ができます
- [外観]
- [カスタマイズ]
- [見出しデザイン設定]
- [見出しをオリジナルデザインにする]にチェック
- .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編集画面に行けます
- [外観]
- [カスタマイズ]
- [追加CSS]
ペーストする際、やることが2つあります
- デフォルトの設定をリセットするCSSコードを追加する
- 「.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の編集場所について書いてある記事を集めたので、該当があれば参考にしてみてください
あとは、「（使ってるテーマの名前） 見出し カスタマイズ」「（使ってるテーマの名前） 見出し 反映されない」などで検索してみてください
見出しの「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についての参考リンク
▼参考にさせていただいたサイト
▼自分で色やサイズなど微調整をしたいという方は、こちらをご参考ください
