こんにちは、timshaw9 です。
見出しを付けて記事の流れを分かり易くするのはSEO対策の１つですが、今回はその見出しのデザインを簡単に変える方法をご紹介します。
※SEO対策: 自分の記事をより多くの人にみてもらう為の工夫。
見出しのデザインを変える方法
好みのデザインを探す
まず初めに、好みの見出しデザインを探してみましょう。
CSS言語※を書くことができれば自分でもこの見出しデザインを作れるのですが、私のように始めたばかりの初心者はベテランの方が書いたコードを使いましょう。
※CSS言語: webサイトの装飾(文字の色など)を変える為の言語。
私はこのサルワカさんの記事をみて良いデザインを探しました。
自分のサイトのテーマに合った見出しデザインを選びましょう。
もしぴったりのデザインを選び終わったら、その下にあるCSSコードをコピーしましょう。
追加CSSにコードをペースト
好みのデザインのCSSコードをコピーし終わったら、次にそのコードを実装していきます。
はい、簡単ですね。既に先ほど選んだ見出しデザインが 全ての記事に 適用されました。
サイズ毎にデザインを変える
次は、どの見出しサイズにこのデザインを適用するか決めていきます。
試しに先ほど選んだデザインを、h3サイズの見出しへ適用してみましょう。
※私は分かり易いように「/*h3*/」というのを上に入れています。「/* */」で囲んだ部分はコードとして認識されずコメント扱いになります。
さて、これで適用する見出しサイズの変更も終わり、実際に使えるようになりました！
私が使っているデザイン
h3 → 大見出し h4 → 小見出し h5 → ポイントの強調
私はこのように見出しサイズを使い分けています。
h3
h4
h5
こんな感じですね。また、目次では↓このように表示されます。
最後に
さあ、無事見出しのデザインが変更できたでしょうか。
見出しのデザインを変えて、より一層見易いサイトを目指しましょう！