【初心者向け】見出しが反映されない時は初期化CSSをコピペしよう！

！

ブログを書くときに迷うのは見出しのデザインですよね。

ネット検索をすると様々なコードがでてきて、それらをコピペするだけで簡単にオシャレな見出しを作ることができます。開発者の皆さんには感謝しかありません！

ところで、この見出しのコードをコピペした時に「なぜかうまく反映されない…」なんてことはありませんでしょうか？

特に何回もデザインを変えている内に上手く反映されないなんてこともあると思います。

この記事では見出しを変えたいけど上手くできないとお困りの方向けに解決方法をいくつかご紹介します。

この記事はWordpressテーマ「Cocoon」での編集画面を元に説明します。

この記事の目次

まずはCSS（スタイルシート）のバックアップ
1. CSSのコピー
2. メモ帳に貼り付けて保存する
見出しを初期化するコードをコピペする
参考図書

まずはCSS（スタイルシート）のバックアップ

もう御存じと思いますが、見出しの装飾を行うためにはCSS（スタイルシート）を編集する必要があります。

CSSはブログを装飾し見た目を整える役割がありますので、CSSの設定を間違えるとブログの見た目が大きく変わってしまいます。

元に戻せるようにCSSのバックアップを取っておきましょう。

バックアップはCSSコードが分かればいいため、私はパソコンに標準搭載されている「メモ帳」にコードをコピーしています。

CSSのコピー

1)外観＞テーマエディターをクリックします。

2)CSSのコードをコピーする。

テーマが「Cocoon Child」であることを確認。
CSSの一部をクリックしてCtrl＋Aで全選択，Ctrl＋Cでコピー。

メモ帳に貼り付けて保存する

メモ帳を開いてペーストして保存しましょう。
　※Windwsボタン＞Windowsアクセサリ＞メモ帳
　※Ctrl＋Vでペースト。

見出しを初期化するコードをコピペする

見出しを初期化するコードをコピーしてペーストしましょう。

CSSコード

見出しを初期化するコードは以下です。

//*見出しの初期化*//
.article h2,
.article h3,
.article h4,
.article h5,
.article h6
{
padding: 0;
margin: 0;
background:none;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
line-height: normal;
position:relative;
}

CSSを貼り付ける場所

コピーしたコードは/*ここにコードを書く*/の部分にペーストしましょう。
※要するにCSSの一番最初です。

/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
　/*必要ならばここにコードを書く*/
}

　/*ここにコードを書く*/

【注意点】