初心者のためのWordPressの始め方04 [テーマ変更編]

In wordpress by カワテ タカヒト

こんにちはカワテです。
「初心者のためのWordPressの始め方」4回目になります。

[関連記事] 初心者のためのWordPressの始め方 [ エックスサーバー導入編 ]
[関連記事] 初心者のためのWordPressの始め方02 [ 初期設定編 ]
[関連記事] 初心者のためのWordPressの始め方03 [記事の投稿 編]

WordPressには簡単にデザインを着せ替えできる「テーマ」という機能があります。
htmlやデザインの知識がなくても簡単に美しいデザインをブログに反映させることのできるWordpressの特徴的な機能の1つです。

[関連記事] 商売で使えるおすすめの日本語WordPressテーマまとめ (有料版)

ブログのデザインを自分好みに変えることはブログを書くモチベーションUPにも繋がりますのでオススメです。

今日は、無料のWordPressテーマを使ってブログのデザインを変更する方法について解説したいと思います。

無料のテーマを探す

まずは無料で利用できるテーマを探してみましょう。

WordPressの初期設定では「Twenty Seventeen 」というテーマが実装されています。とてもシンプルで使いやすいテーマですが「トップページにこんな大きな画像いらない」という方も多いでしょう。

Wordpressのデフォルトテーマ

ページを開くとすぐにブログ記事が読めるテーマに変更してみましょう。

まずはテーマ探しからです。
ダッシュボードメニューから「外観」を選択します。

外観を選択しテーマ画面を開く

現在実装されているテーマが最初に表示されます。
Twenty Seventeen」が有効になっています。

Twenty Seventeenが有効になっている
テーマのカスタマイズ

テーマにはデザインを管理するための独自カスタマイズ機能が備わっています。
テーマの詳細設定は「カスタマイズ」から行えます。
カスタマイズできる範囲はテーマによって異なります。

テーマ画面からカスタマイズを選択します

「Twenty Seventeen 」では基本色の設定やメイン画像の変更などが「カスタマイズ」より行えます。

サイトの基本情報を編集できる画面です。

無料で使える新しいテーマを探します。
新規追加」を選択します。

テーマの新規追加方法。テーマ画面より新規追加を選択します。

ここにはWordPress公式テーマが掲載されており、6,000以上のテーマから好きなものを選択できます。もちろんすべて無料で利用できます。

たくさんありすぎて迷いますが、上部フィルターメニューより「最新」を選択して最近追加された新しいテーマを見てみましょう。

最新タブを選択し、フィルタリングります。

「本当に無料でいいの?!」と思うような素敵なデザインがたくさんあります。ブログ以外にも会社のホームページとしてすぐに利用できそうなテーマも多いですね。

画面をスクロールして一通り見てみましょう。
今回はシンプルなブログテーマ「Savona Classic」を使ってみましょう。私も初めて利用するテーマですが、個人ブログとして利用するには使いやすそうなテーマです。

Savon Classicという無料テーマを利用します。

もし「Savona Classic」が見つからない場合は、検索窓に「savona」と入力し検索をかけます。

テーマが見つからない場合には検索から探します。

テーマをインストールする

「Savona Classic」が見つかったら、画像にマウスを乗せると表示される「インストール」を選択。

インストールを選択し、テーマをWordpressにインストールします。

テーマのインストールが始まります。

インストール中の画面

インストールが完了したら「有効化」を選択。

インストールが終わったら「有効化」を選択します。

これで新しいテーマが適用されました。

デザインがどのように変わったのか確認してみましょう。
サイトを表示」を選択。

サイトを表示を選択します。

デザインが「Savona Classic」に更新されました。

ブログのデザインを確認します。

タイトル周りやボタンの形など、デザインが大きく変わりましたね。
スッキリしていてブログも読みやすそうです。

デザインがブログタイトル、ボタンのデザインなど変更されていることがわかります

左が私のブログ。右がテーマのデモ画像です。

デモ画像と実際のWordpressの画面の違い

日本語と英語の違いもありますが、同じテーマでもデザイン的にまだずいぶん差があることがわかります。これからWordpressで設定を行いながら、右のデモ画像のデザインに近づけていきましょう。

親テーマと子テーマについて

WordPressを使う上で理解しておきたい大切なことがあります。
それが「親テーマ」と「子テーマ」です。

先ほど「Savona Classic」をインストールしましたが、よく見るとインストールした記憶のない「SAVONA」というテーマがダッシュボードにあります。

親テーマと子テーマについて。2つのSavonテーマがダウンロードされています

これは「Savona Classic」が「SAVONA」と親子関係にあるため自動でダウンロードされたものです。

WordPressの親子関係について説明します。

WordPressでは頻繁にテーマがバージョンアップされます。セキュリティーや新しい機能が追加されるのでバージョンアップは大歓迎なのですが、バージョンアップによりせっかくカスタマイズした設定内容もすべて新しく書き換えられ消えてしまうのです。私もWordPressを始めたばかりの頃、何日もかけて作ったデザインがすべて消え、また1から全部やり直しなんてことがありました。

そのためテーマがバージョンアップしても設定内容が消えないようカスタマイズ専用として生まれたのが「子テーマ」です。「子テーマ」はテーマのクローンのような存在で「親テーマ(本来のテーマ)」のデータを引き継ぎながら必要な部分だけをカスタマイズできます。「親テーマ」がバージョンアップしても「子テーマ」を設定しておくことで保存された設定内容は消えないで済みます。

「Savona Classic」でいうと、必要なデータはすべて「親テーマ」である「SAVONA」の中にあります。一方、デザインや設定した各種データは「子テーマ」である「Savona Classic」の中に蓄積されます。

ですから「SAVONA」をバージョンアップした際にも、セキュリティーなど重要な要素は更新されますが、デザインなどのデータは上書きされずに残るというわけです。

子テーマと親テーマ

少しややこしいですが、ここでは子テーマである「Savona Classic」を使っていればテーマのバージョンアップも怖くない、ということだけ覚えておいてください。

不要なテーマを削除する

ダッシュボードのテーマページにはお気に入りのテーマをストックしておくことができます。

WordPressでは3つのテーマがデフォルトでインストールされていますが、使っていないテーマに関してもバージョンアップ通知が頻繁に来ますので正直邪魔です。使っていないテーマをダッシュボードから削除しましょう。

使っていないテーマを削除する方法

削除したいテーマの画像をクリックします。

テーマ画像をクリックします。

画面右下の「削除」を選択。

削除を選択します

不要なテーマが削除されました。

使っていないテーマが削除されました

この作業をすべての不要なテーマで行います。

スマホでの見え方を確認する

最後にもう一度、新しいテーマのデザインを確認してみましょう。

ブログを確認してみましょう

ブラウザの画面右隅をマウスでドラッグしながら横幅を狭くします。

ブラウザの横幅を縮めます

画面が縮小され、スマートフォンでの見え方を確認できます。

スマートフォンでのデザインが確認できます

まとめ

お疲れ様でした。
これで新しいテーマがインストールされました。
次回はデザインをカスタマイズし、DEMOデザインに近づけていく作業を行います。

↓こんな感じですね

Wordpressの無料テーマ SavonaClassic

この記事が皆様のお役に立てれば幸いです。
ではまた次回、お会いしましょう。