CSS(スタイルシート)を使い見出しタグをかっこよく変更する方法【Simplicity】

a0002_004060_m

こんんちは、こんばんは、ごりょんさんです。

今日は CSS(スタイルシート)を使って見出しタグの変更を行っていきたいと思います。

icon-question 見出しタグとは?

検索エンジン対策のためのhタグ。サイト訪問者にとっても読みやすいという利点がある。

当ブログでは無料テーマの Simplicityを利用しています。Simplicityのデフォルトではこんな感じの見出しタグでした。

CSSで見出し変更2

H1タグはブログの記事タイトルに使用します。なので普段使用するのは、H2タグとH3タグまでぐらいで、たまにH4タグを使う程度かと思われます。

ブログの投稿記事1記事に対して、H1タグは1回まで、H2タグ以下は何回でも使用可能です。しかし正しい順番で使用しなければなりません。

H2➝H3➝H4と数字の小さい方から使用していきます。H2からいきなりH4へ飛ぶのはNGですね。

CSSで見出し変更3

Simplicityは非常にシンプルで素晴らしい無料テーマなのですが、見出しタグもシンプルなので、少しばかり装飾してカッコ良くしていきたいと思います。

スポンサーリンク

H2タグの装飾

まず初めはH2タグですね。

WEB道さんの「CSS見出しジェネレータ」を使って製作しました。

これをダッシュボード➝外観➝テーマの編集の、CSS(スタイルシート)に貼り付けて「ファイルを更新」をクリックします。

H3タグとH4タグの変更

次は小見出しのh3とh4を変更します。

H3タグ


H4タグ

設定変更後はこんな感じになりました。

CSSで見出し変更4

H5タグとH6タグは使う事はないので変更しない事にしました。

Simplicityの見出しタグ装飾のまとめ

ここでのポイントは、Simplicityの親テーマはいじらずに、子テーマを変更するという事になります。Simplicityでアップデータが行われた場合に、親テーマの見出しタグを変更している場合は全て書き換わってしまいます。

子テーマをカスタマイズしていると、親テーマのアップデータ時でも、そのまま子テーマのファイルは書き換えられません。なのでCSSをカスタマイズする場合は子テーマの使用をお勧めします。

■関連記事■

スポンサーリンク

シェアする

フォローする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です