ブログ

初心者でもWordPressでホームページが作れる7ステップ

2020年4月7日

読者

WordPressでホームページを作りたいけど、難しそうな気がして自分にできるか不安。

少し調べてみると、レンタルサーバーやドメインが必要らしいけどよくわからなくて....

何から手をつければいいでしょうか。

こんなお悩みを解決する記事です。

WordPressはSEOに強いため、あなたが作ったホームページが検索で上位に表示されやすく、ホームページを作成する上で世界中のユーザーに選ばれているシステムです。

しかし初心者の方は「WordPressでのホームページ作成は難しそうだ」と感じ、使用するのをためらっている方も多いことでしょう。

この記事では、はじめての方でも挫折せずにホームページが完成できるように、操作方法などを画像付きで解説しています。

ぜひ、この記事に書いている通りの手順でホームページの作成を行ってみて下さい。

早速、WordPressでホームページを作る流れを確認していきましょう。

7ステップに分けて解説します。

ホームページが作れる7ステップ

step
1
ドメインとサーバーの申込みとWordpressのインストール

step
2
Wordpressの初期設定

step
3
ホームページのデザインを選ぶ

step
4
掲載内容を作成する

step
5
固定ページを作成する

step
6
サイト全体の配置を整える

step
7
プラグイン を活用する

もくじ

WordPressでホームページを作る際の基礎知識

ワードプレスでホームページを作りにあたって、基本的な仕組みを簡単に解説します。

仕組みがわかれば、ホームページを作るために必要な準備物など理解しやすくなります。

ホームページが表示される仕組み

ホームページが表示されるには、まずブラウザでURLを入力して、ホームページのデータが置かれている「サーバー」を検索する必要があります。

サーバーには様々なウェブサイトのデータが保存されています。

サーバーに保管されているデータがパソコンやスマホで表示される仕組みです。

そのためホームページを作るためには「サーバー」と「URL(ドメイン)」が必要なのです。

ホームページが表示される仕組み

サーバーはレンタルサーバーを申し込めばOK

サーバーが必要と言っても、何か自分で機械を購入して設定するわけではありません。

月額数百円でサーバーをレンタルできるサービスがあるので、それを利用します。

レンタルサーバの申込方法も下で解説しています。

ドメイン(URL)を取得する

レンタルサーバーを申し込んだら、次はホームページのドメイン(URL)を取得します。

例えば、このブログサイトのドメインは

ドメインとは

赤字の部分がドメインになります。

このドメインは自由に選ぶことができるので、お店の名前や会社の名前など、あなたのホームページの内容にあったドメインにしておけば安心感と信頼度が上がります。

ドメインとサーバーの申込みとWordpressのインストール

まずはインターネット上での自分のホームページの住所となる「ドメイン(URL)」とホームページのデータを保存しておく場所となる「サーバー」を準備をしていきます。

サーバーの申し込みをする

最初のステップはサーバーの申し込みです。

サーバーはいろいろありますがエックスサーバーがおすすめです。

エックスサーバーをおすすめする理由
  • 国内シェアNo.1で利用者が圧倒的に多いので安心。
  • 困ったときの問い合わせ対応が早く、電話サポートもある。
  • サーバーが安定しており速度が速い
  • 自動バックアップ付きで、もしもの時でも安心

初心者はわからないことが多く、ネットで調べながら進めていくことになると思います。

そんな時でもエックスサーバーなら困ったときの対処法がネットにたくさん載っているので、調べれば解決できます。

万が一、急を要するトラブルが起こった場合でも、エックスサーバーに直接問い合わせをしたら、迅速に対応してくれましたのも、好印象でした。

エックスサーバーの申し込み手順

まずはエックスサーバーのページにアクセスします。

エックスサーバー にアクセス

エックスサーバーのトップページ

①メニューバーお申し込みにカーソルを持っていく

②サーバー申し込みフォームというタブが出てくるのでクリック

③10日間無料お試し 新規お申込みをクリック

申し込みフォーム

申し込みフォーム画面に移行しますので、必要事項を記入していきます。

契約内容の選択

①サーバーID(初期ドメイン)
サーバー管理画面のログインIDとして利用します。これから立ち上げるブログのURLとは関係ないので、深く考える必要はありません。

②プラン
個人のブログやサイトであればX10プランで十分です。もし足りなくなった場合は後で変更することも可能です。

「お申し込み内容の確認へ進む」をクリックし、内容に問題がなければ「SMS・電話認証」に進みます。

  1. 認証に使う電話番号を入力し
  2. 「テキストメッセージで取得 」or 「自動音声通話で取得」のどちらかを選択します
  3. 「認証コードを取得する」をクリックします
SMS・電話認証

その後

  • 「テキストメッセージで取得 」を選んだ場合
    →SMSで認証コードが届きます。

  • 「自動音声通話で取得」を選んだ場合
    →着信が入り自動音声で認証コードが読み上げられます。

入手した認証コードを以下の画面に入力します。

認証コードの入力画面

入力したら「認証して申し込みを完了する」をクリックしすると、登録したメールアドレス宛に以下のようなメールが送られてきます。

実際に届いたメール

エックスサーバーの料金を支払う

無料お試し期間で10日間は支払いをしなくても使用できますが、支払いを忘れてしまうリスクがあるのですぐに支払ってください。

支払いを忘れてしまうと、契約が切られてしまい、設定を最初からやり直すという、たいへん面倒なことになります。

無料期間中に支払っても無料期間終了後から課金されるので、損はしないのでご安心ください。

エックスサーバー料金の支払い手順

まずはXserverアカウント(旧インフォパネル)にログインします。

Xserverアカウントのトップページ


上の画面に以下のIDとパスワードを入力してログインします。

  • 会員IDもしくはメールアドレス
  • Xserverアカウントパスワード(インフォパネルパスワード)

ログインのIDとパスワードは、サーバー申し込み時に送られてきたメール本文内に以下のように記載されています。

サーバー申し込み時に送られてきたメール

ログインしたら以下のように画面左側にある「料金のお支払い」をクリックします。

「料金のお支払い」のクリックする場所

画面が切り替わったら、下にスクロールして「お支払い伝票の発行」の部分を入力します。

「お支払い伝票の発行」の実際の画面
  1. チェックを入れる
  2. 更新期間を選択する
  3. 「お支払い方法を選択する」をクリックする

以下のように支払い方法選択画面に移ります。

支払い方法を選択する画面

支払いが完了したら、エックスサーバーの契約は完了です!

ドメインを取得する手順

サーバーを契約したら、次はドメインを取得していきます。

まずはお名前.com公式ページにアクセスします。

お名前.comのトップページ

❶希望のドメインを入力します。

❷検索ボタンをクリックします。

ドメインの指定

❶希望のドメイン末尾にチェックを入れます。

❷「料金確認に進む」をクリックします。

①登録年数を選択します。
→自動更新機能もあるので、とりあえず「1年」にしておけば良いでしょう。

②申し込み不要なのでチェック(✔︎)は入れずにそのままでOK

③初めて申し込む人は登録用に「メールアドレス」と「パスワード」を決めて入力する必要があります。

入力したら「次へ」をクリックします。

次に会員情報の入力画面に移ります。

会員情報の入力画面
  • 種別
  • 名前
  • 住所
  • 電話番号
  • メールアドレス

これらを入力したら「次へ進む」をクリックします。

支払い方法の画面に移ります。

お支払い方法の画面

①クレジットカード情報を入力します

②入力したら「申込む」をクリックします。

申し込みが完了すると10分程度で「ドメイン登録 完了通知」という題名を含むメールが複数件届きます。

以上でドメインの取得は完了です。

初期設定を行う

必ず必要な初期設定がありますので、もう一度お名前.comにログインします

下の画面で会員IDとパスワードを入力してログインします。

会員IDはドメイン契約時に送られてきた「ドメイン登録完了通知」というメールの中に記載されています。

パスワードはドメイン契約時に設定したパスワードを入力します。

お名前.comのログイン画面

ログインすると以下のようなTOP画面が表示されます。

ログイン後に表示されるTOP画面

画面下の方にある「ドメイン一覧」をクリックすると、以下の画面に移ります。

「ドメイン一覧」をクリックした後に表示される画面

「初期設定」をクリックします。

ネームサーバーの設定

❶対象のドメインにチェックが入っていることを確認します。

❷「その他」のタブをクリックします。

ネームサーバーの設定

❶「+」をクリックしてネームサーバー5まで表示させます。

❷以下の太字部分の通り入力します。(コビペで入力してもOK)
ネームサーバー1:ns1.xserver.jp
ネームサーバー2:ns2.xserver.jp
ネームサーバー3:ns3.xserver.jp
ネームサーバー4:ns4.xserver.jp
ネームサーバー5:ns5.xserver.jp

❸入力したら「確認」をクリックします。

内容確認の画面が出るので「OK」をクリックします。

確認画面

以上でお名前.comの初期設定は完了です。

次はエックスサーバーで必要な初期設定を進めますのでサーバーパネルにログインします。

下の画面でサーバーIDサーバーパネルパスワードを入力してログインします。

サーバーパネルのログイン画面

ログインができたら下の画面の「ドメイン設定」をクリックします。

ログイン後の画面

下の画面の「ドメイン設定の追加」タブをクリックします。

ドメイン設定の画面

下の画面でドメインの設定を行います

❶お名前.comで取得したドメインを入力します。

❷2つともチェック(✔︎)を入れます。

❸「確認画面へ進む」をクリックする[/box]

ドメイン設定の操作方法の解説

下記画面で「追加する」をクリックします。

設定が終わって追加するボタンを押す時の画面

以上で設定は完了です。

設定が完了した時に表示される画面

ワードプレスをインストールする

まずはサーバーパネルにログインします。

「WordPress簡単インストール」をクリックします。

サーバーパネルのトップ画面

以下の画面が表示されます。

wordpress簡単インストールの操作方法の解説

①「WordPressインストール」タブをクリックする。

②サイトURLは触る必要はなくそのままでOK

③ブログタイトルが決まっているなら入力する(後から変更可能)

④ワードプレスのログイン時に使用するユーザー名を設定する。

⑤同じくワードプレスのログイン時に使用するパスワードを設定する。

⑥メールアドレスを入力する。

⑦キャッシュ自動削除「ON」を選択する

⑧データベースは「自動でデータベースを生成する」を選択する

⑨「確認画面に進む」をクリックする。

下の画面で内容に問題なければ「インストールする」をクリックする。

インストールするのボタンを押す画面

インストールが完了すると以下の画面が表示されます。

ログイン時に必要な情報なのでメモして忘れないようにしてください。

インストール完了後に表示される画面

これでワードプレスのインストールは完了です。

お疲れ様でした!

WordPressの初期設定

サーバーとドメイン、WordPressのインストールまで準備が整いました。

いよいよWordPressを使ってホームページを作っていくのですが、その前に必要な初期設定をします。

WordPressの管理画面へのログイン方法

まず、ワードプレスの管理画面にログインします。

WordPress管理画面のURL

https://サイトのURL/wp-admin/

(例. https://tonyyy.com/wp-admin/)

管理画面のアクセスしたら、以下のようにログイン画面が出ます。

ワードプレスのログイン画面

ホームページの名前とキャッチフレーズを設定する

ホームページは、わかりやすい名前と「どんなサイトなのか」が一言でわかるようなキャッチフレーズを設定します。

ワードプレスのダッシュボード

❶管理画面の「設定」にマウスポインターを合わせます。
❷「一般」をクリックします。

ワードプレスの一般設定

❶ホームページの名前を入力します。
❷キャッチフレーズを入力します。
❸画面左下にある「変更を保存」をクリックします。

これで、ホームページの名前とキャッチフレーズの設定は完了です。

パーマリンクは最初に設定しておく

設定を後からでも簡単に変更できるのがWordPressの特徴ですが、中には最初に決めておかなければ、後からの変更が難しいものもあります。それが「パーマリンク」の設定です。

パーマリンクとは

パーマリンクとはWordPressで作成した投稿のURLのことです。

初期設定は「http://〇〇◯.jp/?p=記事番号」という形式になっているので、意味のない数字の羅列が投稿のURLになってしまいます。

必ず変更が必要というわけではないですが、作成した日付や投稿のタイトルをURLに含めた方が、訪問者にとっては投稿の内容が伝わりやすくなります。

例:
http://tonyyy.com/?p=2023/
初期設定では意味のないURLになってしまう。

http://tonyyy.com/wordpress-beginner/
投稿のタイトルを含めると投稿の内容が伝わりやすい

後からパーマリンクを変更してしまうと、webページのURLが変更されてしまい、他の場所でURLを紹介していたり、リンクが貼られていた場合に、アクセスができなくなってしまいます。

よってパーマリンクの設定は最初に行うようにしましょう。

❶管理画面の「設定」にマウスポインターを合わせます。
❷「パーマリンク設定」をクリックします。

ここでは[投稿名]をパーマリンクとして設定します。

❶「投稿名」をクリックして選択します。
❷「変更を保存」をクリックします。

Webサイト(ホームページ)を更新する操作方法

設定を変更した後やサイトを更新した後に、実際どのようにネット上で公開されているのかを確認することができます。ここでは管理画面とサイトの表示の切替え方を覚えましょう。

「更新」→「実際のサイトの表示を確認」を繰り返すのが、サイト更新作業の基本的な流れです。

❶Webサイト名にマウスポインターを合わせます。
❷「サイトを表示」をクリックします。

そうすると以下のように公開中のWebサイトが表示されます。

Webサイトから管理画面に戻る方法

❶Webサイト名にマウスポインターを合わせます。
❷「ダッシュボード」をクリックします。

そうすれば以下のように管理画面に戻ります。

ホームページはこまめに確認しましょう

更新」したら「確認」を忘れないようにしましょう。

実際のページが思っていたのと違った!ということはよくあります。

3.ホームページのデザインを選ぶ

WordPressの初期設定が終わったら、次はホームページのデザインを設定していきます。

WordPressでは「テーマ」と呼ばれる完成されたデザインのテンプレートがたくさんありますので、作りたいホームページのイメージにあったテーマを選ぶだけです。

WordPress初心者は無料テーマと有料テーマどちらを使うべき?

テーマには無料のものと有料のものがあります。

無料と有料を比較すると、一番大きな違いは有料テーマにはSEO対策が組み込まれていることです。

SEOとはあなたのサイトがgoogleの検索で上位表示されやすくなるという意味です。

上位表示されると、それだけホームページを訪問する人が増えます。

検索上位を狙ってより多くの訪問者を集めたい!という方なら有料テーマを使うと良いです。

SEOに強い有料テーマを以下の記事にまとめていますので、テーマ選びの参考にしてください。

関連記事
【最新版】SEOに強いWordPressテーマ5選【ブログで稼ぐ】

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

この記事では、初心者でもお店や会社のホームページを簡単に作ることができる「Lightning」という無料テーマを使ってホームページ作成を解説していきます。

まずは管理画面から

❶「外観」にマウスポインターを合わせます。
❷「テーマ」をクリックします。

そうすれば以下の画面に切り替わります。

❶「新規追加」をクリックします。

❶右上の検索ボックスに「Lightning」と入力して検索します。
❷「インストール」をクリックします。

インストールが完了したら、以下のように「有効化」というボタンをクリックします。

これで、Lightningテーマの設定が完了です。

Lightning以外の無料テーマもたくさんあり、同じ手順でインストールできます。

関連記事
【最新版】SEOに強いWordPressテーマ5選【ブログで稼ぐ】

4.掲載内容を作成する

掲載内容を作成する

今度はホームページにどんな情報を掲載するかコンテンツを考えていきましょう。

どんなページが必要がをリストアップする

まずはどのようなページが必要かを書き出していきます。

お店のホームページであれば、どんなお店なのか、営業時間や住所がわかるページが必要でしょう。さらに商品のギャラリーやイベントなどの情報も載せた方がいいなどの意見もあるでしょう。

リストアップしたら、以下のようなツリー構造でホームページの構成を考えていきます。

どんなWebサイトでも構造はこのようにツリー構造になっています。

Webサイトでの構造

「投稿」と「固定ページ」の使い分け

ホームページのコンテンツを充実させるために、WordPressでは「投稿」と「固定ページ」の2つの機能を使い分けてコンテンツを作成していきます。

「投稿」の機能と用途

「投稿」の機能を使ってページを書いた場合、ページが時系列で整理されます。
以下のように最新の投稿が一番上にくるように積み上げられます。

なので、ブログやお知らせ記事のような頻繁に情報更新がされるページは「投稿」で作成すると良いです。

「固定ページ」の機能と用途

お店の情報、住所や地図など滅多に情報が変更されないページは「固定ページ」を使って作成すればホームページの決まった場所に情報を表示しておくことができます。

「投稿」機能でページを作ってみよう

実際に作ってみて覚えましょう。

❶「投稿」にマウスポインターを合わせます。
❷「新規追加」をクリックします。

「タイトルを追加」をクリックし、以下のように投稿のタイトルを入力します。

次に「文章を入力、または/でブロックを選択」クリックします。

❶本文を入力します。
❷「プレビュー」をクリックすると実際のウェブ上での表示を確認できます。
❸「下書き保存」をクリックします。

❶「文書」をクリックします。
❷「パーマリンク」をクリックします。

自動的に投稿のタイトルがパーマリンクに追加されているので、英文字に変更します。
日本語のパーマリンクの場合、リンクをSNSやネット上に貼るとき文字化けする可能性があるので、英文字のパーマリンクに変更してください。

❶英文字のパーマリンクを入力します。どんな英文字でもOKですが、ページの内容を表す英語にするのがおすすめです。
❷「公開する」をクリックします。

「公開」をクリックすると投稿がネット上に公開されます。

画像の挿入や文字の装飾のやり方を解説

本文中に画像を入れたり、強調したい文章は文字色を変えたりなど装飾を加えることで、より読みやすいページを作ることができます。

画像の挿入方法

❶ブロックの追加をクリックする。
❷一般ブロックをクリックする。
❸画像をクリックする。

そして、下の画像のように「アップロード」をクリックします。

❶挿入したい画像を選択します。
❷開くをクリックします。

そうすると、以下のように画像が挿入されます。

「画像サイズ」をクリックすれば画像の大きさを調整することができます。

文字を太字にする方法

❶太字にしたい文字列をドラッグして選択します。
❷太字のボタンをクリックします。

そうすると、以下のように太字になります。

リンクの挿入方法

❶リンクにしたい文字列をドラッグして選択します。
❷リンクのボタンをクリックします。

❶リンク先のURLを入力します。
❷矢印のマークをクリックします。

そうすると、以下のようにリンクが挿入できます。

文字の色を変更する方法

文字色を変更したいブロックを選択します。

❶色設定をクリックします。
❷使用した色をクリックして選択します。

これで文字色が変更できます。

投稿の中に見出しを挿入する方法

見出しを挿入したい箇所の「ブロックの追加」をクリックします。

「見出し」をクリックします。

見出しの文章を入力すればOKです。

他にもたくさんの機能があります

この記事で全ての機能をご紹介するのは難しいので、代表的なものだけを紹介しています。使用していて「文字のフォントを変えたい」「動画の挿入はできないのかな?」など色々な疑問が出てくると思います。そんな時はGoogleで調べるとほとんどの疑問が解決されるでしょう。困ったときにすぐ解決策を調べることができるのもWordPressの強みだと言えます。

5. 固定ページを作成する

会社情報や問合せ先の情報、住所や地図など滅多に変わることがなく、ホームページの決まった位置に情報を表示させておきたい場合は「固定ページ」機能でページを作成します。

「固定ページ」機能でページを作ってみよう

❶「固定ページ」にマウスポインターを合わせます。
❷「新規追加」をクリックします。

固定ページの編集のやり方は「投稿」でページを作る時と同じです。

❶タイトルを入力します。
❷パーマリンクを英文字で設定します。
❸本文を作成します。
❹「公開する」をクリックすれば公開され完了です。

固定ページに地図を挿入する方法

まずはGoogleマップ(https://www.google.com/maps/)にアクセスします。

❶地図で表示させたいお店名や会社名を検索します。
❷共有をクリックします。

地図を埋め込むをクリックします。

「HTMLをコピー」をクリックするとコードがコピーされます。

固定ページの編集画面に、コピーしたHTMLコードを貼り付けます。

「プレビュー」をクリックすると地図が表示されます。

6. サイト全体の配置を整える

トップページにメインメニューを追加する

ホームページのトップページの上部は1番目立つ場所です。そこにホームページのメインメニューを作りましょう。そうすれば訪問者が探したい情報をすぐに見つけることができます。

❶「外観」にマウスポインターを合わせます。
❷「メニュー」をクリックします。
❸メニューに追加したいページを選択します。
❹「メニューに追加」をクリックします。
❺「Header Navigation」にチェックを入れます。
❻「メニュを保存」をクリックすればヘッダーメニューの完成です。

フッターにロゴと会社情報を表示する方法

会社情報など目立たせなくてもいいが、見える位置に表示させておきたい場合は、以下のようにフッターに表示させておくといいでしょう。

❶「外観」にマウスポインターを合わせます。
❷「ウィジェット 」をクリックします。
❸「VK_プロフィール」を❹のフィッターウィジェット エリア1へドラッグします。
❹ロゴ画像、会社情報などを入力します。

7. プラグイン を活用する

ホームページのデザインと構成が完成したら「プラグイン」 という機能を使って、問合せフォームを設置したりコンテンツを最適化していきましよう。

「プラグイン 」はスマホの「アプリ」のようなものと考えるとわかりやすいです。

スマホにはない便利な機能を使うためにスマホアプリをダウンロードして使いますね。WordPressでも基本機能にはない、便利な機能をプラグイン をダウンロードすることで使用できるようになります。

プラグイン を使って問合せフォームを作る

ホームページを作るにあたって、訪問者が問い合わせしたい場合に応える「問い合わせフォーム」があるといいですね。

問い合わせフォームはプラグイン をダウンロードすることで作ることができます。

❶「プラグイン 」にマウスポインターを合わせます。
❷「新規追加 」をクリックします。

❶右上の検索欄で「contact form 7」と入力して検索します。
❷「今すぐインストール 」をクリックします。

これでインストールが完了です。
有効化して、早速フォーム作成を行います。

❶「お問い合わせ 」にマウスポインターを合わせます。

❷「コンタクトフォーム 」をクリックします。

コンタクトフォーム1をクリックします。

問い合わせフォームに含めいたい項目があれば、こちらのボタン群をクリックして追加することができます。

次はメ問い合わせを受けたときに受信するメールアドレスを設定します。

❶メールタブをクリックします。
❷「送信先」に入力されているメールアドレスを確認します。
❸問題なければ「保存」をクリックします。
❹フォームのコードをコピーします。

お問い合わせページを作るために、固定ページを編集します。

タイトルと本文の文章を入力します。

❶「ブロック追加」をクリックします。
❷「ウィジェット」をクリックします。
❸「ショートコード」をクリックします。

❶先ほどコピーしたコードを貼り付けます。
❷「更新」をクリックします。

これでお問い合わせフォームが完成です。以下のように表示されました。

初心者でもWordPressでホームページが作れる7ステップまとめ

WordPressはプログラミングができない初心者でも視覚的に操作ができ、ホームページ作成をすることができます。

SEOにも強い設計になっており、あなたのホームページが検索で上位に表示されやすくな利、webサイトを作るツールとして理想的と言えます。

本記事でご紹介した7ステップを参考にして、ホームページの作成にチャレンジしてみてください。

操作や機能で不明点があれば、Googleで調べながら進めれば初心者の方でも大丈夫です。

WordPressはユーザーが多いので、困ったときの答えがネット上に公開されており、解決しない疑問はほぼ無いと言っていいでしょう。

なので、ホームページ作成が自分でできるか不安な初心者の方でも安心してください。

ホームページを作ってみようと思った方はWordPressでホームページが作れる7ステップの手順に戻るをクリックして、手順の先頭に戻って、さっそく作業を進めてみてください。

関連記事
【10分】WordPressブログの始め方【クイックスタート】

-ブログ

© 2020 トニーブログ Powered by AFFINGER5