WordPressでホームページを編集する（簡単で効果的な）方法

WordPressサイトのカスタムホームページを作成したいですか？

WordPressの初期設定では、ホームページにはブログの投稿が表示されますが、編集して別のものを表示させることもできます。例えば、ホームページを商品やサービスを紹介するランディングページにすることもできます。

この投稿では、WordPressのホームページを簡単に編集・カスタマイズする方法をご紹介します。

WordPressホームページとは？

ホームページはWordPressサイトの「フロントページ」です。ユーザーがあなたのドメイン名にアクセスしたときに最初に表示されるページです。

例えば、ブラウザーに「www.wpbeginner.com」と入力すると、当サイトのホームページが表示され、最新のブログ投稿を見ることができる：

なぜWordPressのホームページを編集するのか？

ブログを作ると決めたのなら、ブログの投稿をトップページに表示するのは非常に理にかなっている。

しかし、WordPressを使って中小企業のサイトを構築したり、オンラインショップを運営したりする場合はどうでしょうか？そのような場合、ホームページで製品やプロモーションを強調することを好むかもしれません。

これは、最高のWordPressポップアッププラグインであるOptinMonsterによるビジネスサイトのホームページ例です。彼らのサイトには素晴らしいブログがありますが、それはホームページの焦点ではありません。その代わりに、彼らは本当に明確な行動への呼びかけを持っています。

おそらく、すでにWordPressでカスタムページをホームページとして設定しようとしたが、うまく表示できずに苦労していることだろう。

もしそうなら、あなたは正しい場所にいる。

ホームページの設定から、ニーズに一致したカスタマイズまで、順を追ってご説明します。そうすることで、素晴らしい第一印象を与え、サイト訪問者にサイトのミッションにとって最も重要な行動を促すことができます。

それは、あなたからデジタル製品を購入することかもしれないし、あなたの会員サイトに登録することかもしれないし、あなたの募金キャンペーンに寄付することかもしれない。

ここでは、カスタマイザーのWordPressホームページを作成するために使用できるいくつかの異なる方法を説明します。

これらのクイックリンクを使って、チュートリアルの各パートに直接飛ぶことができる：

動画チュートリアル

Subscribe to WPBeginner

文章での説明がお望みなら、このまま読み進めてください。

テーマカスタマイザーでホームページを編集する

最高のWordPressテーマのいくつかは、あなたのためにホームページのデザインを作成し、あなたが簡単に編集できるようにオプションを提供します。

これらのオプションは、管理サイドバーの外観 ” カスタマイズから設定できます。これでWordPressテーマカスタマイザーが起動し、テーマのライブプレビューが表示されます。

テーマカスタマイザーには、テーマによって異なるオプションがあります。プレビューと利用可能なオプションは、使用しているテーマによって異なって見えるかもしれません。この例では無料のHestiaテーマを使用しています。

ホームページのどこかを編集するには、その横にある青い鉛筆のアイコンをクリックするだけです。ここでは、ホームページ上部の画像、テキスト、ボタンを編集しています。

ホームページからセクションを削除したい場合は、そのセクションの左上にある青い目のアイコンをクリックすればよい。

また、「フロントページのセクション」タブを使用して、セクションを削除し、再び追加することもできます。

ホームページが完成したら、「公開する」ボタンをクリックして公開します。

サイトに掲載されているホームページはこんな感じです：

テーマのビルトインオプションを使うのが、ホームページを設定する最も手っ取り早い方法です。しかし、テーマによっては設定できるオプションが少なかったり、ホームページの見た目に満足できなかったりする場合もあります。

ご心配なく。あなたのホームページを編集し、あなたが望む外観にする方法は他にもたくさんあります。

ブロックエディターでホームページを編集する

WordPressのブロックエディターは、カスタムホームページを作成する簡単な方法ですが、テーマのデザインによって制限されます。

ブロックエディターを使うには、ページ ” すべてのページ画面に行き、先に作成した’ホーム’ページを編集するだけです。

さあ、ページのコンテンツ作りを始めましょう。

チュートリアルのこのパートでは、いくつかの簡単なブロックを使って基本的なホームページを作成します。

まず、ウェルカムメッセージをページに追加します。これは、ページをクリックして入力を始めるだけでできます。WordPressが自動的に段落ブロックを作成してくれます。

テキストを大きくしたい場合は、右側のブロック設定で簡単にできます。プリセットのサイズをクリックするか、’カスタマイザーサイズを設定’アイコンをクリックして、お好きなサイズを入力してください。

また、テキストや背景の「色」オプションを使用して、テキストの色を変更することもできます。

次に、ページに画像を追加します。(+)マークをクリックし、Imageブロックを選択します。

メディアセクションにありますし、検索バーで探すこともできます。

メディアライブラリから画像を選ぶか、新規にアップロードすることができます。

次の段落ブロックには、「最新の投稿はこちら」というテキストを追加した。

そして、「最新の投稿」ブロックを追加し、投稿タイトルだけでなく、抜粋とおすすめ投稿画像を表示するように設定しました。最新の投稿」ブロックについては、WordPressの最近の投稿を表示するチュートリアルで詳しく説明しています。

ホームページには好きなだけブロックを追加することができます。また、あなたのテーマに「全幅」または「サイドバーなし」のテンプレートがあれば、それをページに使用することもできます。

例えば、Astraテーマを使用している場合、Astra Settingsペインからページのレイアウトをカスタマイズすることができます。他のテーマでは、「ドキュメント設定」ペインにセクションが用意されている場合があります。

ホームページに満足したら、画面右上の「更新」または「公開」ボタンをクリックし、変更を反映させます。

完成したホームページはこんな感じ：

ホームページをさらに進化させたいと思ったら？一つのオプションとして、WordPressに最適なブロックプラグインをいくつか試して、お問い合わせフォーム、お客様の声、レビューなどの新しい機能を追加してみるのはいかがでしょうか。

また、WordPress用の強力なテーマビルダーや ページビルダーを使用して、ゴージャスでプロフェッショナルに見えるものを作成するのも良いオプションだ。

このチュートリアルの次のパートでは、テーマビルダーであるSeedProdと、ページビルダーであるElegant ThemesのDiviを取り上げます。

テーマビルダー・プラグインでホームページを編集する

ホームページを編集する最も簡単な方法は、SeedProdを使用することです。これは最高のWordPressテーマビルダープラグインであり、コードを書くことなく美しいサイトレイアウトとカスタムテンプレートを作成することができます。

SeedProdを使用して、カスタムホームページテンプレートを含む完全にカスタムされたWordPressテーマを作成することができます。

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

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

その後、SeedProdを使用して、ゼロから完全にカスタムされたホームページを含むWordPressテーマを簡単に作成することができます。

カスタムWordPressテーマの作成

SeedProd” テーマビルダーのページにナビゲーションして、SeedProdで新しいテーマを作成することができます。ここでは、SeedProdの既製テーマの1つを出発点として使用します。これにより、既存のWordPressテーマが新しいカスタムデザインに置き換えられます。

テーマ』ボタンをクリックすれば、それができる。

さまざまなタイプのサイト用にデザインされた、プロがデザインしたテーマのリストが表示されます。例えば、「モダンビジネス」、「マーケティングエージェンシー」、「モーゲージブローカーテーマ」と呼ばれるテンプレートがあります。

オプションを見て、チェックマークアイコンをクリックして、あなたのニーズに最も一致するものを選択してください。このチュートリアルでは、「デジタル戦略」のテーマを選びます。

テーマを選択すると、SeedProdは必要なテーマテンプレートをすべて生成します。静的ホームページ用のテンプレートとブログのインデックスページ用のテンプレートが含まれます。

ホームページテンプレートの編集

SeedProdでは、ドラッグ＆ドロップのページビルダーを使って、これらのテンプレートを簡単に編集することができます。

ホームページ」テンプレートの下にある「デザインを編集」リンクをクリックするだけです。SeedProdのビジュアルエディターでテンプレートが開きます。

このシンプルなドラッグ＆ドロップビルダーは、右側にページのライブプレビュー、左側にツールバーが表示されます。ページ上にドラッグして新規ブロックを追加したり、マウスで上下にドラッグしてブロックを並べ替えたり、ブロックをクリックしてカスタマイザーすることができます。

テンプレートはすでに魅力的なレイアウトをプロバイダーし、ページに関連するコンテンツをたくさん追加していることに注目してください。あとはあなたのサイトの目的に合うように編集するだけです。

ブロックにマウスオーバーすると、ツールバーが表示されます。

ブロックをクリックすると、左ペインでそのブロックの設定を調整できる。

例えば、見出しをクリックすると、テキストの編集、配置の変更、フォントサイズの変更などができる。

設定を変更すると、右側のプレビューですぐに確認できます。

例えば、テキストを「WordPressについてすべて」に変更します。

設定ページの上部にある「ブロック」アイコンをクリックします。これでブロック表示に戻ります。

次に、ボタンのテキストを編集します。What we do’と書かれたボタンをクリックし、テキストを編集して’See the courses’と書くことができます。

では、ホームページをスクロールして、御社が提供する商品やサービスに関する箇条書きのリストまで来てみましょう。

同じようにブロックをクリックしてテキストを編集することができる。

あなたのホームページは下のスクリーンショットのようになるはずです。

さらに詳細を追加する必要がある場合は、下部の青い「+」アイコンをクリックして、箇条書きの行をもう1行追加することができます。

SeedProdテンプレートには、あなたが使用できる以上のセクションが含まれている可能性があります。ゴミ箱アイコンをクリックするだけで、不要なブロックやセクションを簡単に削除することができます。

例えば、ホームページの「Trusted By」セクションにマウスオーバーします。ツールバーが表示されたら、ゴミ箱内のアイコンをクリックして、そのセクションを削除することができます。

ホームページの一番下にFAQセクションがあります。これはアコーディオンブロックを使って作成されており、ホームページに掲載したい質問と回答を簡単にカスタマイズすることができます。

ブロックをクリックすると、各質問と回答のテキストを編集することができます。

ホームページのカスタマイザーが完了したら、画面上部の「保存」ボタンをクリックしてください。その後、「X」アイコンをクリックしてテンプレートのリストに戻ることができます。

ご覧のように、SeedProdのテンプレート、ドラッグ＆ドロップのインターフェース、便利なブロックは、あなたのサイトのホームページを編集するのに理想的です。さらに詳しいアイデアについては、WordPressでランディングページを作成する方法のガイドをご覧ください。

ブログ・インデックス・テンプレートの編集

ブログのインデックステンプレートも同様に編集できます。この方法については、WordPressでブログ投稿用の区切りページを作成する方法をご覧ください。

方法2を使って、ブログページのカスタマイズのセクションまでスクロールしてください。ここでは、ドラッグ＆ドロップを使って新しいブロックを追加する方法と、ページ上の各ブロックの設定を変更する方法を学びます。

カテゴリー: 投稿ブロックを編集して、投稿を複数のカラムで表示したり、投稿のアイキャッチ画像を表示したり非表示にしたりする方法をご紹介します。

表示する投稿の数や抜粋を表示するかどうかの設定があります。また、投稿タイプ、カテゴリー、タグ、投稿者でフィルターをかけたり、ソート順を変更することもできます。

SeedProdテーマの有効化

テーマテンプレートのカスタマイズが完了したら、新しいカスタムテーマを公開する必要があります。SeedProdテーマの有効化」設定を「YES」に切り替えるだけです。

WordPressのホームページとブログページの設定をすでに変更していない場合は、通知メッセージが表示されます。OK」ボタンをクリックすると、これらの設定が変更されます。

これで、あなたのサイトにアクセスして新しいホームページを表示することができます。

ページビルダー・プラグインでホームページを編集する

Diviは人気のWordPressページビルダープラグインです。WordPressテーマとページビルダープラグインがセットになっており、数十種類の豪華なテンプレートが用意されている。

Diviページビルダーはどのテーマでも使うことができる。このチュートリアルでは、Diviテーマで使用する。

まず、Elegant ThemesのDiviテーマをダウンロード、インストール、有効化する必要があります。これにはDivi builderが含まれているので、区切りインストールする必要はありません。レイアウトパックにアクセスするには、Divi ” テーマオプション ” 更新でユーザー名とAPIキーを入力する必要があります。

テーマのインストールにお困りの場合は、WordPressテーマのインストール方法のステップバイステップガイドをご覧ください。

Diviテーマとページビルダーを立ち上げたら、ホームページを設定しましょう。まず、WordPressダッシュボードのページメニューから、先ほど作成したホームページを編集します。

ホームページの編集を始める前に、右側の「テンプレート」パネルにある「ブランクページ」テンプレートに切り替えることをお勧めします。そうすれば、あなたのホームページにはサイドバー、タイトル、メニュー、その他の初期設定がありません。

次に、画面上部の「Use The Divi Builder」ボタンをクリックします。

次に、画面中央にある「Edit With The Divi Builder」ボタンをクリックする。

Diviのウェルカム画面が表示されます。この画面では、Diviの使い方に関するチュートリアル動画や、Diviを使い始めるための簡単な説明、ページの作成を開始したり、Diviの機能を見学したりするためのボタンが表示されます。

ページ下部の「ビルド開始」ボタンをクリックする。

次に、ページを作成するために使用できるさまざまなオプションが表示されます。ホームページのベースとして、あらかじめ用意されたレイアウトを使用することをお勧めします。そうすることで、素早く簡単にホームページを作成することができます。

Diviには、さまざまなレイアウトが用意されている。数百種類のレイアウトパックがあり、それぞれにホームページを含む数種類のページレイアウトが用意されている。

検索キーワードを入力して検索することもできるし、ボックスにチェックを入れて特定のカテゴリーに当てはまるレイアウトだけを表示することもできる。

旅行ブログ」レイアウトパックを使ってホームページを作成します。

まず、使いたいパックをクリックする：

次に、レイアウトパックの説明と、利用可能なさまざまなページレイアウトが表示されます。ホームページには「ホーム」ページか「ランディング」ページを使いたいでしょう。ここでは「ホーム」オプションを設定します。

レイアウトを選んだら、ページ下部の「このレイアウトを使う」ボタンをクリックします。

Diviが自動的にレイアウトをインポートします。インポートされたレイアウトは、サイトと同じようにページ上に表示されます。レイアウトの一部を編集するには、その部分をクリックするだけです。

Diviは、行（カラムに分割）とモジュールのシステムを使ってページを作成します。テキストモジュールでは、テキストをクリックして画面に直接入力することができます。

ここでは、ヘッダーとその下のテキストを変更した：

その他のモジュールについては、マウスカーソルをそのモジュールに合わせ、「モジュール設定」アイコンをクリックして編集することができます。

ここでは、数字カウンターのひとつを編集している：

ゴミ箱内のアイコンを使って、同じようにモジュールや行を削除することができます。

ホームページには自分の画像を使いたいでしょう。モジュールの設定を編集することで変更できます。

上部の画像は全幅ヘッダーモジュールの背景として設定されているので、そのモジュールのコンテンツ ” 背景で変更する必要があることに注意してください：

ページの変更に満足したら、画面下の「保存」をクリックします。

下段のボタンが非表示になることもある。

表示されない場合は、紫色の「…」ボタンをクリックして開いてください。

私たちのページがサイト上でどのように見えるかは、以下の通りです：

WordPressでホームページを設定する

初期設定では、WordPressはトップページにブログ投稿を表示します。

つまり、ホームページを作成してカスタマイズした後、誰かがあなたのドメインにアクセスしたときにそのページを表示するようにWordPressサイトに指示する必要があります。

WordPressでホームページとブログページを区切る方法を見てみよう。

まず、ページ ” 新規追加に進み、新しいページをブログと名付けます。その後、空白のページを公開します。

ホームページとブログページの準備ができたら、WordPressにこれらのページの使用を開始するよう指示する必要がある。

WordPress管理エリアの設定 ” 読書ページでこれを行うことができます。あなたのホームページの表示」セクションで「静的ページ」オプションを設定する必要があります。その後、トップページとブログページを選択します。

変更を保存」ボタンをクリックして、設定を保存することを忘れないでください。

WordPressは自動的にブログページに最新の投稿を表示します。詳しくは、WordPressでブログページを区切り作成する方法をご覧ください。

これで終わりです！WordPressで見栄えの良いホームページを作成し、無事に設定できました。サイトの他のエリアの編集方法については、WordPressサイトの編集方法に関する究極のガイドをご覧ください。

このチュートリアルでWordPressのホームページを編集する方法を学んでいただけたら幸いです。また、WordPressの必須プラグインや WordPressのSEO対策についてもご紹介しています。

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.