シードプロッド最新ニュース

ビジネスの成長に役立つWordPressのチュートリアル、ヒント、リソース

WordPressでホームページを編集する方法

WordPressでホームページを編集する方法(初心者のための3つの簡単な方法) 

執筆者 著者アバター ステイシー・コリン
著者アバター ステイシー・コリン
ステイシーはWordPressとデジタルマーケティングについて10年以上、その他のトピックについてはもっと長い間執筆している。また、ウェブデザイン、ユーザーエクスペリエンス、SEOにも造詣が深い。
     レビュー レビュアーアバター ターナー・ジョン
レビュアーアバター ターナー・ジョン
ジョン・ターナーはSeedProdの共同設立者です。彼は20年以上のビジネスと開発の経験があり、彼のプラグインは2500万回以上ダウンロードされています。

初めてワードプレスのサイトを立ち上げたとき、私はきちんとしたホームページ、歓迎するような何か、たぶん見出しや行動への呼びかけが表示されると思っていた。その代わり、私の最新記事を載せたブログロールが表示された。私が思い描いていたサイトとは似ても似つかないものだった。

何から始めたらいいのかわからなかった。テーマを変えるべきか?プラグインをインストールする?コードを編集する?しかし、ホームページをもっと簡単にコントロールする方法がいくつかあることがわかった。

このガイドでは、ビルトインのテーマカスタマイザー、WordPressブロックエディター、そしてSeedProdのビジュアルテーマビルダーという、初心者にやさしい3つの方法を使ってWordPressでホームページを編集する方法を紹介します。それぞれ少し異なる方法で、いつどれを使えばいいのか、そして行き詰まりを感じることなく実際の結果を得るにはどうすればいいのかを説明します。

TL;DR:WordPressのホームページを編集するには、テーマカスタマイザー、ブロックエディター、またはSeedProdのドラッグ&ドロップビルダーを使うことができます。WordPressが初めての方でも、それぞれの使い方をご紹介します。

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

ホームページは、人々があなたのウェブサイトで最初に目にするものです。人々の注目を集め、あなたの仕事ぶりをアピールするチャンスです。しかし、注意してください:WebFXによると、38%の人が、見た目がゴチャゴチャしていたり、つまらなかったりすると、ウェブサイトから離脱してしまうそうです。

カスタム・ホームページはこの問題を解決する:

  • サイトの見栄えを良くすること:素敵な写真を使い、はっきりとしたフォントを使い、すべてをきちんと整理する。
  • あなたが特別であることを示す:あなたが何を提供し、なぜそれが彼らにとって良いのかをすぐに伝えましょう。そうすれば、自分が正しい場所にいるかどうかがわかる。
  • 回遊しやすくする:必要なものがすぐに見つからなければ、人々はイライラして離れてしまいます。カスタム・ホームページは、探し物を簡単にします。
  • 興味深いコーテントを表示最新のブログ記事、お客様のレビュー、イチオシの商品などを紹介することで、人々の興味を引き、また来てもらえるようにしましょう。
  • オーディエンスに直接語りかけるカスタムホームページは、あなたがリーチしたい人々に直接語りかけることができ、彼らにとってより興味深いものになります。
  • 人々があなたの望むことを簡単にできるようにする:何かを買ってもらいたい、Eメールに登録してもらいたい?カスタムホームページは、次に何をすべきかを明確にします。

WordPressでプロフェッショナルなホームページを作るのは、思っているより簡単です。初めての方でも大丈夫です。以下に簡単な方法をご紹介します。

WordPressでホームページを編集する方法:

1.トップページとブログページを分ける

簡単なヒントカスタム・ホームページを設定するには、「ホーム」と「ブログ」の2つのページを作成し、設定 " 読む に進み、ホームページと投稿ページとして割り当てます。

ブログの最新記事を表示する代わりにカスタムホームページを使いたいですか?ビジネスやブログで人気のある選択です。

WordPressでホームページとブログページを別々に設定する方法をご紹介します。

新しいホームページとなる空白のページを作ることから始めよう:

  • WordPressのダッシュボードにログインします。
  • ページ " 新規追加.
  • ページのタイトルを "Home "または "Homepage "とする。
  • Publishをクリックする。
ホームページ用の新しいページを作成する

では、ブログ記事を表示するページを作ってみよう:

  • Publishをクリックする。
  • ページ " 新規追加.
  • このページのタイトルを「ブログ」とする。
WordPressブログの新しいページを作成する。

では、WordPressに新しいページを使うように指示しよう:

  • 投稿ページ」では、「ブログ」ページを選択する。
  • 設定 " 読書.
  • ホームページの表示」で「静的ページ」を選択します。
  • つのドロップダウンメニューが表示されます。"Homepage "には、"Home "または "Homepage "というタイトルをつけたページを選びます。
  • 投稿ページ」では、「ブログ」ページを選択する。
WordPressの読書設定で、静的ホームページとブログページを設定する。

ページを設定したら、「変更を保存」ボタンをクリックして設定を保存します。

2.テーマビルダーを使ってWordPressのホームページを編集する

簡単なヒントSeedProd Proを使用すると、ドラッグアンドドロップのブロックを使用して、WordPressのホームページ全体を構築し、カスタマイズすることができます - コードは必要ありません。

SeedProd ドラッグ&ドロップWordPressウェブサイトビルダー

WordPressのホームページをデザインするパワフルでコードフリーの方法をお探しですか?SeedProdはそれを簡単にするWordPressのための最高のウェブサイトビルダーの一つです:

  • ドラッグ&ドロップエディター:コーディング不要で、思いつく限りのレイアウトを作成できます!
  • カスタマイズ可能なテンプレート:あらかじめ用意されたデザインから始めて、自分好みのデザインに仕上げましょう。

SeedProdを使えば、技術的な専門知識がなくても、ユニークなホームページを含む完全なカスタムWordPressテーマを構築することができます。

注: SeedProdには無料版もありますが、テーマビルダー機能にアクセスし、ホームページテンプレートを編集するにはPro版が必要です。

まず、SeedProdプラグインをダウンロードし、WordPressウェブサイトにインストールしてください。WordPressプラグインのインストール方法については、こちらのステップバイステップガイドをご覧ください。

ウェブサイトを選ぶ キット

SeedProdがインストールされたら

  • テーマテンプレートキットボタンをクリックします。
  • WordPressダッシュボードのSeedProd " Theme Builderにアクセスしてください。
SeedProdテーマテンプレートキット

プロがデザインしたテーマのライブラリが表示されます。これらの構築済みテーマは、以下のような様々なウェブサイトに最適です:

  • ウェディング
  • ポートフォリオ
  • 代理店

各テーマには、カスタムヘッダー、カスタムフッター、カスタムサイドバー、カスタムホームページの設定が付属しています。

テーマライブラリをブラウズして、あなたのスタイルに合ったテンプレートを見つけてください。

この例では、「写真ウェブサイト」テーマを使用します。テーマにカーソルを合わせ、チェックマークアイコンをクリックして選択します。

SeedProd写真サイトのテーマテンプレート

これは、すぐにカスタマイズできるホームページを含む、新しいWordPressテーマのすべてのテンプレートを作成します。

Seedprodテーマ・ビルダー

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

では、ホームページをカスタマイズしてみよう。

テンプレートの一覧からHomepageテンプレートを探します。テンプレートにマウスカーソルを合わせ、[デザインを編集]リンクをクリックします。

SeedProdを使ってWordPressでホームページを編集する方法

SeedProdページビルダーが開き、ビジュアルエディターでホームページをカスタマイズできます。ご覧ください:

  • 右側:編集中のホームページのリアルタイムプレビュー。
  • 左側:WordPressのブロック、セクション、ページに追加する設定。
ページビルダーのホームページテンプレート

ホームページの要素をカスタマイズするには、その要素をクリックするだけです。左側にパネルが開き、以下のことができます:

  • コンテンツの編集(テキスト、画像など)
  • スタイリングの変更(色、フォントなど)
  • 表示オプションの調整

例えば、見出しやテキスト要素をクリックすると、デフォルトのコンテンツがあなたのビジネスに関する情報に置き換わります。

WordPressホームページの見出しとテキストを編集する

それでは、あなたのポートフォリオを紹介するギャラリーを追加してみましょう。

ギャラリーブロックをクリックします。左側のパネルが開き、パソコンやWordPressのメディアライブラリから画像をアップロードすることができます。

SeedProdエディタで、Galleryブロック要素を探します。その上にマウスカーソルを置くと、オレンジ色のアウトラインが表示されます。

WordPressでホームページギャラリーを編集する

ギャラリーブロックパネルの[詳細設定]タブをクリックします。ここでは、列の数、画像間の間隔、画像サイズなどを調整することができます。

WordPressのホームページをカスタマイズするためのギャラリーの詳細設定

私について」のセクションを、もっと実用的なものに置き換えよう:

  • ゴミ箱アイコンをクリックしてセクションを削除します。
  • ホームページのテンプレートを下にスクロールし、「自己紹介」セクションを見つける。
  • そのセクションにマウスカーソルを合わせます。ゴミ箱のアイコンが表示されます。
ホームページ・テンプレート・セクションの削除

次に、行動喚起を追加しよう:

  • 利用可能なセクションをブラウズし、あなたが好きなアクションセクションに事前に設計された呼び出しを選択します。
  • SeedProdエディタのSectionsタブ(通常は左側にあります)に移動します。
SeedProd コール・トゥ・アクション・セクション

SeedProdは、自動的にあなたのホームページの一番下に行動喚起を追加し、その内容を編集することができます。

WordPressでホームページセクションを編集する

下の写真のように、別の写真を追加し、説明文を編集し、行動喚起ボタンをカスタマイズしました。

新しいカスタム・ホームページ・テンプレート・セクション

ホームページのカスタマイズが完了したら、画面上部の「保存」ボタンをクリックします。その後、「X」アイコンをクリックしてテンプレートのリストに戻ります。

カスタムWordPressホームページを有効にする

新しいテーマとホームページを公開する準備ができたら、「Enable SeedProd Theme」設定を「YES」の位置に切り替えます。

seedprodテーマを有効にする

これで、あなたのウェブサイトのトップページをはじめ、サイト上のすべてのページに、完全にカスタム化されたデザインが表示されるようになります。

カスタム・ホームページ・プレビュー

SeedProdで編集された説得力のあるホームページ

私たちの言葉を鵜呑みにする必要はありません。多くのブランドがSeedProdを使ってホームページを完全に編集し、素晴らしい結果を出しています。

DuplicatorがWordPressのホームページをどのように変えたかをご紹介します:

3.テーマカスタマイザーを使ってWordPressのホームページを編集する

クイックヒントWordPressカスタマイザーを使えば、ダッシュボードからライブプレビューを見ながらホームページのセクション、テキスト、画像を直接編集することができます。

WordPressの素晴らしいところは、見栄えの良いウェブサイトを作成するために使用できるカスタマイズ可能なWordPressテーマが大量に用意されていることです。さらに良いことに、最高のWordPressテーマには、簡単にカスタマイズできるホームページのデザインが付属していることがよくあります。

テーマカスタマイザーを開く

テーマのオプションは、WordPressのダッシュボードから外観 " カスタマイズに移動して見つけることができます。これによりWordPressテーマカスタマイザーが起動し、テーマのライブプレビューが表示されます。

WordPressのライブテーマカスタマイザーでホームページを編集できる

WordPressテーマカスタマイザーは、WordPressテーマによって異なるオプションを表示します。表示されるプレビューや利用可能なオプションは、使用しているテーマによって、私たちの例とは異なって見えます。また、カスタマイザーを使って、メニュー、ウィジェットエリア、その他のページ設定を編集することもできます。

ホームページのセクションを編集する

ホームページの任意のエリアを編集するには、各要素の横にある青い鉛筆のアイコンをクリックします。この例では、ホームページ上部の画像、テキスト、ボタンを編集しています。

ライブプレビューとカスタマイザーでWordPressのホームページを編集する

青い目のアイコンをクリックして、ホームページのセクションを削除することもできます。また、カスタマイザーの[フロントページセクション]タブをクリックし、目のアイコンをクリックすることで、ページにセクションを追加することも可能です。

ライブカスタマイザーでのホームページセクションの追加と削除

ホームページの見栄えに満足したら、「公開」ボタンをクリックしてページを公開しましょう。

編集を終えたホームページはこんな感じだ。

WordPressテーマカスタマイザーを使ったカスタムWordPressホームページのプレビュー

WordPressのホームページを編集するのに、テーマに組み込まれているカスタマイズ設定を使うのは、簡単な変更を加える必要がある場合には優れた選択肢です。しかし、必要なオプションがすべて揃っているとは限りません。

次はもう少しカスタマイズのオプションを見てみよう。

4.ブロックエディターを使ってホームページを編集する

クイック・ヒント:ブロックを使って他のページと同じようにホームページを編集できます。数回クリックするだけで、テキスト、画像、最新のブログ記事を追加できます。

ホームページをゼロから作成・編集し、独自のレイアウトを使いたい場合は、WordPressのブロックエディタ(Gutenberg)を使えば簡単にできます。

これを行うには、先ほど作成した新しい「ホームページ」に移動し、「編集」をクリックします。それから、ページのコンテンツを作り始めることができます。

WordPressのブロックエディターを使って、WordPressのホームページを編集することができます。

ワードプレスブロックを追加する

いくつかのシンプルなWordPressブロックを使って、基本的なホームページのレイアウトを作成します。

まず、ユーザー体験を向上させるために、ウェルカムメッセージをページに追加しましょう。これを行うには、ページをクリックしてメッセージを入力し始めます。WordPressが自動的に段落ブロックを作成します。

段落ブロックを使ってホームページのウェルカムメッセージを書く

メッセージを大きくするには、右側のブロック設定に移動します。次に、プリセットサイズの見出しの下にあるドロップダウンメニューからテキストサイズを選択することができます。

WordPressホームページのウェルカムメッセージの文字サイズを変更する

お望みであれば、カラー設定セクションでテキストの色を変更できます。

WordPressホームページのメッセージの文字色を変更する

次に、ページに画像を追加してみよう。

そのためには、エディターツールバーのプラス(+)アイコンをクリックし、画像ブロックを選択します。画像ブロックは メディア見出しの下にあります。

WordPressの画像ブロックを使ってホームページに画像を追加する

メディアライブラリから画像を選択するか、コンピュータから画像をアップロードすることができます。

メディアライブラリから画像を選択するか、コンピュータから画像をアップロードします。

次に、訪問者に最新のブログ記事をチェックするよう求める段落ブロックを追加する。

その後、「最新の投稿」ブロックを追加して、最近の投稿を表示することができます。ブロックの設定は画面の右側で編集できます。ここでは、注目の画像、投稿の抜粋、タイトルを表示するようにブロックを設定しました。

WordPressの最新記事ブロックを追加し、設定をカスタマイズする

ホームページのブロックはいくつでも選択可能。サイドバーを使用しない、または全幅にするためにページテンプレートを変更することも可能です。ただし、これは使用するWordPressテーマによって異なります。

この例では、Hestia WordPressテーマを使用しています。

変更が完了したら、画面右上の「Publish」ボタンをクリックします。

そして、完成したホームページをプレビューすることができる:

以下は、WordPressのブロックエディタを使って編集したホームページの例です。

ホームページデザインのベストプラクティス

簡単なヒント強力なホームページには、明確な見出し、ビジュアル、社会的証明、1つの主要なコールトゥアクションが含まれます。

WordPressのホームページを編集する技術的な面を学びました。さあ、輝きを放ちましょう。優れたデザインのホームページは、訪問者を引き込み、行動へと導きます。

ここでは、その方法を紹介しよう:

第一印象が重要

  • あなたのストーリーは?人は長くは留まりません。訪問者の26%から70%は、たった1ページ見ただけでウェブサイトを去ってしまいます。だからこそ、あなたが提供するものを説明するキャッチーな見出しは、人々の興味を持続させるために超重要なのです。(出典:FullStory)
  • フックとなる見出し:聴衆のニーズや欲求に直接語りかける、明確で説得力のある見出しを使いましょう。
  • ポップなビジュアル:ビジュアルは大きな違いを生む。写真を加えることでクリックスルー率が27%アップし、なんと42%もアップするという研究結果もあります。人はビジュアルに惹かれるので、ビジュアルを使って注目を集めましょう。(出典:Sproutworth)
  • 何をすべきかを示す:折り目の上に明確で魅力的なコールトゥアクションを掲載することで、ユーザーを次のステップへと導きます。
Leadfocus ホームページデザイン例

B2BマーケティングサービスのLeadfocusは、業界のシリアスな雰囲気を捨て、爽やかで親しみやすいホームページを作りました。これは、3Dの絵文字やアニメーションを使った遊び心のある表現と、カジュアルでありながら洗練された巧みなコピーライティングによって実現されている。躍動感のあるビジュアルと透明性のある価格設定によって強化されたこの独特のトーンは、B2Bマーケティングをよりシンプルで楽しいものにするという同社の使命を明確に伝えている。

シンプルに、スムーズに

  • 水のように流れるほとんどの人(94%)が、ウェブサイトを簡単に見つけることが最も重要であることに同意しています。わかりにくいメニューや不便なレイアウトでは、訪問者は逃げてしまいます。(出典:Avidly)
  • 簡単なナビゲーション:メニューはとてもシンプルで使いやすいものにしましょう。必要なページのみを掲載し、ヘッダーは常に見えるようにスティッキーにすることを検討しましょう。
エイティワン ホームページデザイン

EightyOneの代理店ウェブサイトは、動画とスクロールトリガーのインタラクションを統合したヒーロー画像ですぐに魅了されます。エージェンシーのロゴの "O "の中で再生されている部分的に見えない動画は、ユーザーがスクロールするにつれて拡大し、主要なブランドや組織とのEightyOneの印象的な仕事のポートフォリオのショーケースへとユーザーを引き込みます。

コンテンツは依然として王である

  • 機能よりもベネフィット:何をやっているかを伝えるだけでなく、それがどのように人々の生活をより良くしているかを伝えよう!
  • 信頼を築く:お客様の声は強力です。一人の訪問者から得られるお金を、なんと62%も増やすことができるのです。人は他人の言葉を信用するものなので、良い評価をうまく利用しましょう。(出典:Delighted)
  • Show, Don't Just Tell:ビジュアル、ビデオ、インフォグラフィックスで文章にスパイスを加え、メッセージをより魅力的で印象的なものにする。
Grammarlyホームページデザイン

Grammarlyは、新しいAIライティングアシスタントのプロモーションにホームページを捧げている。魅力的な見出しと小見出しのコンビは、「責任あるAIによるライティングと評価の向上」という核となるベネフィットを即座に伝えます。デザインはGrammarlyの焦点に忠実で、テキストを優先し、ビジュアルは行動喚起、特徴的なアニメーション、社会的証明のロゴのみに戦略的に使用しています。

訪問者を顧客に変える

  • 明確な行動喚起:行動への呼びかけを少し変えるだけでも、大きな違いが生まれます。例えば、ボタンのたった2つの単語を変えただけで、寄付が6000万ドル増えた(出典:WebFX)。
  • 戦略的な配置:ページ全体にCTAを配置し、価値のあるものを強調した後に配置するのが理想的です。
  • A/Bテストはあなたの味方です:様々なレイアウト、見出し、CTAを試して、読者にとって最も効果的なものを見つけましょう。
オムソム ホームページデザイン

オムソムのホームページは、おいしい第一印象を与える。食欲をそそる料理のヒーロー画像が瞬時に食欲をそそり、「本物のアジアの味を数分で」という見出しがスピードと利便性を約束しています。スクロールしていくと、オムソムは製品のシンプルさを詳しく説明し、潜在的なためらいを解消し、シームレスな購入への道のりのために戦略的に行動喚起を組み込んでいます。

よくあるホームページの問題のトラブルシューティング

どんなに優れたガイドでも、計画通りにいかないことはある。ホームページに問題があっても慌てないでください。よくある問題の解決策をご紹介します:

ホームページが更新されない

これはイライラさせますが、通常は簡単に解決できます。まず、ブラウザのキャッシュとクッキーをクリアしてみてください。

それでもうまくいかない場合は、変更を公開したかどうか再確認してください(WordPressエディターで「更新」または「公開」ボタンを探してください)。

それでもダメですか?ウェブサイトのホストがページをキャッシュしている可能性があります。キャッシュを削除するか、キャッシュプラグインを一時的に無効にしてみてください。

ホームページの404エラー

404エラーは、あなたのホームページが見つからないことを意味します。これはパーマリンクに問題がある可能性があります。WordPressダッシュボードの設定 " パーマリンクにアクセスし、"変更を保存 "をクリックしてください。 

パーマリンクの変更を保存する

別の原因として、テーマやプラグインとの競合が考えられます。一時的にデフォルトのテーマに切り替えて、問題が解決するかどうか試してみてください。

モバイル・ディスプレイの悩み

あなたのホームページがモバイルデバイスで不格好に見える場合、テーマがレスポンシブでない可能性があります。レスポンシブ・テーマは、異なる画面サイズに合わせて自動的に調整します。

モバイルフレンドリーなテーマに変更するか、レスポンシブ機能を備えたページビルダーを使用することを検討しましょう。すでにレスポンシブテーマを使用している場合は、レイアウトを乱している可能性のあるプラグインの競合やCSSの問題がないか確認してください。

用語集ホームページ編集用語集

  • 静的ホームページ:最新のブログ記事を表示する代わりに、固定されたフロントページを表示します。
  • テーマカスタマイザー:テーマの設定を視覚的に微調整するためのWordPress内蔵ツール。
  • ブロックエディター:Gutenbergとしても知られ、ドラッグ可能なコンテンツブロックを使ってページを構築できる。
  • テーマビルダー:コードなしで完全なカスタムテーマを作成できるプラグイン(SeedProdのようなもの)。

WordPressホームページの編集に関するFAQ

WordPressサイトのフロントページを変更するには?
設定 " 読むメニューで静的ページを設定することで、WordPressのフロントページを変更することができます。これにより、カスタムファーストページをデザインし、デフォルトのホームページとして設定することができます。
WordPressでカスタムホームページを手動で作成するには?
ワードプレスで、希望のコンテンツとレイアウトで新しいページを作成します。次に、設定 " 読むにアクセスし、ホームページとして「静的ページ」を設定します。作成したページを選択し、変更を保存します。これで、あなたのカスタムページが訪問者に最初に表示されるようになります。
WordPressでホームページボタンを追加するには?
WordPressのナビゲーションメニューには「ホームページ」ボタンが組み込まれていませんが、簡単にホームページにリンクするボタンを追加することができます。ダッシュボードのメニューオプションを使い、ウェブサイトのURLと「ホーム」またはお好みのラベルをテキストにしたカスタムリンクを追加してください。

次のステップ

この記事がWordPressでホームページを編集する方法を学ぶのにお役に立てば幸いです。

私たちの一番のお勧めは、SeedProdのドラッグ&ドロップ・テーマ・ビルダーを使うことです。しかし、私たちはあなたのウェブサイトのニーズに最も適したオプションを選択することをお勧めします。

WordPressサイトのカスタマイズには、以下のWordPressチュートリアルも参考になるでしょう:

お読みいただきありがとうございました!あなたのご意見をぜひお聞かせください。YouTubeXFacebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。

著者アバター
ステイシー・コリン ライター
ステイシーはWordPressとデジタルマーケティングについて10年以上、その他のトピックについてはもっと長い間執筆している。また、ウェブデザイン、ユーザーエクスペリエンス、SEOにも造詣が深い。

情報開示私たちのコンテンツは読者支援型です。つまり、あなたが私たちのリンクをクリックした場合、私たちはコミッションを得る可能性があります。私たちは、読者に付加価値をもたらすと信じる製品のみを推薦します。