Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressテーマのカスタマイズ方法(初心者ガイド)

WordPressテーマをカスタマイズすることは、あなたのサイトをあなたのニーズに合わせてユニークなものにする素晴らしい方法です。色、フォント、レイアウトを調整したい場合でも、新しい機能を追加したい場合でも、テーマをカスタマイズすることで、サイトの外観と機能を向上させることができます。

WordPressが初めての方でも、テーマのカスタマイズの基本を理解することで、サイトの外観やユーザー体験をよりコントロールできるようになります。

長年にわたり、WordPressを使用した数多くのサイトをビルトインし、常に新鮮さを保つよう努めてきました。頻繁にレイアウトを更新し、さまざまなデザインを試すことで、サイトにモダンな印象を与えています。

レイアウトを改良することで、ユーザー体験を向上させるとともに、魅力的で機能的なサイトを維持しています。この継続的なプロセスにより、魅力的でユーザーフレンドリーなサイトを維持するために何が最適かを理解することができました。

この投稿では、WordPressテーマを簡単にカスタマイズし、自分だけのテーマにする方法をご紹介します。

Customizing a WordPress theme for beginners

以下は、このガイドで取り上げるトピックのリストである:

準備はいいかい?始めよう

WordPressテーマをカスタマイズする理由

WordPressのテーマは、一般的なサイトのニッチ向けにデザインされています。例えば、様々な中小企業サイト写真家、ブロガーなどのテーマがあります。

テーマを選んだら、自分の必須条件に合わせてカスタマイズする必要がある。

例えば、カスタマイザー・ロゴやブランド・カラーを使ったり、レイアウトを少し調整したり、フォント・サイズを変えたり、独自の画像を使ったり、などなど。

このようなカスタマイザーの一部は、他のウェブサイトと同じように見えるのではなく、あなたのビジネスやブランドを真に表現するウェブサイトを作るために必要なものです。

どのWordPressテーマを選ぶかによって、これらのオプション設定はテーマによって大きく異なる場合があります。

例えば、有効化したテーマの中には、サイドバーを右から左に移動させるオプションを提供するものもあれば、レイアウトにサイドバーすらないものもある。

とはいえ、コードを一行も書かずにWordPressテーマを簡単にカスタマイズし、次のレベルに引き上げる方法を見てみましょう。

デフォルトテーマのカスタマイザーを使う

WordPress5.9でフルサイト編集が可能になりました。

現在、フルサイト編集機能をフルサポートした新規テーマはあまり市場に出回っていない。

しかし、WordPressテーマをカスタマイズするための使い方をご紹介します。また、レガシーなWordPressカスタマイザーの使い方や、初心者におすすめの完全なWordPressサイトビルダーツールの使い方もご紹介します。

WordPressのフルサイトエディターを使ってテーマをカスタマイズする

WordPressテーマがフルサイトエディターをサポートしている場合、WordPress管理画面サイドバーの外観オプションの下にエディターメニューが表示されます。

Launch new full site editor in WordPress

クリックするとフルサイトエディターが起動します。

このエディターは、WordPressの投稿やページを書くときに使うブロックエディターと同じです。

Full site editor

左側からブロックを追加することで、テンプレートに新しい要素を追加できます。

通常のブロックとは別に、ナビゲーション、ロゴ、投稿クエリーループなどのサイト全体のブロックを使用することもできます。

各ブロックにはそれぞれ設定があり、色やタイポグラフィ、その他のオプションを変更することができます。

Block settings

WordPressテーマには、さまざまなセクションをすばやく作成するための追加パターンも用意されています。

これらは「パターン」タブの下にあります。

Add patterns to your layouts

上部のテンプレート名をクリックし、編集するテンプレートを選択することで、サイトのさまざまなエリアを編集することができます。

より多くのテンプレートを表示するには、下部にある「すべてのテンプレートを見る」をクリックします。

Borwse templates

テーマで編集可能なテンプレートのリストが表示されます。

エディターで開くには、テンプレート名をクリックするだけです。

Select a template to edit

テンプレートは同じブロックエディターで開きます。

ここから好きなように編集できる。

Editing posts template

設定が完了したら、上部の保存ボタンをクリックして設定を保存します。これで、ライブサイトにアクセスして、変更をリアルタイムで表示できるようになります。

フルサイトエディターは、WordPressテーマをカスタマイズするための強力で柔軟な方法です。

Save changes to your theme

しかし、これは全く新しい機能であり、現時点では多くのWordPressテーマが対応していない。

WordPressでレガシーテーマカスタマイザーを使う

現在のテーマがまだフルサイトエディターをサポートしていない場合は、WordPressのレガシーテーマカスタマイザー機能を使用します。

その場合、WordPressのダッシュボードから外観 ” カスタマイズのページでテーマをカスタマイズすることができます。

Launching WordPress theme customizer

クリックするとテーマカスタマイザーが画面に表示されます。

左側にカスタマイザー設定、右側にサイトのライブプレビューが表示されます。

WordPress theme customizer

ライブプレビューでは、サイトの編集可能エリアが鉛筆アイコンでハイライトされます。

左側のパネルで各オプションを展開し、設定を変更することができます。

expanded option in theme customizer

左パネルのオプションの数はWordPressテーマによって異なります。

しかし、ほとんどのテーマは、サイトのキャッチフレーズ、ウィジェット、ホームページ設定、メニュー、追加CSS設定などの基本をサポートしています。

詳しくは、WordPressテーマカスタマイザーを使って テーマを編集する方法を表示しています。

WordPressテーマをフルコントロールでカスタマイザーする

デフォルトのWordPressテーマのカスタマイズオプションは、使用しているWordPressテーマによって異なります。

テーマが機能をサポートしている場合、カスタマイザーやフルサイトエディターを使ってカスタマイズできるかもしれません。そのため、WordPressテーマをカスタマイズする能力が制限されます。

さらにカスタマイズしたり、サイト用のカスタマイザーWordPressテーマを作成したい場合はどうすればいいのでしょうか?

そこでSeedProdの 出番である。

市場で最高のWordPressページビルダーです。美しいサイトレイアウトを作成したり、コードを書くことなくカスタマイザーを作成することができます。

まず、SeedProdプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化した場合、ライセンスキーを入力する必要があります。この情報は、SeedProdサイトのお客様のアカウントの下にあります。

SeedProd license key

その後、カスタマイザーのWordPressテーマを作成するか、サイトの個別ページを作成するかを選択する必要があります。

SeedProdはその両方が可能で、両方のアプローチをお見せします。

SeedProdでWordPressの個別ページをカスタマイズする

このアプローチは非常に柔軟で、オンデマンドのページレイアウトを簡単に作成できる。

例えば、製品やマーケティングキャンペーン用のカスタムランディングページをデザインしたり、訪問者がメールリストに登録した後に送るサンキューページを作成したりすることができます。

SeedProd ” ランディングページの画面に移動し、新規ランディングページの追加ボタンをクリックしてください。

Add new landing page

次に、ページのテンプレートを選択する必要があります。

このテンプレートは出発点として使用され、後でその中のすべてを変更することができます。また、真っ白なキャンバスから始めることもできます。

Select a template

続行するにはテンプレートをクリックするだけです。

SeedProdは、あなたのページのタイトルを提供し、URLを選択するように求めます。

Page name and URL

必要事項を入力後、「保存してページの編集を開始する」ボタンをクリックします。

ドラッグ&ドロップのインターフェースであるSeedProdページビルダーが起動します。

Editing a page layout in SeedProd

左側には、ページレイアウトに追加できるブロックとセクションが表示され、右側には編集可能なライブプレビューが表示されます。

ページのどの要素でも、ポイント&クリックするだけで編集できる。

Point and click to edit any element

また、左カラムからレイアウトに新しいブロックや完全なセクションを追加することもできます。

詳しくは、WordPressでランディングページを作成する方法のチュートリアルをご覧ください。

SeedProdは、あなたのウェブサイトを作るために必要なすべての一般的なWebデザイン要素が付属しています。お問い合わせフォーム、オプトインフォーム、ログインフォーム、テスティモニアル、プログレスバー、ヘッダー、アコーディオン、ナビゲーションメニュー、アイコンボックス、その他多数が含まれています。

Add new blocks

また、WooCommerceとEasy Digital Downloadsを完全にサポートしています。

つまり、WooCommerceまたはEDDブロックを使用して、サイト上の任意の場所に商品を表示したり、カスタム購入手続きを作成したり、オンラインストアのお買い物カゴページをデザインしたりすることができます。

WooCommerce blocks

ページのデザインとレイアウトに満足したら、右上の保存ボタンをクリックしてください。

ここから、ドロップダウンからページを公開するか、テンプレートとして保存するかを選択することもできます。

Save or publish a page

以上です!このプロセスを繰り返すことで、サイト上にさらにカスタムページを作成することができます。

SeedProdでWordPressにカスタムテーマを作成する

ブログ、ビジネスサイト、eコマースストアで真にユニークなデザインを作りたいなら、このアプローチを強くお勧めする。

この方法では、同じドラッグ&ドロップ式のページビルダーを使って、一から自分のカスタムWordPressテーマをデザインすることになる。

最良の部分は、あなたのサイトにインストールされているテーマに関係なく、あなたのSeedProdカスタムテーマが動作することです。あなたの創造的なデザインに完全な自由を与え、WordPressのための最高のテーマビルダーにします。

始めるには、SeedProd ” テーマビルダーのページに行き、テーマボタンをクリックするだけです。

Create SeedProd theme

SeedProdは、あなたが選択するスターターテーマの束を表示します。

これらのテーマのあらゆる面を完全に変更することができる。

Choose theme template

テーマを選択すると、SeedProdがすべてのテーマテンプレートを生成します。

テンプレートファイルの下にある「デザインを編集」リンクをクリックするだけで編集できます。

Editing a theme template

これにより、ドラッグ&ドロップビルダーでテンプレートが起動し、右カラムにライブプレビュー、左カラムに編集パネルが表示されます。

ポイント&クリックで項目を編集したり、左カラムから要素をドロップするだけ。

Add new block to your template

SeedProdには、サイト全体の編集に特化したブロックも用意されています。

これらは、コンテンツループ(ブログ投稿用)、投稿タイトル、おすすめ投稿画像などを表示するために使用できるダイナミックブロックです。

Add template tag blocks

テーマの変更が終わったら、変更を保存することを忘れないでください。

このプロセスを繰り返して、他のテンプレートを自分好みに編集してください。

設定が完了したら、SeedProd ” Theme Builderページに行き、「SeedProdテーマを有効化」オプションの横にあるスイッチを「はい」に切り替えてください。

Enable SeedProd theme

SeedProdはWordPressテーマを作成したカスタムテーマに置き換えます。

SeedProd WordPressテーマビルダーについてさらに詳しく知りたい方は、コードを書かずにカスタムWordPressテーマを作成する方法についてのチュートリアルをご覧ください。

WordPressテーマを自分でカスタマイズする時間がない?WPBeginnerプロサービスにお任せください!テーマのカスタマイザーやランディングページの作成など、1回限りのプロジェクトのために、手頃な価格のプレミアムWordPressサポートを提供しています。時間を節約し、デザイン作業はお任せください。WordPress サポートサービスを今すぐご予約ください!

この投稿が、WordPressテーマを自分好みにカスタマイズする方法を学ぶ一助となれば幸いです。WordPressの子テーマを作成する方法についての初心者向けガイド、またはWordPressテーマを最新の標準に照らし合わせてテストする方法についての究極のガイドもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

7件のコメント返信を残す

  1. Mrteesurez

    I prefer using a page builder as it gives more flexibility to customize every part of the website without coding, some pagebuilder like Seedprod and others also offer some pre-built templates that makes design easier.

  2. Lisa

    I’m currently building my first website using the full site editor, the Spectra One theme and the Spectra plugin. I’m a bit confused about whether or not I need to create a child theme. Some people seem to suggest that a child theme isn’t necessary when using the full site editor. Others say it’s only necessary when adding custom CSS. Can you solve this mystery for me, please?

    • WPBeginner Support

      Some themes have their own specific ways that they work that are not normal for other themes. For your theme it should not require a child theme at the moment but if you check with the theme’s support they can let you know their current requirements.

      管理者

  3. Pranav

    How can we customize a theme without using block editor? Like if we are working with the classic editor?

    • WPBeginner Support

      The methods in this guide do not require the block or classic editor.

      管理者

  4. Milly Ng

    Seed Prod looks like it is rather user friendly. I will give it a try. Thank you!

    • WPBeginner Support

      Glad you think so and we hope you enjoy using it!

      管理者

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。