- WordPress初心者が最初にやる初期設定と安心の基本手順ガイドを追加しました
- WordPressテスト環境の作り方と活用法｜安心して試せる方法を追加しました
- もうネタ切れしない！セラピストが書きやすいブログテーマ20選を追加しました
- 初心者向けブログデザイン簡単安心ガイドを追加しました
この記事を読むのに必要な時間は約 20 分です。
このブログは基本的に、メンタルセラピストやスピリチュアル系を仕事にしている方もしくはしたい方や個人事業主などの方で、ITが苦手な方を対象にしています。
- 子テーマを使うメリットと親テーマとの違い
- 子テーマ作成の基本ステップ
- デザインや機能を安心してカスタマイズする方法
- 子テーマ運用の注意点と対処法
「WordPressを使っているけれど、他の人のようにオシャレにカスタマイズするのは難しそう…」そんな不安を感じていませんか？
実は「子テーマ」という仕組みを使うことで、思った以上に手軽に、しかも安全に自分らしいデザインへ変えられます。
この記事では、初心者でも失敗しにくい子テーマの作り方から、安心してカスタマイズするための準備やコツを順を追ってやさしく解説します。
「これなら私にもできそう」と感じられる第一歩として、ぜひ参考にしてください。
子テーマとは？親テーマとの違いを知ろう
WordPressを始めたばかりだと「子テーマって何？」「親テーマとどう違うの？」と疑問に思うかもしれません。
この章では、子テーマの仕組みや役割をやさしく解説します。
子テーマの基本と仕組み
子テーマは、親テーマの機能やデザインをそのまま引き継ぎつつ、自分で変更を加えられる仕組みです。
親テーマはWordPressの「土台」や「骨組み」のようなもので、子テーマはその上に好きな飾りをつけるイメージです。
たとえば親テーマだけを使って見出しの色を変更したり、デザインを調整したりすると、その変更はテーマを更新したときに上書きされて消えてしまいます。
でも子テーマを作っておけば、親テーマのアップデートをしても自分のカスタマイズがしっかり残ります。
この仕組みのおかげで、安心して見た目や機能を整えることができるのです。
子テーマには「style.css」というファイルを用意して、ここにデザインの調整を書きます。
さらに「functions.php」というファイルを使うと、便利な機能を追加できます。
これらを使い分けることで、親テーマを壊す心配なくブログを整えられます。
こうした仕組みが、子テーマが「安全にカスタマイズする土台」と呼ばれる理由です。
子テーマを使うと何ができる？
子テーマを導入すると、デザインや機能を自由に調整できます。
この章では、子テーマを使うとできることや、始めるときのコツを紹介します。
親テーマを壊さずに安心して変更できる
子テーマを使うと、親テーマのファイルを直接編集する必要がなくなるので、失敗してもすぐに元に戻せます。
たとえば、見出しの色や背景を変更したときに表示が崩れたとしても、子テーマのファイルを修正すればすぐ修復できます。
親テーマを更新するときも、子テーマで加えた設定やデザインはそのまま残るため、更新によるトラブルが起きにくいのも安心ポイントです。
「試しに変えてみる」を繰り返せるのが大きなメリットで、初心者でも一歩ずつ操作を学べます。
他の人と差がつくデザインにできる
子テーマを使えば、ヘッダーやフッター、ボタンの色を変えるだけでも大きく印象が変わります。
標準のままのテーマはどうしても他のサイトと似てしまいますが、自分で調整することで「わたしらしいブログ」を作れるのが魅力です。
少しずつ好みを反映させていくうちに、同じテーマを使っていても全く違う雰囲気が出せます。
まずは小さな変更から始めるのがおすすめ
最初から大きく変えようとすると、表示が崩れたり思わぬエラーが出やすいです。
まずは見出しの色や記事欄の幅を少し調整するなど、小さな変更から始めて操作に慣れるのがおすすめです。
慣れてきたら、フォントやボタンのデザインも少しずつ挑戦していくと、無理なくステップアップできます。
自分だけのブログを育てる第一歩になる
子テーマを使うことは、ブログを「自分らしく育てる」大切な第一歩です。
最初は不安でも、小さな変更を重ねるうちに「これが私のサイトだ」という愛着が生まれます。
少しずつでも変えていくことで、ブログ運営が楽しくなり、自信につながります。
子テーマを作る前に準備すること
子テーマを安全に導入するためには、必要な準備や確認が大切です。
この章では、作業環境や最低限そろえておくものを紹介します。
必要なものと環境を整える
子テーマを始める前に、準備するものや基本的な操作環境を整えましょう。
どれも特別な知識がなくても進められます。
FTPとは？
FTPは、パソコンとサーバーの間でファイルを送ったり受け取ったりする仕組みです。
「ファイル転送プロトコル」という言葉の略ですが、むずかしく考えなくて大丈夫です。
実際は、パソコン内でフォルダを移動するように、サーバーのフォルダにファイルを置くイメージです。
もし操作が不安でも、画面がWindowsのエクスプローラーに似ていて直感的に使えるので、すぐ慣れます。
子テーマをアップロードするときも、ファイルをドラッグ＆ドロップするだけで完了します。
「難しい専門知識がないと無理」と思わなくて大丈夫なので、安心してください。
サーバー管理画面で簡単に作業できる
多くのレンタルサーバーには「ファイルマネージャー」という機能があります。
これを使えば、ブラウザだけでフォルダ作成やファイルアップロードが完結します。
たとえばXserverの場合、「サーバーパネル」から「ファイル管理」に入って操作します。
画面に沿ってクリックしていくだけで簡単に必要な作業ができます。
わざわざFTPソフトをインストールしなくても、基本的なことはサーバー管理画面で十分進められます。
操作がシンプルなので、初めての方でも安心です。
テキストエディタは特別なソフトがなくてもOK
コードを編集するためのソフトは、最初からパソコンに入っている「メモ帳（Windows）」や「テキストエディット（Mac）」で問題ありません。
特別なアプリを用意しなくても、必要な作業はすべて進められます。
慣れてきたら「Visual Studio Code」という無料のソフトを使うと、コードの色分けや補助機能が便利です。
まずはシンプルなエディタで体験し、慣れたらステップアップすると無理がありません。
「いきなり難しいツールを使わないといけない」と焦らなくて大丈夫です。
FTPソフトは最終手段で大丈夫
ブラウザ操作でうまくいかない場合だけ、FTPソフトを使う方法もあります。
無料で使える「FileZilla」というソフトが定番ですが、最初からインストールする必要はありません。
必要になったときにインストールして使えば十分です。
FileZillaは、ソフトを開いて接続情報を入力し、あとは画面でフォルダを選んでファイルを送るだけです。
インストールのときは、公式サイトからダウンロードするのが安全です。
万一のときの手段として知っておくと安心です。
子テーマを導入する流れを把握
作業に入る前に、子テーマ導入の全体の流れをイメージしておくとスムーズです。
まずフォルダを作成し、style.cssや必要なファイルを準備します。
次にWordPressの管理画面でテーマを有効化します。
有効化後にデザインが崩れないか確認し、必要なら親テーマのスタイルを読み込む設定を加えます。
子テーマを作るだけなら親テーマに影響はありません。
デザインがうまく表示されないときも、親テーマに戻せばすぐ元に戻ります。
本当に大事なのは、子テーマを編集して変更を加えるときに、子テーマフォルダやファイルをコピーしておくことです。
「どの手順で何を確認するか」を先に知っておくと安心感が増します。
子テーマを作成する基本ステップ
準備が整ったら、いよいよ子テーマを作成します。
この章ではフォルダ作成から有効化までを一つずつ手順に沿って解説します。
なお、これから子テーマを作るときは、最初から「カスタマイズしやすい親テーマを選ぶこと」もとても大事です。
テーマによっては、管理画面の「カスタマイズ」や専用設定で多くの調整ができるものがあります。
最初はこうしたテーマを使うことで、コードをほとんど触らずに安心して自分らしいデザインに近づけます。
もし操作に慣れてきたら、少しずつファイルを編集する方法に挑戦しても大丈夫です。
子テーマ用フォルダの作成
まず、WordPressがインストールされている「wp-content/themes」フォルダに、子テーマ用の新しいフォルダを作ります。
フォルダ名は英数字で分かりやすく、「親テーマ名-child」とするのが一般的です。
たとえば親テーマが「twentytwentyone」なら「twentytwentyone-child」とします。
フォルダを作るだけなら、サーバーのファイルマネージャーやFTPソフトの画面で「新しいフォルダを作成」を選んで、名前を入力すれば完了です。
このときフォルダ名に全角文字や記号を使うと不具合が起きる場合があるので注意しましょう。
英語でシンプルな名前にするのが一番安全です。
フォルダができたら、子テーマに必要な「style.css」や「functions.php」をこの中に入れていきます。
「フォルダを作るだけなら怖がらなくて大丈夫」です。
style.cssの記述と設定
「style.css」は子テーマに必要なファイルで、この中に親テーマとの関連づけやデザインの追加を記述します。
まず、テキストエディタで新しいファイルを作り、下のコードを書きます。
|
1 2 3 4 |
/* Theme Name: twentytwentyone-child Template: twentytwentyone */ |
このコードをそのままコピーして貼り付ければOKです。
「Theme Name」は子テーマの名前、「Template」は親テーマのフォルダ名を表します。
書き終えたら、「style.css」という名前で保存します。
このとき文字コードは「UTF-8（BOMなし）」に設定してください。
Windowsの「メモ帳」を使っている場合、「UTF-8」とだけ書かれていることがありますが、そのままで大丈夫です。
Macの場合は「UTF-8（BOMなし）」と「UTF-8（BOMあり）」が選べるエディタもありますが、基本的には「BOMなし」を選ぶと安心です。
下の画像の「文字コード(E)」の部分で「UTF-8」を選びます。
この場所で設定することで、文字化けやエラーを防げます。
最後にこのファイルを、先ほど作った子テーマ用フォルダにアップロードします。
これが子テーマの「設定ファイル」になります。
有効化後にデザインが崩れた場合の対応
子テーマを有効化すると、テーマによってはデザインが崩れて見えることがあります。
これは親テーマのスタイルシート（デザイン情報）が自動で読み込まれないためです。
その場合は「functions.php」を作成して、親テーマのCSSを読み込むコードを追加します。
ただし、最初から無理にfunctions.phpを触らなくても大丈夫です。
必要になったときだけ設定を追加すれば問題ありません。
テキストエディタで新しいファイルを作り、下のコードを書きます。
|
1 2 3 4 5 6 |
<?php function my_theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); ?> |
このコードをそのままコピーして使えば大丈夫です。
保存するときは文字コードを「UTF-8（BOMなし）」に設定してください。
このファイルを「functions.php」という名前で保存し、子テーマフォルダに置きます。
これで親テーマのデザインが読み込まれ、表示が元に戻ります。
多くの場合は「style.css」だけで問題ありませんが、テーマによってはこの手順が必要です。
デザインが崩れたら慌てずにこの対応を試してみてください。
デザインや機能をカスタマイズする
子テーマが用意できたら、いよいよカスタマイズに挑戦です。
色やレイアウトを変えたり、必要に応じて機能を追加したりする基本的な方法を紹介します。
テーマによっては、子テーマでのカスタマイズ手順や注意点が公式マニュアルで詳しく説明されています。
作業前に一度、お使いのテーマの公式サイトや解説ページを確認するのがおすすめです。
CSSでデザインを変える例
デザインの変更は「style.css」にコードを追加して行います。
たとえば見出しの色やフォントを変える場合、次のようなコードを追記します。
|
1 2 3 4 |
h2 { color: #336699; font-family: Arial, sans-serif; } |
このコードを入れると、h2見出しが青系の色に変わり、フォントも指定通りになります。
他にも本文の文字サイズや行間、ボタンのデザインなど、気になる部分を少しずつ変えていきましょう。
「一度にたくさん変えようとしないこと」が失敗を防ぐコツです。
1つの変更を加えたら、画面を更新して変化を確認し、問題がなければ次の変更に進むのがおすすめです。
この積み重ねで、あなたらしいデザインに近づけます。
functions.phpで機能を追加する例
「functions.php」では、便利な機能を自由に追加できます。
たとえば、サイドバーの不要なウィジェットを非表示にしたい場合、下のようなコードを追加します。
|
1 2 3 4 5 6 7 |
<?php function remove_recent_comments_style() { global $wp_widget_factory; remove_action( 'wp_head', array($wp_widget_factory->widgets['WP_Widget_Recent_Comments'], 'recent_comments_style') ); } add_action( 'widgets_init', 'remove_recent_comments_style' ); ?> |
このコードを追加すると、サイドバーから「最近のコメント」のCSSが読み込まれなくなります。
また、オリジナルのショートコードを作ることもできます。
ただし、functions.phpは書き方を間違えると画面が真っ白になったりエラーが出たりすることがあります。
変更前に必ずファイルをコピーしておくと安心です。
不具合が出たときは、修正するか元に戻せばすぐ復旧できます。
子テーマ管理のポイント
カスタマイズを進めるときは、テスト環境や「ステージング機能」を使って安全に確認するのがおすすめです。
本番サイトにいきなり変更を加えると、思わぬ不具合が出る場合があります。
変更を加えたあとは、スマホやタブレットでも表示をチェックしましょう。
特に見出しやボタンの大きさが崩れていないか確認すると安心です。
子テーマの管理は「少しずつ確実に進める」のが一番のコツです。
自分のペースで進めることで失敗のリスクが減り、自信につながります。
何かおかしいと感じたら、焦らずに一度元に戻してから原因を探す習慣をつけると、トラブルを最小限に抑えられます。
デザインや機能をカスタマイズする
子テーマが用意できたら、いよいよカスタマイズに挑戦です。
色やレイアウトを変えたり、必要に応じて機能を追加したりする基本的な方法を紹介します。
なお、最初は「管理画面だけでできる範囲を試すだけでも十分」です。
必要になったときだけコードの編集に挑戦すれば問題ありません。
テーマによっては、子テーマでのカスタマイズ手順や注意点が公式マニュアルで詳しく説明されています。
作業前に一度、お使いのテーマの公式サイトや解説ページを確認するのがおすすめです。
CSSでデザインを変える例
デザインの変更は「style.css」にコードを追加して行います。
たとえば見出しの色やフォントを変える場合、次のようなコードを追記します。
|
1 2 3 4 |
h2 { color: #336699; font-family: Arial, sans-serif; } |
このコードを入れると、h2見出しが青系の色に変わり、フォントも指定通りになります。
他にも本文の文字サイズや行間、ボタンのデザインなど、気になる部分を少しずつ変えていきましょう。
「一度にたくさん変えようとしないこと」が失敗を防ぐコツです。
1つの変更を加えたら、画面を更新して変化を確認し、問題がなければ次の変更に進むのがおすすめです。
この積み重ねで、あなたらしいデザインに近づけます。
functions.phpで機能を追加する例
この方法はどうしてもfunctions.phpを使わないと調整できない場合だけに試す方法です。
ほとんどのデザイン変更はstyle.cssや管理画面のカスタマイズで十分に対応できます。
無理にコードを触らなくても大丈夫なので、まずは簡単な方法から取り組んでください。
できればfunctions.phpの編集は最初は避けるほうが安心です。
もし挑戦する場合は、テスト環境を用意してから試すのがおすすめです。
「functions.php」では、必要に応じて便利な機能を自由に追加できます。
たとえば、サイドバーの不要なウィジェットを非表示にしたい場合、下のようなコードを追加します。
|
1 2 3 4 5 6 7 |
<?php function remove_recent_comments_style() { global $wp_widget_factory; remove_action( 'wp_head', array($wp_widget_factory->widgets['WP_Widget_Recent_Comments'], 'recent_comments_style') ); } add_action( 'widgets_init', 'remove_recent_comments_style' ); ?> |
このコードをそのままコピーして使えば大丈夫です。
テーマによっては管理画面の設定だけで同じ操作ができる場合もあります。
すべてをコードで調整する必要はないので、まずは画面上の設定を確認してから試すのもおすすめです。
ただし、functions.phpは書き方を間違えると画面が真っ白になったりエラーが出たりすることがあります。
変更前に必ず子テーマのファイルをコピーしておくと安心です。
特に親テーマではなく、あなたが追加や変更をする「子テーマのフォルダやファイル」を保存しておくことが大事です。
不具合が出たときは、修正するか元に戻せばすぐ復旧できます。
子テーマ管理のポイント
カスタマイズを進めるときは、少しずつ変更して確認するのが基本です。
本番サイトにいきなり大きな変更を加えると、思わぬ不具合が出る場合があります。
変更を加えたあとは、スマホやタブレットでも表示をチェックしましょう。
特に見出しやボタンの大きさが崩れていないか確認すると安心です。
子テーマの管理は「自分のペースで進めることが一番のコツ」です。
何かおかしいと感じたら、焦らずに一度元に戻してから原因を探す習慣をつけると、トラブルを最小限に抑えられます。
大きな変更を試すときは、テスト環境を使う方法もあります。
その詳しい作り方は別の記事で紹介していますので、必要なときに参考にしてください。
まとめ
子テーマを導入すると、WordPressを安心して自分らしくカスタマイズできます。
最初はハードルが高く見えるかもしれませんが、手順通りに進めれば大丈夫です。
無理にコードを触らず、管理画面でできる範囲から少しずつ試すだけでも十分です。
「これなら私にもできそう」と思えるところから一歩踏み出すことが大事です。
慣れてきたら、style.cssや必要に応じてfunctions.phpに挑戦するのもいい経験になります。
あなたのペースで、ブログを育てていきましょう。
最後までお読みいただきありがとうございます。
今回の記事があなたの役に立ったなら幸いです。
質問疑問ございましたらコメント欄へお願いします。