WordPressのCSSをカスタマイズして自分好みのデザインに変える方法(初心者用)

ワードプレスに慣れていない方は、テンプレートを直接使ったり、誤ってテーマのHTMLソースを編集してしまう人も。その結果サイト全体の構成が崩れることもあります。WordPressには簡単にCSSをカスタマイズできる場所があるんですよ。

サイト全体のデザインを変える方法

先ずはWordPress全体のCSSを変更する方法から紹介します。この部分にCSSの記述を加えれば、全てのページに反映させることができますよ。

外観からカスタマイズを選択する

WordPressの外観 カスタマイズ

WordPressへログインしたら、左サイドメニューにある「外観」続けて「カスタマイズ」の順にクリックをして下さい。画面が切り替わり、全体のレイアウトや情報の編集メニューが現れれば次へ進みます。

追加CSS(カスタムCSS)を選択する

WordPressのカスタムCSS

左サイドバーのメニューより、最下部へスクロールすると、追加CSS(またはカスタムCSS)と記されたボタンがあるので、クリックして下さい。すると、メニューの部分だけが切り替わり、何も記入されていない真っ白な記入欄が出てきます。

空欄部分にCSSのを追加する

CSS入力欄

表示された真っ白な記入欄にCSSを追加していきましょう。記入方法に決まりはありません。

注意していただきたいのは、ここに記述したCSSは、サイト全体に優先して当ります。そのため、記述する際は、全体を意識するようにしましょう。

また1記事のみに反映させたい場合は次の方法があります。

1つの記事だけデザインを変える方法

投稿記事下の追加ヘッダー

サイト全体にではなく、特定ページのCSSだけ変更したい場合は、投稿ページ下部にある追加ヘッダー(またはカスタムCSS)の枠からもCSSを指定することができます。この枠へCSSを入力するときは、CSSの上下を<style>で囲う必要があります。

もし「あれ?CSSが効いてないな」と思ったときは<style>の入力漏れが無いかチェックしましょう。

まとめ

WordPressでは基本的なCSSやjavascriptの設定が自由にできるようになっています。色やデザインを変えることで、見やすいレイアウトを作りましょう。