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へ飛ぶのは駄目ですね。

CSSで見出し変更3

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

スポンサーリンク

H2タグの変更

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

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

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

H3タグとH4タグの変更

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

H3タグ


H4タグ

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

CSSで見出し変更4

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

まとめ

ここでのポイントはSimplicityの子テーマを変更するという事になります。

Simplicityでアップデータが行われた場合に、親テーマの見出しタグを変更している場合は全て書き換わってしまいます。

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

なのでCSSをカスタマイズする場合は子テーマの使用をお勧めします。

関連記事➝WordPressの無料テーマSimplicityの子テーマのダウンロード方法

次記事➝WordPress導入後に入れておくと超便利な3つのプラグイン!

スポンサーリンク

フォローする

コメントをどうぞ

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