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

こんな疑問に答えます。

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

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

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

本記事の内容

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

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

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

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

WordPressとは。その仕組み。

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

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

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

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

※３分程度で読めます。

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

続きを見る

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

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

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

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

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

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

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

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

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

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

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

１：テーマ（テンプレート）

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

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

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

全然違いますね。

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

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

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

続きを見る

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

続きを見る

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

２：カスタマイズ

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

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

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

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

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

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

続きを見る

３：ウィジェット

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

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

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

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

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

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

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

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

続きを見る

４：メニュー

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

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

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

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

続きを見る

６：テーマエディター

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

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

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

追加CSSとは

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

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

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

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

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

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

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

１：WordPressデザインテンプレートを変更する

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

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

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

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

続きを見る

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

続きを見る

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

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

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

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

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

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

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

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

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

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

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

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

３：自作でWordPressテーマを作成する

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

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

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

» wordpressテーマを自作する

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

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

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

こんな感じですね。

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

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

続きを見る

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

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

今回は以上です！

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