WordPressの『デザイン』を変更する3つの方法【完全初心者OK】

WordPress初心者
WordPressのデザインを変更するにはどうすればいいんだろう?WordPress初心者でもできる方法が知りたいな。

こんな疑問に答えます。

こんにちは、ショーイです。
WordPress歴は3年ほどです。

WordPressはカスタマイズ性が高く、プログラミング知識のない初心者でも、
簡単にデザインを変更できることが魅力の1つですね。

ですがHTMLやCSSといった基礎的な知識がないと、自分でデザインを変更するのはちょっと難しいです。

そこでHTMLやCSSを全く知らない人でもデザインを変更する方法から、HTMLやCSSのちょっとした知識で「見出しなど部分的なデザインを変える」方法まで解説します。

本記事の内容

  • WordPressのデザインを変更するって、どういうこと?
  • WordPress完全初心者の、デザインカスタマイズ6つの項目
  • WordPressのデザインを変更する3つの方法

WordPressはプログラミングに比べれば簡単ですが、
それでも完全初心者からすると、デザインの変更もひと苦労ですよね。

この記事を読めば、どんなに初心者でもWordPressのデザインカスタマイズの基礎から応用まで把握する事ができ、
「自分らしく&おしゃれな」サイトデザインを作ることができますよ。

WordPressのデザインを変更するって、どういうこと?

WordPressのデザイン変更をよりスムーズにするために、
まずはWordPressの基本の仕組みを解説します。

WordPressとは。その仕組み。

WordPressは、CMS(コンテンツ・マネジメント・システム)と呼ばれる仕組みでできています。

本来WEBサイトというのは、HTMLやCSS、PHPといったプログラミング言語を使って作成するもの。

ですがWordPressのようなCMSでは、このようなプログラミング言語がすでに組み込まれていて、
全く知識のない人でも、直感的に操作して使えるようになっています。

なのでWordPressを初めて触るような人でも、
基本的なデザインなら簡単に変更することができるんです。

さらに詳しくWordPressの仕組みを知りたい方は、
下記記事で簡単にまとめています。

HTMLやCSSが何かもさっぱりわからない方は、まずは下記記事を読むことをオススメします。

※3分程度で読めます。

【入門】WordPressの仕組み|完全初心者にわかりやすいように解説

WordPressのデザインを変更するって、どういうこと?

どのくらいHTMLやCSSなどの基礎知識があるかによって、
WordPressのデザインカスタマイズの幅が変わります。

  • HTML、CSSを全く知らない⇒テンプレートの制限内で、デザイン変更ができる
  • HTML、CSSの基礎知識がある⇒見出しデザイン、目次デザインなど部分的なものは自由にカスタマイズできる
  • HTML、CSS、PHPをだいたい把握している⇒自作でWordPressテンプレートを作成できる

ざっくりとしたイメージとしては、上記の通りですね。

今回は完全初心者の読者を想定しているので、
基礎的なことから解説していきますね。

WordPress完全初心者の、デザインカスタマイズ6つの項目

まずはWordPressのデザイン変更の、基礎的な部分を解説します。

WordPressのデザイン変更は、
左メニューの「外観」というところから行います。

「外観」の中には6つの項目がありますね。

それぞれの項目でできることは下記の通り。

  1. テーマ:Webサイトのデザイン、サイト全体の構成など骨格となるもの
  2. カスタマイズ:テンプレート内のメニューやロゴやタイトル、文字や背景の色などの変更
  3. ウィジェット:サイドバーやフッターなどのカスタマイズ
  4. メニュー:メニューそのものを複数作成できる
  5. 背景:背景をカスタマイズする(上記の「カスタマイズ」でもできる)
  6. テーマエディター:テンプレートファイルを直接編集する

ぞれぞれの項目を簡単に解説していきます

※5番は重複しているので割愛します。

1:テーマ(テンプレート)

「外観⇒テーマ」から、WEBサイトの大まかな構成やデザインの骨格を決める、
テーマ(テンプレート)を設定することができます。

2020年のデフォルトテンプレート(Twenty Twenty)はこのようなデザインですよね。

しかしこれを、現在当ブログが使っている「ストーク19」というテンプレートに変えるだけで、このようにデザインが変わります。

全然違いますね。

こんな感じでサイト全体の大まかな骨格を規定するのが、
WordPressテーマ(テンプレート)になります。

WordPress初心者の方は、まずはこのテンプレートを色々試してみて、サイトの用途にあったデザインの骨組を見つける必要がありますね。

WordPressのテンプレート(テーマ)の変更方法は、下記記事で解説しています。

【無料&有料】おすすめWordPressブログテーマ9選【おしゃれシンプル】

WordPressテーマのインストール方法【できないなんて言わせない】

ここからは上記のストーク19というテンプレートもとに、解説していきます。

2:カスタマイズ

「外観⇒カスタマイズ」をクリックすると、
上記のように「テンプレート内で指定されているデザイン」をカスタマイズすることができます。

サイトのカラーや、記事一覧のレイアウトなどを直感的に変更することができます。

※テンプレートによって、このカスタマイズができる範囲が全く異なるので、こちらは自分で項目を確認して設定するしかないですね。

または「テンプレート名 カスタマイズ」などで検索して、
個別の設定記事を探すのが早いと思います。

例えば、デフォルトの「Twenty Twenty」では下記のようなカスタマイズ項目しかありません。

WordPress初心者の方は、当ブログが使っているストーク19のような、
有料のテンプレートのほうが、時間をかけずにデザインを変更できるのでおすすめです。

WordPressテーマ「STORK19(ストーク)」のサイトイメージ。

【失敗談】WordPressテーマ『STORK19(ストーク)』レビュー【愛用中】

3:ウィジェット

「外観⇒ウィジェット」で上記のように、
サイドバーやフッターと呼ばれる部分をカスタマイズすることができます。

※ウィジェットとは、ざっくり言えばWEBサイトの部品のことです。

上記画像のように、部品(ウィジェット)をドラッグ&ドロップするだけで、
簡単に編集することができますね。

こんな感じで追加されます。

こちらのウィジェットに関しても、
テンプレートによってカスタマイズの幅が大きく変わります。

デフォルトテンプレートの場合、サイドバーすら項目がないですね。

ウィジェットの設定方法を更に詳しく知りたい方は、下記記事を参考にどうぞ。

【簡単】WordPressのウィジェットの設定方法【初心者もできる】

4:メニュー

「外観⇒メニュー」から、その名の通りメニューを作成することができます。

当ブログを例にすると、こんな感じですね。

上記のようなアイコンも含めたメニューの作成方法は、下記記事で解説しています。

【WordPress】『グローバルメニュー』のカスタマイズ方法【アイコン】

6:テーマエディター

「外観⇒テーマエディター」から、
テンプレートのファイル自体を編集することができます。

ただしここの編集は、それなりにプログラミング知識がある人でなければ、
「いじらない方がいいです。」

なぜなら間違って編集した場合に、何が何だかわからなくなる可能性が高いから。※編集する場合でも「子テーマ」と呼ばれるものでやりましょう。

WordPress初心者の方は、ここのテーマエディターは基本的にはいじらずに、
「追加CSS」と呼ばれるところで編集することをオススメます。

追加CSSとは

追加CSSとは、元のテンプレートファイルに手を加えずに、
「上書きで」デザインの指定ができる編集方法です。

「外観⇒カスタマイズ⇒追加CSS」で編集画面に行くことができます。

HTMLやCSSの基礎知識があれば、
この追加CSSだけで、部分的なカスタマイズが自由に行えるようになります。

  • 見出しのデザイン
  • 文字装飾デザイン
  • 目次デザイン
  • リストのデザイン
  • などなど

当ブログも追加CSSで見出しデザインなどを変更しています。

HTMLやCSSは特に難しくもないので、WordPress初心者の方でも使っているうちに覚えると思います。

体系的に学びたい方は、下記のような本を1冊読めば十分です。

WordPressのデザインを変更する3つの方法

WordPressのデザインを変更する、
具体的な3つの方法をまとめて紹介します。

1:WordPressデザインテンプレートを変更する

WordPress完全初心者の方は、上記で紹介した通り、
テーマ(テンプレート)を変更することが第一歩ですね。

WordPressのテーマには、無料のテーマや、有料のテーマなど、数え切れないほどのテンプレートがありますが、初心者の方は有料テンプレートをおすすめします。

なぜなら、無料のテーマだと上記で解説してきた通りカスタマイズの幅も狭く、デザインの編集に悩む時間が大半を占めてしまうから。

HTMLやCSSの知識がないWordPress初心者の方は、まずは下記の記事などを参考にテンプレートを決めてデザインをカスタマイズしてみてください。

【無料&有料】おすすめWordPressブログテーマ9選【おしゃれシンプル】

WordPressテーマのインストール方法【できないなんて言わせない】

2:HTML、CSSなどを覚えて、見出しデザインなどを編集する

上記の本などを参考に、HTMLやCSSの基礎を身につけたら、
部分的なデザインのカスタマイズに挑戦していきましょう。

見出しデザインをカスタマイズする例を参考に紹介します。

デベロッパーツールを使う

デザインを変更したい部分にカーソルを合わせて、右クリックをします。

するとメニューの中に「検証」とあるのでクリックしましょう。

※safariなら「要素の詳細を表示」です。

すると上記のようにデベロッパーツールと呼ばれる、
CSSを覗ける窓が出てきます。

そこから見出しに対応しているCSSを見つけ出し(簡単にわかります)、
上記で紹介した追加CSSに、好みの見出しデザインのCSSを上書きしていくだけです。

HTMLやCSSの知識がないとイミフかもですが、案外簡単にできます。

見出しのCSSに関しては下記記事を参考にすれば、
だいたい好みのものが見つかるはずです。

繰り返しになりますが、HTML、CSSの知識がまだない方は、
まずは下記の本などを参考に基礎知識を身につければ、簡単にデザインカスタマイズできるようになりますよ。

3:自作でWordPressテーマを作成する

HTML、CSS、PHPの言語をだいたい把握できるようになったら、
自作でWordPressのテンプレートを作ることも可能です。

つまりは、骨組みとなるものから全て、
自作したデザインを作れるようになるということ。

ただしこれは初心者レベルを超えているので、ここでは説明しません。

上記までのことをマスターできたら、自作のワードプレステーマを作ることを考えてみても良いかもしれませんね。

» wordpressテーマを自作する

まとめ:WordPressのデザインは誰でも簡単に編集できます

以上、WordPressの完全初心者向けに、デザインのカスタマイズ方法などを解説してきました。

WordPressのデザインを変更するステップを、ざっくりまとめます。

  • WordPress完全初心者⇒有料テンプレートを使い、まずは基本的なカスタマイズに慣れること
  • HTML、CSSをある程度理解した人⇒追加CSSで、見出しデザインなどを自由にカスタマイズしてみる
  • PHPまである程度理解した人⇒自作のWordPressテンプレートを作成して、どこでも自由にデザインを変更してみる

こんな感じですね。

WordPress完全初心者の方は、有料テンプレートを使いましょう。

【無料&有料】おすすめWordPressブログテーマ9選【おしゃれシンプル】

HTML、CSSの基礎を身につけたいかたは、以下の本を読みましょう。

あとは自由に、
WordPressのデザインをカスタマイズしてみてください!

今回は以上です!

よいWordPressライフをお送りください(^^)/

シェアしてね!