WordPress で見出しのデザインを設定する

WordPress のインストール時のテーマで見出しタグを使うと、なんの装飾もないシンプルな見出しが表示されます。
これはこれで、シンプルな感じで良いのですが、もう少し目立たせたかったりする場合には、スタイルシート(CSS)を記述することでデザインを変えることが出来ます。

また、見出しに限らずサイトをもっと凝ったデザインにしたい場合などには、スタイルシート(CSS)を編集する必要がでてくるので、まずは手馴しのつもりで、見出しタグの変更を行ってみるのも良いでしょう。

まずは、どんな感じに見出しが設定できるのか見ていくことにしましょう。

サンプル見出し-①

これは見出しです

 

サンプル見出し-②

これは見出しです

 

サンプル見出し-③

これは見出しです

 

サンプル見出し-④

これは見出しです

 

こんな感じに、見出しのデザインを変更することができます。

見出しのデザインをスタイルシートに設定する方法

ダッシュボードから”外観” – “テーマの編集”を選びます。
テーマの編集

すると、”スタイルシート (style.css)”が開きますので、ここにCSSのコードを書き加えていくことになります。

テーマの編集

class属性の内容

では、どのようなコードを書き加えていくかというと、次のようなコードを加える事になります。

サンプルコード

 

サンプル見出し-②

これは見出しです

 

サンプル見出し-③

これは見出しです

 

サンプル見出し-④

これは見出しです

 

サンプル見出し-⑤

これは見出しです

使い方

WordPress 投稿時にテキストエディタで以下のような感じに記述します。

「class」 に、設定したクラス名を指定してください。

おまけ

これを応用すると、

こんな風に枠を付けて表示できたり

します。

これは、次のようなclassを設定しました。

CSS

使い方

考え方になれるまではなかなか難しいかもしれませんが、様々なバリエーションを作ることができるのできっと力になると思います。

 

コメントを残す

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