【Simplicity】まずは見出しをカスタマイズしてみよう

Simplicity 見出し カスタマイズ WordPress

WordPressのカスタマイズ第一歩としておすすめなのが「見出し」です。

文字のスタイル変更はとても単純で、CSS初心者でも簡単に出来るんですよね。

そんな見出しのカスタマイズですが、今回はこの2つを通して紹介していきたいと思います。

スポンサーリンク

【Simplicity】記事の見出しをカスタマイズ

まずは、記事中の見出しから見ていきましょう。

記事内の見出しでよく使われるのが「h2タグ」と「h3タグ」。1記事書けば大抵使うことになります。

1つずつCSSを紹介しますね。

1、見出し(h2)のCSS

このサイトで実際に使っているデザインはこんな感じ。(記事公開時点)

Simplicity 見出し

見出しはユーザーが流し読みしたときに、パッと目に飛び込んでくるのが良いですね。

かと言って派手になりすぎてもダメなんで、結局これくらいのデザインがちょうどいいんじゃないでしょうか?

実際に使ったCSSはこちらです。

/*見出し(h2)
===================================*/
.article h2 {
   background-color: #499eda;
   color: #fff;
   padding: 15px 30px;
   font-size: 23px;
   letter-spacing: 0.05rem;
   border-left: none;
}

記事内の見出し(h2)はクラス名「.article」の中にあります。

WordPressのテーマによっては、サイトの別の個所にも「h2タグ」が使われている可能性があるので、単純にh2と指定するのはNG。

今回のように「.article h2」とセレクタを指定することで、記事中のh2のみに変更が適用されるようになります。

css記述の基本「セレクタ」について。web専門学校で学んだcssの基本
「自分のサイトやブログのデザインをちょっとアレンジしてみたい」という人向けにcssについて簡単にまとてみました。 まずはcssの特徴を見てから、記述方法を見ていきたいと思います。 cssとHT...

CSSプロパティの解説

  • background-color」「color」プロパティで背景色と文字の色を指定。
  • padding」プロパティで文字の周りの余白を指定。
  • font-size」「letter-spacing」プロパティで文字のサイズ、間隔を指定。
  • border-left」プロパティで、Simplicityデフォルトのスタイルを削除

文字と背景色は好きなカラーコードを指定してください。

白抜きが目立ちやすいので「background-color」のみを変えるのがおすすめです。

また、Simplicityの場合はもともとのCSSで左側にラインが入るようになってます。

border-left」はそれを削除するためのものなので、他のテーマの場合は不要です。

2、見出し(h3)のCSSを変更

続いて記事内の見出し(h3)を見てみましょう。

Simplicity 見出し

これはh2タグよりも控えめでありながらも、そこそこ目立つイメージ。

/*見出し(h3)
===================================*/
.article h3 {
 border-bottom: 5px solid #499eda;
 padding: 10px 0;
}

こちらも記事中のみ変更したいので、先ほど同様「.article h3」という指定をしてます。

CSSプロパティの解説

  • border-bottom」プロパティでアンダーラインのスタイルを指定。
  • padding」プロパティで文字の周りの余白を指定。

Simplicityのh3タグは、デフォルトでアンダーラインが付くようになっています。

しかし、もともとの色はグレーなので、h2をカスタマイズした場合その色と合わせる必要があります。

文字の色も変えたい場合は、先ほどのように「color」プロパティを使いましょう。

また「padding」プロパティを使って上下に余白を作ってますが、これをしっかり設定しておくことで、記事作成時に見出しの前後に改行を入れる必要もなくなります。

文章的に意味のないところで無駄な改行を入れないように、ここで指定しておくことをすすめます。

【Simplicity】サイドバーの見出しをカスタマイズ

それでは最後に、サイドバーの見出しのカスタマイズを見て終わるとしましょう。

実は、記事の中以外にも見出しタグが使われている場所があるのです。

そう。それがサイドバーの見出し。

ウィジェットを使ってサイドバーにコンテンツを追加したときにタイトルを入力しますよね。

Simplicityではここにh3タグが使われています。(テーマによっては、h2の場合もあるのでご注意を)

Simplicity 見出し

Simplicityのサイドバーの見出しは通常、ただの黒字で文字が表示されると思います。

それを先ほどのデザインに合わせるとこんな感じになります。

Simplicity 見出し

CSSはこちら。

/*サイドバーの見出し
===================================*/
#sidebar-widget aside h3{
   background-color: #499eda;
   color: #fff;
   padding: 10px;
   text-align: center;
   font-size: 16px;
   border-radius: 3px;
}

ここでもサイドバー内のh3タグを指定するため、「#sidebar-widget aside h3」というようにセレクタを詳細に記述しています。

CSSプロパティの解説

  • background-color」「color」プロパティで背景色と文字の色を指定。
  • padding」プロパティで文字の周りの余白を指定。
  • text-align」プロパティで文字を中央寄せ。
  • font-size」プロパティで文字のサイズを指定。
  • border-radius」プロパティで角丸に。

サイドバーの見出しは、「text-align」プロパティを使って文字を中央寄せにしておきました。

あとは「border-radius」プロパティで若干丸みを出してます。

記事内より文字を小さ目に設定することで、全体的なバランスも良くなると思いますよ。

最後に

見出しは文章のまとまりを区切る重要な役割を持ちます。そういった意味でも、早めににカスタマイズするのはありかと思います。

また補足ですが、フォントのサイズや周りの余白は、PCとスマホでそれぞれ設定すると良いですね。

文字関連のCSSが扱えるようになってくると、CSSの楽しさも見えてくるんじゃないでしょうか?

サイトのデザインは自由自在です!