WordPressホームページの作り方を徹底解説

WordPress ホームページの作り方

【総まとめ】WordPress(ワードプレス) ホームページ作り方

2020年2月21日

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。

そこで今回は、WordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

■【10分簡単デモ】WordPressでホームページ作る方法(動画解説版)

関連記事 WordPressブログの作り方

ここではホームページ想定で手順をご紹介していきますが、WordPressでブログを作る場合も大きな手順は基本的には同じです。ASPに登録したり、投稿を使ってブログを書くのが中心になるという若干の違いがあるだけです。
ホームページではなくブログ型のサイトを作りたい方は「【WordPressの始め方総まとめ】ワードプレスブログの作り方」をあわせてご参照ください。

 
※ご利用の環境・時期によって画面が異なる場合がありますのでご了承ください。
 

【はじめに】WordPress(ワードプレス)とは

WordPressの特徴

ワードプレスのロゴ

 
WordPressとは、ホームページやブログを作成・運用するためのソフトウェアです。

企業・事業主のホームページやブロガーがブログを開設・運用する際で多く利用されています。

下記は、WordPressのシェアです。WordPressは世界中のCMSのうち60%を超えており、世界中のWebサイトのうち43%がWordPressで作られていることがわかります。

2022年4月時点世界CMSのシェア

2022年4月時点世界CMSのシェア※()カッコ内は非CMSも合わせた全体のうちのシェア
https://w3techs.com/technologies/overview/content_management/allより引用


 

WordPressでホームページを作る際にかかる費用

WordPressでサイト制作するときにかかる費用
 

WordPressでかかる費用ですが、自作する場合初年度1〜4万円(次年度以降1〜1.5万円)外注する場合は小規模なもので一般的に20〜50万円程度かかります。

以降ではWordPressでホームページを自作する場合を想定して説明していきます。

WordPressでサイトを自作する場合にかかる料金
 

WordPressを利用してホームページ・ブログを自作する場合の費用ですが、おおよそ初年度1〜4万円程度、次年度以降1〜1.5万円程度が目安になります。

項目 初期費用
(初年度のみかかる
イニシャルコスト)
維持費用
(翌年以降毎年かかる
ランニングコスト)
WordPress本体 0円 0円
レンタルサーバー代 年間6,600円〜13,200円
初期費用が別途1,000〜3,300円程度かかる場合があります。
年間6,600円〜13,200円
ドメイン取得・維持費 年間1,500円程度 年間1,500円程度
WordPressテーマ代 (無料テーマの場合)0円
(有料テーマの場合)10,000円〜25,000円
0円
※サブスクリプション型有料テーマの場合を除く
年間合計費用 初年度8,100円〜39,700円 次年度以降8,100円〜14,700円

(料金は、ボリュームゾーン・平均値で算出のため、実際には上記よりも上下変動があります)

WordPressそのものは、オープンソースで費用はかかりません。サーバーや独自ドメイン、(必要に応じて)WordPressテーマ代などの合計がWordPressを始める際にかかる費用になります。

WordPressでかかる料金の内訳について詳しい説明は「【WordPressの料金】ホームページ・ブログ開設にかかる費用」をあわせてご参照ください。
 

勘違いしやすいWordPress.orgとWordPress.com

ネットでWordPressで検索すると、wordpress.orgというサイトと、wordpress.comというサイトがヒットします。

検索結果。wordpress.com
検索結果。wordpress.org
 
WordPress.comは、WordPressを利用してアメブロやFC2、シーサーブログ、はてなブログなどのブログサービスを展開している営利組織です。

基本的に我々がWordPressと呼んでいる方のWordPressはWordPress.orgの配布しているパッケージソフトウェアを指します。

レンタルサーバーなどのサーバーにインストールして使うタイプは、WordPress.orgが配布しているパッケージソフトウェアを指します。
 

項目 WordPress.org WordPress.com
意味 WordPressというソフトウェアは配布している組織・サイト。通常WordPressといえばこちらを指します

Wordpress.org トップページ
WordPress.org

WordPressというソフトウェアを基盤にしたブログサービス。プラグインやテーマの制限があるため、あえてWordPress.comを利用する場合は注意が必要です。

Wordpress.comトップページ
WordPress.com

WordPress.orgとWordPress.comの違いや特徴・メリットデメリットについて詳しくは「【始める前に】Wordpress.orgとWordpress.comの違いと特徴・デメリット」をご参考ください。
 
 

■【WordPressとは】ワードプレスの特徴と仕組みを徹底解説(動画解説版)


 

(関連記事)【圧倒的なWordPressシェア】世界と日本で有名なCMSシェアを徹底比較!
(関連記事)【WordPress(ワードプレス)】WordPressとは?概要と特徴をわかりやすく説明
 

WordPressでホームページを作成するための概要手順

WordPressの始めるための4ステップ

WordPressでホームページを作成する一般的な手順としては、

  1. サーバーを用意して
  2. ドメインを用意して
  3. WordPressをインストールし
  4. 中身を作っていく

という手順になります。

 

サーバーはエックスサーバーConoHa WINGmixhostロリポップ!さくらのレンタルサーバが有名でよく利用されていておすすめです。
 

(関連)おすすめレンタルサーバー比較

上記5社のおすすめレンタルサーバー会社の詳しい比較を「【WordPressおすすめレンタルサーバー比較5社 総まとめ】」に記載しましたので、レンタルサーバーをどれにするかご検討の方は合わせてご参照ください。

 

サーバー・ドメイン・ホームページ(ブログ)などのより具体的な説明については「【総まとめ】個人ホームページの作り方・Webサイト自作方法」を合わせてご参考ください。
 

本記事では、WordPressの使い方を含めて下記の順でより具体的に説明していきます。

WordPress ホームページの作り方

  1. レンタルサーバーを契約してWordPressをインストールする
  2. 各種管理画面へのログイン方法を確認する
  3. WordPressの管理画面の見方と基本操作を覚える
  4. WordPressデザインテンプレート「テーマ」を設定する
  5. WordPress投稿機能でブログを書く
  6. WordPress固定ページを作成してメニューバーに設定する
  7. カスタマイザーでメインビジュアルや色等のテーマ設定を行う
  8. ウィジェットでサイドバーやフッターを設定する
  9. プラグインでお問い合わせフォームを作成する
  10. WordPressブロックエディターの使い方を更に覚える
  11. その他のWordPressの初期設定をする
  12. (補足)ホームページに必要な情報・コンセプトを整理する

 
 

レンタルサーバーの契約の仕方から、WordPressのインストール方法まで実際の画面を使って説明していきますね。

 

(1/12)レンタルサーバーを契約してWordPressをインストールする

レンタルサーバーは国内でも100社近くありますが、今回は、一般的なホームページ型のサイトを作る際にコストパフォーマンスの観点でおすすめのレンタルサーバー「ロリポップ!」を使ってホームページの解説手順を説明していきます。
 

本手順では作成するアカウントが3つあります。アカウント情報を混乱しないようにあらかじめ整理しておきましょう。
ロリポップでWordPressを始める方法
 

項目 アカウント開設サイト
レンタルサーバー「ロリポップ」のアカウント WordPressを使うならロリポップ!
簡単インストール完備で楽々スタート!

ドメインサービス「ムームードメイン」のアカウント 格安ドメイン取得サービス─ムームードメイン─
WordPressのアカウント ロリポップよりインストール・アカウント作成

 

(関連)法人・個人などそれぞれの用途に応じたおすすめレンタルサーバーの考え方について「【おすすめレンタルサーバー比較5社総まとめ WordPress対応】」に掲載していますので、レンタルサーバー契約の前にぜひご覧ください。
 
 

レンタルサーバー「ロリポップ」を契約する

Webの仕組み サーバー

まずはレンタルサーバー「ロリポップ!」にアクセスしてアカウントを作成しましょう。
 

 

ロリポップトップページに移動します。「まずは無料でレンタルサーバーを利用しよう」ボタンを選択します。
ロリポップトップページ
 

ここでは、独自ドメインが契約中ずっと無料で利用できる「ハイスピードプラン」を選択します。
ロリポップ ハイスピードプランを選択
 
(関連記事)【ロリポップ評判】特徴・おすすめプランとメリットデメリット
 

アカウント情報を入力します。初期ドメイン・パスワード・メールアドレスを入力したあと、今回は「無料で独自ドメインを取得する」にチェックを入れて、契約と同時に独自ドメインを取得設定していきます。
ロリポップ アカウント開設手続き1
(※)「無料で独自ドメインを取得する」は、クレジットカード支払いのみ・12ヶ月以上契約・契約種別個人のみなどになります。詳しくはページ内の記載事項をご確認ください。
(※)「無料で独自ドメインを取得する」にチェックを入れず一旦体験版で解説する場合の手順は「【(従来版)ロリポップ版】WordPressインストール方法・始め方」をご参照ください。

 

初期ドメインについて

初期ドメインはロリポップにログインする際に利用する半角英数のIDです。屋号などの覚えやすい値がおすすめです。
ロリポップ アカウント解説 初期ドメインについて

独自ドメインを利用する場合、一般のサイト訪問者にはこのIDは見えませんので、基本的にどんな文字列でも気にする必要はありません。

 

携帯電話による認証がありますので、電話番号を入力します。
ロリポップ SMS認証
 

SMS認証コードを入力します。
ロリポップ SMS認証コード入力
 

つづいて、申し込み情報を入力します。
アカウント情報を入力します。
 

アカウント情報入力後、画面下の方でクレジットカード情報を入力します(12ヶ月以上。36ヶ月が月額費用最安)。また、今回はWordPressをこのままインストールするので、WordPressインストール情報も入力します。
クレジットカード情報を入力します。

■WordPressインストール情報について

※ユーザー名とパスワードはWordPressにログインする際に利用しますので忘れないようにしましょう。

  • 【ブログ名】サイトのタイトル(例. ホームページの作り方・WordPressの使い方ブログ)を入力
  • 【ユーザー名】半角英数文字で任意の名前を入力します
  • 【パスワード】複雑なパスワードにします。

 

申し込み内容を確認して、利用規約にチェックを入れて「お申し込みを確定」ボタンを押下します。
お申し込み内容を確認

「お申し込みを確定」ボタンを押下
 

お申し込み完了画面が表示されますので、ユーザー専用ページにログインします。
ユーザー専用ページにログイン
 

ロリポップの管理画面に移動します。この管理画面から引き続き設定をしていきます。
ロリポップの管理画面
 

(重要)初めてドメインを取得される方向け

初回ドメイン取得時に「【重要】[ムームードメイン] ドメイン 情報認証のお願い」という下記のようなメールが来る場合があります。
その場合は、メール本文の案内に従ってURLをクリックして認証を済ませてください。

認証依頼のメールが来たまま放置して認証が行われないまま一定期間経過すると、ドメインがロックされアクセスできなくなりますでの注意しましょう。
(もしロックされてしまった場合は認証を行うことで通常数時間くらい経過後に解除されます。)

【重要】[ムームードメイン] ドメイン 情報認証のお願い

(※)お名前.comなどで過去にドメイン取得したことがある場合やドメインの種類によっては本メールが来ない場合もあります。その場合は何もしなくて構いません。

 

WordPressにログインする

次にWordPressにログインしていきましょう。サイト作成>WordPress簡単インストールをクリックします。
サイト作成>WordPress簡単インストール

画面下にスクロールすると、WordPressのインストール履歴が表示されています。サイトURLと管理者ページのURLのリンクをそれぞれクリックしてみましょう。
管理者ページのURLのリンクをクリック
 

(1)サイトURLをクリック。WordPressトップページが表示されています。
WordPress初期画面

まだセットアップできていない場合

まだセットアップできていない場合、サイトにアクセスしても404エラーが表示されます。その場合2,30分ほど待ってから再度アクセスしてみましょう。
まだセットアップできていない場合 404エラー

 

(2)(1)でサイトが問題なく表示されたら、管理者ページURLもクリックします。WordPressのログイン画面が表示されます。先ほどWordPress簡単インストールで入力したユーザーIDとパスワードを入力してログインします。
WordPressのログイン画面
 

下記のような管理者画面が表示されます。ここで、WordPressの操作を行なっていきます。
WordPress 管理者画面
 

合わせて読みたい記事

WordPressの使い方を「【WordPress(ワードプレス)の使い方総まとめ】」で詳しく説明していますので、WordPressインストール後は合わせてご参考ください。

 

常時SSLの設定を行う

次にロリポップサーバー側で暗号化通信SSL(HTTPS)の設定をしていきます。
 

SSLとは

SSL化とはURLが「https」から始める通信にすることで、通信データが暗号化されてアドレスバーに鍵マークが表示されるようになります。
SSL化されたサイト https 鍵マークがついている
 

通信をSSL化(HTTPS)をすることで、通信データを保護し、クレジットカードのような他人に知られると悪用される重要な情報を守ります。
SSL化の説明図2
 

なお、SSLについて詳細な説明を「【SSLとは】SSLの意味と必要性および仕組みや種類を解説」で記載していますので、SSLについて詳しく知りたい方は合わせてご参照ください。

 

4-1. ロリポップでSSLの設定を行う

ロリポップの管理画面から、セキュリティ>独自SSL証明書導入をクリックします。
セキュリティ>独自SSL証明書導入をクリック
 

独自SSL(無料)の箇所で、取得したドメイン(www有り無し含めて)に対してチェックを入れて「独自SSL(無料)を設定する」をクリックします。
独自SSL(無料)を設定する
 

SSL設定作業中の画面が表示されます。5分程度待ちます。
SSL設定作業中の画面
 

SSLが設定されると、ブラウザを更新するとSSL保護有効と表示されるようになっています。
SSL保護有効と表示された
 

このSSLの設定だけでは、まだ「http」と「https」のURL両方にアクセスすることができる状態です。そこで「http」のURLを「https」へ転送する設定を行っていきます。

 

4-2. WordPressの設定でSSL設定

次に、WordPressでもSSLの設定を行います。

WordPressの管理URLに入り、ダッシュボードから「設定」を選択し「一般」をクリックします。
ダッシュボードから「設定」を選択し「一般」をクリック
 

「WordPressアドレス(URL)」、「サイトアドレス(URL)」を「http://~」から「https://~」に変え、「変更を保存」をクリックします。
httpをhttpsに書き換える
(※)本操作で誤った内容を入力・保存すると、WordPressにアクセスできなくなる場合があるため、慎重に行いましょう。
 

下にスクロールして変更を保存します。
変更を保存
 

一旦ログアウトされるので、再度ログインしましょう。
ログアウトされるので再度ログインする
 

管理画面のアドレスがhttpsになっていることが確認できたらOKです。
管理画面のアドレスがhttpsになっていることを確認
 
 

「.htaccess」ファイルに常時SSLの設定を行う

最後に、常時SSLの設定を行なっていきます。ここまでの設定では、まだ「http」と「https」のURL両方にアクセスすることができる状態です。
 

ちょっと難しいと思った方は、一旦飛ばしてWordPressの使い方を覚えて後から設定しても構いません。

そこで「http」でリクエストされた通信も「https」として通信させる設定を行っていきます(常にSSL通信になるので常時SSLといいます)。設定を行うには、サーバー上にある「.htaccess」という重要なファイルを編集する必要があります。
 

「.htaccess」ファイルを開き、その先頭に「http」へアクセスした場合、「https」に転送するコードを書き加える必要があります。
 

ここでは、ロリポップFTPを利用して、サーバー内の.htaccessを編集する方法を紹介します。サーバー管理>ロリポップ!FTPを選択します。
サーバー管理>ロリポップ!FTP
 

ロリポップFTPの画面が開きます。対象のドメイン用フォルダをクリックします。
対象のドメイン用フォルダをクリックします
 

.htaccessをクリックします
.htaccessをクリックします
 

.htaccessの編集画面が表示されます。
htaccessの編集画面
 

注意

誤った入力をすると、「.htaccess」ファイルが機能せず、最悪の場合、Webサイトが表示されない可能性もありますので、コードを変更したり、書き加える前に必ずバックアップを取っておきましょう。
.htaccessファイルを事前にダウンロード

 

間違った書き方をすると、サイトにアクセスできなくなる場合もあるため、慎重に操作しましょう。

 

ここに下記のようにコードを追記します(※)。

(※).htacessに書き加えるコードは、以下のとおりです。コピーしてください。

.htaccessにコードを追記
 

上記のコードをコピー後に.htaccessの編集画面の一番上に追記後、保存します。


 

(補足. 中級者向け)コードの意味について
  • 「< IfModule mod_rewrite.c > *** 」の部分は、「***を処理する機能を定義する」という内容が書かれています。
  • 「mod_rewrite」とは、「条件を満たした場合に記載したURLに転送する機能」の意味です。
  • 「RewriteEngine」とは、「有効(ON)・無効(OFF)の設定」で、「有効(ON)」にします。
  • 「RewriteCond」とは、「条件を設定する」という意味です。
  • 「 %{HTTPS} off 」とは「https でない場合(SSLではない場合)」という意味です。
  • 「RewriteRule 」とは、「ルールを設定する」という意味です。
  • [ R = 301 , L ]の「R = 301」は「永続的に転送する」という意味であり、「L」は「ルールを終了する」という意味です。

 

以上のコードで「http」でアクセスがあった場合、「https」へ転送しますというルールを設定しています。

 

最後に「http://自分のドメイン名」でアクセスしてみましょう。httpsにリダイレクトされて入れば完了です。


 

(2/12)各種管理画面へのログイン方法を確認する

ここまでで、ロリポップアカウントの開設、ムームードメインアカウントの開設、WordPressアカウントの開設を行いました。アカウント情報を混乱しないようにあらかじめ整理しておきましょう。
ロリポップでWordPressを始める方法
 

ロリポップへのログインを確認する

ロリポップのログインはロリポップのトップページログインから行います。
ロリポップトップページでログインボタンを押下
 

ログイン情報を入力します。
ログイン情報を入力
 

ログイン時に登録時のメールアドレス宛に認証メールが飛ぶ場合は、メールを開き中身を確認しましょう。
ログイン時に登録時のメールアドレス宛に認証メールが飛ぶ場合
 

メールを確認して、該当URLをクリックします。
メールを確認して、該当URLをクリック
 

ロリポップにログインできればOKです。
ロリポップ管理画面
 

ムームードメインへのログインを確認する

ロリポップで独自ドメインを同時に取得した場合、ムームードメインでもアカウント情報が作成されます。

ムームードメインにアクセスしてログインできるか確認してみましょう。
ムームードメインにアクセス
 

ログイン情報を入力します。
ログイン情報を入力
 

管理画面に入れればOKです。なお、初回ドメイン登録時の場合、確認メールが届いている場合があります。処理が終わっていないと下記のようにお知らせが表示されているので、記載の内容で処理を進めてください。
ムームードメイン管理画面
 

ムームードメイン管理画面
 

ムームードメインでは、取得したドメインの契約管理が行われています。
 

WordPressへのログインを確認する

最後にWordPressのログイン方法も確認しておきましょう。
 

WordPressのログイン画面
 

WordPressにログインするためには、まずは自分がインストールしたWordPressのサイトの管理画面URLにアクセスする必要があります。初期状態ではWordpress管理画面へのURLは下記になります。
 

WordPress管理画面用のURL
 
http(s)://WordPressをインストールしたサイトのURL/wp-admin/
(例. https://webst8-demo.net/wp-admin/)

 

よくある間違い。検索してはいけない

ここで、よくある間違いとして、URL入力時にGoogle検索の候補を選んだり、検索エンジンでURLを検索してしまう人いますが、この方法ではログイン画面にいけないのでご注意ください。
該当のURLで検索してしまう
 

URLで検索されてしまうがヒットしない

ログインのURLは通常検索エンジンにヒットしない設定で非公開になっていますので、検索でURLを調べてもヒットしないんです。

 

上記の管理画面URLにアクセスすると下記のログイン画面が表示されます。
WordPressのログイン画面
 

WordPressをインストールした際に入力したユーザーID(またはメールアドレス)とパスワードを入力するとログインすることができます。
ユーザーID又はパスワードを入力後ログインボタンを押下
 
 

管理画面に入れればOKです。
WordPress 管理者画面
 

Cookieによるログインエラー

お使いのブラウザによっては、初回Cookieエラーが起きる場合がありますが、もう一度ログインを試してみてください。

大体のケースではもう一度ログインするとうまくい事が多いです。

Cookieによるログインエラー

 

(3/12)WordPressの管理画面の見方と基本操作を覚える

WordPressのダッシュボードの基本的な見方について説明していきます。
 

ダッシュボードとは、WordPressの管理画面のことです。元々は自動車の「計器盤」のことを指していたようで、情報をまとめて表示するツールという意味です。

下記は、WordPressのダッシュボード(初期設定状態)です。大きく、「上部メニューバー」「左メニューバー」「真ん中の設定画面」の3つのレイアウトに分かれています。
WordPressの管理画面
 

左管理メニューバーでは、投稿や固定ページ、外観、プラグインなどWordPressの重要な管理操作を行うことができます。
WordPress 左管理メニューバー
 

まずは管理画面とトップページの切り替え方法を覚えておきましょう。
 
左上のサイトのタイトル名>サイトの表示をクリックするとトップページに移動します。同様に、サイトのタイトル名>ダッシュボードをクリックすると管理画面(ダッシュボード)に移動します。


 

つぎに、WordPress管理画面の主な名前と意味について覚えておきましょう。

WordPress 管理画面 (ダッシュボード)

WordPress 管理画面 (ダッシュボード)


 

項目 内容
投稿 ブログは投稿で作成します。時系列で最新情報が一番上に表示されていきます。お知らせ情報やブログなど投稿機能を利用するのが一般的です。
固定ページ 固定ページは会社情報やお問い合わせなどの単体ページで決まった箇所に表示しておきたいページで利用します。ページ作成の機能自体は投稿とほぼ同じですが、投稿と違って一覧のなかには表示されません。
外観 その名の通り、外観ではサイトの外観(デザイン)系の設定を行います。テンプレートやメニューバーなどもここで設定できます。

  • テーマ(テンプレート)の設定
  • メニューバーの設定
  • ウィジェットの設定
プラグイン スマートフォンでいうアプリの追加機能です。お問い合わせ機能やサイトマップなどWordPress自体が持っていない機能をプラグインという形で追加することができます。
設定 サイト名・キャッチフレーズやURLの構造設定、トップページの表示設定などの各設定ができます。

 

関連記事

本記事では割愛しますが、ダッシュボードの各項目と意味については「【WordPressダッシュボードとは?】管理画面の見方と意味を解説」で詳しく説明していますので、ダッシュボードの各項目を詳しく知りたい方はあわせてご参照ください。

 
■WordPressの管理画面の見方(動画解説版)

 
 

(4/12)デザインテンプレート「テーマ」を設定する

ステップ6 WordPressのデザインテンプレート「テーマ」を設定する
 

まずはWordPressのテーマのインストールを行いましょう。WordPressで利用する「テーマ」とは、一言で言うとデザインのテンプレートのことです。
 

人に例えると、「服」のようなイメージになります。テーマ(服)を変更することで、見た目や外観の変更・関連機能を変更することができます。
WordPressテーマのイメージ テーマ≒服
 

WordPressでは、無料・有料含めて様々なテーマがリリースされています。利用者は多数あるテーマの中から自分に合うデザイン・機能のテーマを利用することができます。

WordPress テーマ 追加画面

WordPress テーマ 追加画面


 

WordPressでは品質の高いテーマが多数あるので、自作しなくても綺麗なデザインのホームページを作ることができます。

 

合わせて読みたい記事

WordPressおすすめテーマ総まとめ
 

●今回は無料版Lightningで説明していますが、Lightningにはより高機能な「Lightning Pro」という上位版テーマがあります。

そのほかのおすすめテーマは下記をご参照ください。
タイプ別WordPressおすすめ有料テーマ8選をご紹介

タイプ別ワードプレスおすすめ無料テーマ8選をご紹介

 

ここでは、WordPress初期状態のテーマから無料テーマ「Lightning」を適用する例で説明していきます。

WordPressの管理画面上の外観>テーマを選択します。
WordPress 外観>テーマ
 

新規追加ボタンを押下します。
WordPress テーマ 新規追加
 

検索窓で探しているテーマを入力します。ここでは有名な無料テーマ「Lightning」を使います。「Lightning」と入力して表示された下記のテーマをインストールします。
WordPress テーマ Lightning インストール
 

有効化します。
lightning 有効化
 

以上でテーマの適用は完了です。トップページを参照するとテーマが適用されて、見た目がガラリと変わっていることがわかります。
WordPress テーマ Lightning が適用された
 

合わせて読みたい記事

公式以外のテーマの場合:zipファイル化されたテーマをアップロードする(主に有料テーマはこちらの方法)という方法もあります。
 
サイトからダウンロードしたzip形式のテーマをインストール・設定する方法については、「【初心者向け】WordPressのテーマのインストール・設定方法を徹底解説」をご参照ください。

 

■WordPressのテーマのインストール方法(動画解説版)


 
■目的別WordPressおすすめ無料テーマ6選(動画解説版)

 

(5/12)投稿でブログを書く

テーマの設定が終わったら、WordPressのブログ機能である「投稿」の使い方を覚えていきましょう。
 

ワードプレスの投稿機能
 

投稿はブログとして利用できる機能です。一般的には、お知らせやコラム、技術情報や時事情報などで使われることが多いです。

投稿を新規追加するには、投稿>投稿一覧をクリックします(投稿>新規追加でもOK)。
投稿>投稿一覧
 

投稿一覧画面が表示されます。「新規追加」ボタンを押下します。
投稿一覧>新規追加
 

はじめてブロックエディターの画面を開いた時には、ガイドが表示されます。今回ば「×」を押していったん閉じます。
ブロックエディター  はじめに ガイドを閉じる
 

下記のような編集画面が初期状態で表示されます。大きく、メインのエディターエリアと上部ツールバー、右のツールバーがあります。
ブロックエディター の基本画面レイアウト
(※)上記はWordPress5.5の画面です。バージョンによって若干の差異があるのでその場合はご自身のご利用の画面に合わせて読み替えてください。
 

まずはタイトルと文章を書いたのち公開をして表示を確認してみましょう。


 

次に見出しを挿入してみましょう。+ボタンを押して、「見出し」を選択します。文末の+から末尾に追加することもできますし、ブロック間の間にカーソルを合わせて表示される+からブロックを間に挿入することもできます。

(※)見出しは本の章のようなものです。見出しは階層を持つことができます。h1が本のタイトルに相当して、H2は第1章・第2章、H3は第1-1章、第1-2章のような階層です。
 

次に画像を挿入してみましょう。右下+ボタンを押して「画像」を選択、自分の好きな画像を選択します。必要に応じて右ツールバーから画像ブロックの設定もできます。


 

素材サイトを利用しよう

実際にホームページを作って行く際に、良い画像がなくて素材不足になることがよくあります。また、ネットで検索して出てきたものは著作権で保護されているものもたくさんあるので安易に使ってはいけません。
 

ネットには、自由に使えて商用利用可能な画像素材サイトもたくさんあります。「【おすすめ素材サイト総まとめ】ホームページで使えるフリー・有料素材25選」にホームページ作成に使えるおすすめ素材サイトを一挙紹介していきますので、是非ご参考ください。

 

ページを公開しても良い場合は、「公開」ボタンを押下して保存しましょう。ページが公開されて一般の人も閲覧できるようになります。


 

WordPress5.0から標準エディターとなったブロックエディター

2018年12月末にリリースされたWordPress5.0から新しいエディター「ブロックエディター」が標準エディターになっています。

2018年以前はWordのようなエディター(クラシックエディター)が標準となっていました。
ワードプレスの新旧エディター(Classic EditorとGutenberg Editor)
 

旧エディター(クラシックエディター)の方にあえて戻したい場合は、プラグイン「Classic Editor」を利用することで従来のエディターに戻すことができます。ただし、今から新しくWordPressを覚えるなら、ブロックエディターで覚えると良いでしょう。

【Classic Editor】WordPressでブロックエディターから旧クラシックエディターに戻す方法

 
■WordPressの投稿機能の使い方(動画解説版)


 
 

(6/12)固定ページを作成してメニューバーに設定する

次に、固定ページを作成してメニューバーを設定していきましょう。

下記のようにワードプレスでメニュー(グローバルナビゲーション)を作成するやり方をご紹介します。(※)メニューの位置や見え方はテーマによって異なります。
ワードプレスで設定するメニューバーの例
 

今回メニューを作成する大きなステップは下記の通りです。

メニューバーを作成する概要手順

  1. 事前に各メニューリンク先となる固定ページを作成する
  2. メニューバーを作成する。1で作成した各固定ページをメニュー項目として配置する

 

(6-1)固定ページを作成する

まずは固定ページを作成していきます。ワードプレスの固定ページとは、「会社情報」や「お問い合わせ」のように、ページ単体で完結できるページで利用します。
 

■例)固定ページで作成したお問い合わせページ
ワードプレス固定ページの例
 

「投稿」と同様にページを作成する機能に「固定ページ」という機能があります。
 

一般的に固定ページでは「会社情報」や「お問い合わせ」などページ単体で独立している内容で、メニューバーなど決まった位置に表示しておきたいページで固定ページで利用します。固定ページで作成したページは投稿一覧の中には表示されません。
 

ワードプレスの投稿と固定ページの違い
 

「投稿」はカテゴリーやタグによりページ同士をジャンル分けして一覧表示することができるのに対して、「固定ページ」は通常カテゴリーやタグという概念がなく、ページ単体で独立しています。
 

項目 投稿 固定ページ
特徴 ブログのようなコンテンツは投稿で作成する
例)コラム、技術情報、お知らせ・ニュース、イベント、商品ページなど
ページ単体で完結できるようなコンテンツを書くのに向いている。
例)トップページ、会社情報、お問い合わせ、アクセス、採用情報、ランディングページなど
できること
  • カテゴリー・タグによる投稿の関連付けができる
  • 投稿一覧、カテゴリー一覧、タグ一覧から各ページを一覧表示できる
  • 複数のブログタイプ(カスタム投稿タイプ)を作ることができる
  • 固定ページ同士で親子関係を作ることができる
  • ページごとにデザインテンプレートを作成・選ぶことができる
できないこと
  • 投稿同士で親子関係を作ることができない。
  • ページごとにデザインテンプレートを選択することができない。
  • カテゴリー・タグによる投稿の関連付けができない
  • 固定ページ一覧、カテゴリー一覧、タグ一覧などで各ページを一覧表示できない

 
固定ページは、投稿と違ってページを作成しても投稿一覧の中には表示されませんので、自分でメニューバーなどに表示する設定が必要です。
 

固定ページは固定ページ>新規追加から作成することができます。
ワードプレス 固定ページの新規追加
 

固定ページの使い方は、投稿とほぼ同様なのでここでは割愛します。固定ページの詳しい使い方は「WordPress固定ページの使い方を徹底解説」をご参照ください。
 

まずは事前準備として、ここでは下記の固定ページを作成しておきます。

事前に作成しておく固定ページの例

  • HOME
  • お問い合わせ
  • お客様の声
    • スクール受講生の声
    • セミナー受講生の声
    • 法人様の声
  • ブログ
  • 会社情報

 

固定ページ>固定ページ一覧をみると下記のような状態になっているように、固定ページを作成してみてください。
事前に作成しておく固定ページ
 

■WordPress 固定ページの作り方(動画解説版)


 

(6-2)メニューバーを作成する

固定ページを一通り作成できたらメニューを作成していきます。

■WordPressメニューバーの作り方・カスタマイズ方法3〜ヘッダーメニューとフッターメニューを使い分ける方法〜(動画解説版)


 

手順としては、まず(1)箱(入れ物)となるメニューを作り、(2)その中に先ほど作った固定ページ(メニューアイテム)を割り当てて、(3)最後に作成したメニューをどこに表示するという順番になります。
WordPress メニューバーの概念
 

管理画面から外観>メニューの設定を選択します。

WordPress 外観>メニュー

WordPress 外観>メニュー


 

まずメニューを作成します。ここでは、「メインメニュー」(※)と入力してメニューを作成ボタンを押下します。
メインメニューと入力してメニューを作成する
(※)名称はなんでもOKです。
 

メインメニューが作成されました。以下はメニューバーの構成です。左側のメニューアイテム(項目)があります。任意のメニューアイテムを作成したメニューに設定し、最後に位置を決めて保存することができます。
メニューバーの構成
 

ここでは事前に作った固定ページの項目をチェックして、「メニューに追加」ボタンを押下します。
事前に作成した固定ページにチェックを入れてメニューバーに追加ボタンを押下する
 

(※)固定ページがたくさんあり表示されていない固定ページがある場合は「全て表示」タブを選択すると全て表示されます。
全て表示で全ての固定ページを表示
 

追加したメニューは、ドラッグ&ドロップでメニューの順番を変えることができます。


 

最後にメニューの設定を行います。ここではHeader NavigationとFooterNavigationにチェックを入れて最後にメニューを保存ボタンを押下します。
ここではHeader NavigationとFooterNavigationにチェックを入れて最後にメニューを保存ボタンを押下します
 
(※)Header NavigationとFooterNavigationという名称はご利用のテーマによって違います。また、テーマによっては1つしかチェックができない場合も3つある場合もあります。
 
以上で、メニューの追加は完成です。
 

最後に設定した、メニューの設定でHeader NavigationとFooterNavigationにチェックを入れたのは、何をしたのでしょうか??

最後のメニューの設定は、作成したメニューをどこに配置するかを設定します。
本例では、ヘッダーの位置とフッターの位置に配置できるので、両方にチェックを入れてメインメニューを表示しています。

 

ヘッダーとフッターの両方に作成したメインメニューが表示される
ヘッダーとフッターの両方に作成したメインメニューが表示される
 

ここでは、メニューバーを作り固定ページを割り当てる設定方法を簡単に説明しました。

他にも任意のURLを設定したり(カスタムリンク)、投稿カテゴリーや個々の投稿ページなどをメニューバーに割り当てることもできます。

詳しい使い方は「WordPressヘッダーメニューバーの作り方と設定方法」を合わせてご参照ください。
 
■WordPressメニューバーの作り方・カスタマイズ方法1(動画解説版)


 

■WordPressメニューバーの作り方・カスタマイズ方法2(動画解説版)


 

 

(6-3)表示設定で、固定ページをトップページに割り当てる

表示設定から作成した任意の固定ページをトップページに割り当てることができます。ここでは、固定ページをトップページに割り当てる表示設定を行なっていきます。
 

ダッシュボードの設定>表示設定を選択します。
設定>表示設定
 

表示設定が表示されます。
表示設定
 

初期設定は、トップページの表示が「最新の投稿」一覧が表示される設定になっています。
表示設定 トップページに最新の投稿一覧が表示される設定になっている
 

トップページに事前に作成した固定ページ「HOME」を割り当てます。
表示設定 トップページに固定ページを設定する
 

これで、トップページを表示すると「HOME」の内容が表示されるようになりました。
ここで設定するんですね!でも、もともとトップページに表示されていたブログ一覧ページはどこに表示されるでしょうか?

ブログ一覧ページも任意に固定ページに割り当てることができます。続けて説明していきますね。

 

「投稿ページ」に事前に作成した固定ページ「ブログ」を割り当てましょう。
表示設定 投稿ページに固定ページを設定する
 

設定が完了したら最後に変更を保存しましょう。


 

以上で設定は完了です。トップページに「HOME」の内容が、「ブログ」にはブログ一覧が表示されて入れば完了です。

 
 

(7/12)ウィジェットでサイドバーやフッターを設定する

次に、外観>ウィジェットからサイドバーやフッターを設定していきましょう。
 

WordPress5.8から導入されたブロックウィジェットについて

2021年7月20日にリリースされたWordPress5.8以降は、ブロックウィジェットという新しい画面になりました。
現時点ではまだテーマやプラグインの対応状況がまばらであるため、本記事は従来版(クラシックウィジェット)の説明でご紹介しています。
従来のウィジェットに戻すには「Classic Widgets」をインストールしいます。詳細手順は下記をご参照ください。
【Classic Widgets】ウィジェット画面を戻すWordPressプラグイン

 

■【WordPressウィジェットとは】ウィジェットの使い方(動画解説版)


 

ワードプレスにおけるウィジェットとは、ブログパーツ(部品)のことです。ワードプレスでは、バナーやテキスト、検索窓や投稿一覧など任意のパーツをサイドバーなどに追加することができます。
 

ワードプレスのウィジェット機能の説明
 

ウィジェット(パーツ)の一例

  • テキスト・画像
  • 最新の投稿一覧
  • お問い合わせ情報・バナー
  • 検索窓

 

WordPressでは、ウィジェットというページの特定部分の表示をカスタマイズできる機能があります。サイドバーやフッターなどの部分でウィジェットでバナーを追加したり、投稿一覧を表示したりなど設定することができます。
 


 

ウィジェットの追加方法について説明して行きます。ウィジェットは外観>ウィジェットから設定します。
外観>ウィジェットをクリックします。
 

左側の追加したいウィジェットタイプを選択してドラッグ&ドロップで任意の箇所にウィジェットを追加します。
ワードプレスのウィジェット画面。任意のウィジェットを 任意のエリアに配置していきます。
 

右側の配置エリアですが、サイドバーだけじゃなくて、サイドバー(トップページ)とかフッター(xxx)とか色々なものがあるんですね??

右側の配置エリアの名称や種類は、適用しているテーマによって異なります。「サイドバー」一つだけの場合もあれば、上記例のようにサイドバー(xxx)のほかにフッターにもウィジェットを配置することができるようになっている場合もあります。

 

ウィジェットタイプを選択して、任意の箇所にウィジェットを追加します。
ウィジェットタイプを選択してドラッグ&ドロップで任意の箇所にウィジェットを追加する
 

下記はテキストタイプのウィジェットです。設定後に保存して完了です。
テキストウィジェットを保存
 

トップページで、サイドバーにテキストウィジェットが追加されたことを確認して完了です。
トップページのサイドバーにテキストウィジェットが追加された
 


 

WordPressウィジェットの詳しい使い方については「初心者でもわかるWordPressウィジェットの使い方を徹底解説」を合わせてご参考ください。
 
 

(8/12)メインビジュアルや色などのテーマの設定を行う

次に、メインビジュアルや色などのテーマの設定を行っていきましょう。
 

外観>カスタマイズから、テーマカスタマイザーを開くことができます。
外観>カスタマイズ
 

テーマカスタマイザーは、テーマのレイアウト・表示に関する設定を行う機能です。
 
WordPress テーマカスタマイザー
 

補足)テーマカスタマイザーはトップページ上部のバーの「カスタマイズ」からでも開くことができます。
トップページ>テーマカスタマイザー

 

ご利用のテーマによって、ここの表示項目や設定のやり方は異なりますのでご注意ください。

 

Lightningの場合は、「Lightning トップページスライドショー」からスライドショーの設定変更ができます。
Lightning トップページスライドショー
 

実際に変更してみましょう。下記のようにスライドショーの画像を変更して「公開」ボタンを押せば完了です。


 

テーマにもよりますが、多くのテーマでは、このカスタマイザーからトップページ画像の設定、色の設定、その他デザインに関わる設定を行えることが多いです。

自分の使っているテーマで、どんな設定項目があって、どんな設定ができるのか確かめてみますね!

 
 

ここではLightningの詳しい使い方は割愛しますが、Lightningの使い方については「WordPressテーマLightning(ライトニング)の使い方【VK All in one Expansion Unitも解説】」をご参照ください。
 
 

(9/12)お問い合わせフォームを作成する

次に、お問い合わせフォームを作成しておきましょう。お問い合わせフォームを実装するにはプラグインを利用します。
 

プラグインとは、スマホのアプリのような機能で、WordPress本体にない機能をプラグインを追加することで追加機能を実装することができます。
プラグインの概念 プラグインをインストールすることでWordPressに新たな機能を追加する
 

ここでは有名なお問い合わせフォームプラグイン「Contact Form 7」を利用してお問い合わせフォームを作成する例をご紹介したいと思います。

本手順の事前準備として、はじめに「お問い合わせ」という本文なしの固定ページを作成しておいてください(前述の固定ページ作成手順ですでに作成している場合は不要です。)
固定ページ お問い合わせ
 

つづいてお問い合わせフォーム「Contact Form 7」をインストールしていきます。

管理画面でプラグイン>新規追加を選択してください。

 

Contact Form 7」と入力して検索します。富士山の絵が出てきている「Contact Form 7」をインストールします。
「Contact Form 7」で検索して「今すぐインストールする」
 

お問い合わせフォーム「ContactForm」を有効化します。
「Contact Form 7」を有効化する
 

ContactForm7を有効化すると、左側の管理メニューに「お問い合わせ」が出現しています。コンタクトフォームを選択します。

WordPress お問い合わせフォーム「ContactForm」 お問い合わせが出現。コンタクトフォームを選択

お問い合わせが出現。コンタクトフォームを選択


 

プラグインを追加すると、今回のように左側の管理メニューのどこかにプラグインの設定項目が表示されることが多いです。

 

「コンタクトフォーム 1」の右側にある[]内のショートコードをコピーします。

WordPress お問い合わせフォーム「ContactForm」 []内のショートコードをコピー

[]内のショートコードをコピー


 

任意のページにコピーしたショートコードを貼り付けます。ここでは、事前に作成した固定ページ「お問い合わせ」に貼り付けています。ウィジェット>ショートコードから埋め込みましょう。


 

(補足)旧エディターをご利用の場合

従来のクラシックエディターご利用の方は、そのままショートコードを貼り付けましょう。

任意のページにコピーしたショートコードを貼り付ける

任意のページにコピーしたショートコードを貼り付ける

 

プレビューを表示してお問い合わせフォームが表示されていれば完了です。実際にフォームに入力して問い合わせしてみましょう。

Contact Form 7のショートコードを貼り付けた固定ページでお問い合わせフォームが表示されている
 

初期状態では、ワードプレスインストール時に設定したメールアドレス宛に問い合わせ内容が通知されていればOKです。(届いていない場合は迷惑メールも確認してみてください)

問い合わせが通知されている
 

Contact Form 7では、フォームの入力項目の追加や通知メールの設定、サンクスメールの設定など色々な設定ができます。ここでは、割愛しますが「WordPress お問い合わせフォームの作り方 プラグインContact Form 7」で詳しく説明していますので、ぜひご参考にしてください。
 

こんな風にしてプラグインを追加・設定していくんですね。

はい。スマートフォンのアプリと同じで、プラグインも色々な種類があり、有料のプラグインも販売されていたりします。

 

WordPressおすすめプラグインのについては、「WordPressのおすすめプラグインを利用シーン別に徹底解説!」に記載していますので、いろいろプラグインをみてみたい方は合わせてご参照ください。
 
■Contact Form 7の使い方・その1(動画解説版)


 

■Contact Form 7の使い方・その2(動画解説版)

 

(10/12)WordPressブロックエディターの使い方を更に覚える

前述の手順で、WordPressの投稿や固定ページの編集画面(ブロックエディター)の使い方を簡単にご紹介しましたが、WordPressの基本操作に慣れてきたらブロックエディターの細かい使い方を覚えていきましょう。

ブロックエディターでは、「ブロック」と言われる単位で見出しや画像や文章を追加してページを作っていく形になります。
ブロックエディター の概念
 

■WordPressのブロックエディターの使い方(動画解説版)

 
 

ブロックエディターの使い方詳細については「WordPressブロックエディターの使い方総まとめ」で詳しく解説していますのであわせてご参照ください。
 

(11/12)WordPressの初期設定と使い方を覚える

WordPressのこれまでの操作に多少慣れてきたら、セキュリティ・バックアップ・SEO対策などの初期設定をしたり、WordPressの使い方をもっと覚えていきましょう。

本サイトでおすすめの初期設定は下記の通りです。

WordPressでおすすめの初期設定

  1. サイト名とキャッチフレーズの設定をする
  2. URL構造 パーマリンクを変更する
  3. ブログ表示名(ニックネーム)を設定する
  4. 日本語バグ修正パッチを導入する
  5. セキュリティ対策をする
  6. バックアップ設定をする
  7. SEO対策を行う

 

 

SEO対策の設定などの初期設定系の内容は、初心者には少し意味のわからない設定も多いですので、設定が難しい場合はまずWordPressをしばらく触ってみて使い方に慣れてから初期設定を行うようにしましょう。
 

(11-1) サイト名とキャッチフレーズの設定をする

サイト名や初期状態のキャッチフレーズ「Just Another WordPress Site」は適切な内容に変更しておきましょう。

サイト名とキャッチフレーズの変更するには、設定>一般設定を選択します。
設定>一般設定
 

一般設定が表示されます。ここで、サイトのタイトルを変更します。また、同時にキャッチフレーズも変更することができます。
一般設定>サイトのタイトルとキャッチフレーズ
 

ここでは下記のように変更して保存します。
WordPress一般設定>サイトのタイトルとキャッチフレーズを変更
 

「サイトのタイトル」および「キャッチフレーズ」と検索結果で使われるtitleタグの関係

検索結果で使われるtitleタグの設定」と、先ほど設定したWordPressの「サイトのタイトル」および「キャッチフレーズ」の関係について説明します。

サイトのタイトルおよびキャッチフレーズと、titleタグの関係ですが、多くの場合は下記のようになります。

ページの種類 titleタグの命名規則
トップページ サイトのタイトル – キャッチフレーズ
トップページ以外 各ページのタイトル – サイトのタイトル

 

サイト名のタイトル、キャッチフレーズ と<title>タグ(サイトタイトル)の関係
 

下記は、サイトのタイトル「大阪の個別指導WEBスクールWEBST8」、キャッチフレーズ「WordPressホームページの作り方ならお任せ」の場合の具体例です。
サイトのタイトル、キャッチフレーズ
と<title class=

■サイトのタイトル「大阪の個別指導WEBスクールWEBST8」、キャッチフレーズ「WordPressホームページの作り方ならお任せ」の場合、titleタグは下記のようになります。

ページの種類 titleタグの命名規則
トップページ 大阪の個別指導WEBスクールWEBST8 – WordPressホームページの作り方ならお任せ
トップページ以外
例.固定ページ「会社情報」の場合
会社情報 –大阪の個別指導WEBスクールWEBST8

 

キャッチフレーズ空白の場合のタイトルタグ

キャッチフレーズにはサイトの簡単な説明を入れる場合もありますが、トップページのタイトルタグを簡潔にするために、空白にして運用している場合もあります。

キャッチフレーズを空白に
 

キャッチフレーズを空白にした場合、多くの場合はトップページ「サイトのタイトル」、トップページ以外「ページタイトル – サイトのタイトル」のようになります。
 

■キャッチフレーズを空白にした場合

ページの種類 titleタグの命名規則
トップページ サイトのタイトル
トップページ以外 各ページのタイトル – サイトのタイトル

 

■キャッチフレーズ空白の例
キャッチフレーズ空白の例

ただし、テーマによってはトップページが「サイトのタイトル -」や「サイトのタイトル |」のようにセパレーターの記号がついてしまっている場合もあります。

テーマによっては独自の設定で上記命名規則から変更できる場合もありますし、SEOプラグインを導入してタイトルを独自に変更する場合もあります。

 

(関連記事)WordPressサイト名(タイトル)の変更方法と何を入れるべきか
(関連記事)WordPressキャッチフレーズ変更方法と何を入れるか・空白?
 

(11-2) URL構造 パーマリンクを変更する

次にWordPressのパーマリンクも変更しておきましょう。

パーマリンク(Permanent Link)とは直訳すると「恒久的なリンク」です。WordPressでは、固定ページ、投稿やカテゴリーなどの各ページのURLのことを指します。

パーマリンク
 

WordPressのパーマリンク とは
 

パーマリンクの設定は後から実施することも可能ですが、最初に設定すべき項目です。なぜなら、後から変更すると、外部リンクからの以前のURLにアクセスした時に404エラーが起きたり、SEOに悪影響を及ぼす可能性があるからです。
 

後からパーマリンクを変更する場合の注意点
 

それでは、具体的なパーマリンクの設定方法について説明していきます。ダッシュボード(管理画面)にて、設定>パーマリンク設定を選択します。

WordPress パーマリンクの設定 設定>パーマリンク設定

設定>パーマリンク設定


 

パーマリンクの共通設定画面が表示されます。ここでは、パーマリンクの共通設定を「投稿名」にして保存します。
パーマリンクの共通設定で「投稿名」を選択して変更を保存
 

投稿名でなくとも構いませんが、ここではSEOと運用の観点から当サイトでおすすめの選択肢「投稿名」を例にしました。

 

以上でパーマリンクの共通設定は完了です。
 

注意)パーマリンクを変更すると今までの投稿URLも変更されますすでに投稿で何件かブログを書いている場合は、すでに公開しているブログのURLも変更されますので注意しましょう。
 

(関連記事)WordPressのパーマリンクの変更手順とおすすめ設定
 

■WordPressパーマリンク/スラッグの変更方法&おすすめ設定(動画解説版)


 

 

(11-3) ブログ表示名(ニックネーム)を設定する

ご利用のテーマによっては、ブログの投稿画面で、ユーザーIDがそのまま表示される場合があります。
ユーザー名がログインIDのためセキュリティ上好ましくない
 

今まで気づかなかったんですが、こんなところにログインIDが表示されているんですね。。

adminとかdeveloperとか、意味のわからないIDが表示されていたらユーザーにも不信感を与えてしまいますね。

 

管理者の設定で表示名は変更することができますので、表示名を変更してあげましょう。管理画面から、ユーザー>あなたのプロフィールを選択します。
ユーザー一覧>あなたのプロフィール
 

自分のユーザーアカウント情報が表示されますので、ニックネームというところを変更します。ニックネーム変更後に、ブログ上の表示名をプルダウンでニックネームで設定した値を選択します。設定できたらユーザー更新ボタンを押して保存しましょう。


 

変更後、再度ブログを表示すると、前述の手順で設定したブログ表示名が表示されていることがわかります。
ユーザー名が表示用の名前に変更された
 

これなら利用者から見ても、わかりやすいですね!

 

 
 

(11-4) WordPress日本語バグ修正パッチを導入する

次に、WordPress日本語バグ修正のプラグイン「WP Multibyte Patch」を導入しておきましょう。
 

WP Multibyte Patch WordPressおすすめプラグイン
 

WordPressはもともと英語圏で作らているため、日本語(マルチバイト)で不具合が起きやすい性質があります。Wp Multibyte Patchはこれを予防してくれます。最初に有効化しておきましょう。
 

プラグイン>新規追加から「WP Multibyte Patch」を検索してインストールしてください。
WP Multibyte Patchのインストール
 

そのまま有効化します。
WP Multibyte Patchの有効化
 

(11-5) セキュリティ対策を行う

WordPressの初期状態は、セキュリティ的にあまり強いとは言えません。本サイトでは、有名なセキュリティ対策プラグイン「SiteGuard WP Plugin」を導入しています。
 

SiteGuard WordPressおすすめプラグイン
 

SiteGuard WP Pluginは、WordPressにインストールするだけで、セキュリティを向上させることができるシンプルなセキュリティ対策プラグインです。不正ログインの防止やWebページの改ざん、スパムなどを防ぐことができます。
 

SiteGuard WP Pluginの主な機能

  • 不正ログインの防止
  • 管理ページ(/wp-admin/)への不正アクセスの防止
  • コメントスパムの防止

 

基本的にプラグインをインストールすれば有効化されるばOKです。
 

具体的な導入方法や設定項目については「【セキュリティ対策】WordPress「SiteGuard WP Plugin」の使い方を徹底開設」をご参照ください。
 
 

(11-6) バックアップ対策を行う

WordPressを導入したら、万一トラブルが起きたときのために、バックアップの設定をしておきましょう。

WordPressを触っていると「間違って変なところを触って画面が真っ白になってしまった。。。」「WordPressをバージョンアップしたら画面がおかしくなってしまった。。。」という万一の事態が起こる可能性があります。

つぎに、万が一WordPressに何かあった時に戻せるようにするために、バックアップの設定を行います。

ここでは、BackWPupというプラグインを導入してバックアップを取得します。まずは管理画面からプラグイン>新規追加ボタンを押下します。
管理画面>プラグイン>新規追加
 

まずはBackWPupをインストールします。
backwpup インストール
 

インストール後に有効化してください。
backwpup 有効化
 

BackWPupでは、手動で任意のタイミングでバックアップをとったり、曜日・日時指定でスケジュールバックアップを取ることも可能です。

プラグイン有効化後に左側の管理メニューにBackWPupが表示されます。新規ジョブを追加を選択します。(ご利用の環境によっては英語表示されている場合があります。)
BackWPup 新規ジョブを追加
 

一般タブでは、ジョブの名前とバックアップファイルの保存先を設定します。ここでは契約したサーバー内のフォルダーに毎日バックアップすることにします。下記の設定を行い保存します。

■一般設定タブ

  • ジョブの名前を「DailyBackup」
  • バックアップファイルの保存先を「フォルダーへバックアップ」


 

続けてバックアップスケジュールの設定をしていきます。スケジュールタブを開いてください。

スケジュールタブ

  • WordPress「cron」を選択
  • スケジューラーの種類「基本」
  • スケジュールを「毎日 4:10」(設定は運用に合わせて自由にしてください)

BackWPup スケジュール設定
 

バックアップ時間はデフォルト「午前3時」以外で

以前、デフォルトの「午前3時」でバックアップを取る人が多くて同時間にレンタルサーバーの負荷が高まりサポートデスクから変更を依頼される方がいらっしゃいました。そのため、レンタルサーバー内でバックアップ時間は、デフォルト「午前3時」から変更することをおすすめします。
 
■サポートデスクからのメール
レンタルサーバーからのサポートメール。デフォルトの時間から変更を依頼された

 

つぎに、保存先となるフォルダーの設定をみています。ファイルを削除:何世代分のバックアップデータを残すかを設定できます。ここではデフォルトの15のままにしておきます。
BackWPup宛先:フォルダー設定
 

※自動でバックアップするとどんどんデータがたまるので、今回の場合だと16回目のバックアップ以降は最も古いファイルから自動削除されます。

 

以上でバックアップ設定の完了です。初回は念のため手動で今すぐバックアップもしておきましょう。作成したジョブを確認するために左の管理画面から「BackWPup>ジョブ」を選択します。
backWPup 設定>ジョブ
 

前述の手順で作成したバックアップジョブに対して、「今すぐ実行」で手動でバックアップを実行します。
BackWPup バックアップを今すぐ実行
 

バックアップが完了した場合は以下のように完了画面が表示されます。
BackWPupバックアップ完了画面
 

バックアップファイルを確認するために左側の管理メニューから「BackWPup>バックアップ」を選択します。
BackWPup 設定>バックアップ
 

先ほど実行したバックアップファイルがあることを確認します。

BackWPupの詳しい説明と復元方法については下記関連記事をご参照ください。
【BackWPupの使い方】WordPress バックアッププラグイン
【WordPress復旧手順】バックアップから復元・元に戻す方法
 

(11-7) SEO対策を行う

WordPressを導入した直後は、SEO対策・設定があまりなされていない状態です。

一般的によくある設定は下記のとおりです。

  • Google Analyticsに登録する
  • Google Search Consoleに登録する
  • XML Sitemapを登録する

Google Analyticsの登録のやり方はテーマやプラグインによって異なるためここでは割愛します。

サイトを立ち上げたばかりの人やテーマが決まっておらず、まだ難しい場合は一旦飛ばしても大丈夫です。

下記を参考に設定みましょう。
WordPressテーマLightningの使い方【VK All in one Expansion Unitも解説】
Google Analyticsの設定方法と仕組み・見方を徹底解説
Googleサーチコンソールの登録・設定方法と見方を徹底解説

 

(12/12)ホームページに必要な情報・コンセプトを整理する

最後に補足として、ホームページ作成の上で知っておきたい関連項目や知識・サイトをご紹介していきます。
 

ホームページのコンセプトを整理する

ホームページのコンセプト作りも重要ですので、合わせてこのホームページを誰向けにどう見せていくかも整理しておきましょう。

(※)Webマーケティングなどを意識してホームページを作る場合は本来最初に実施する行程ですが、今回はあくまで作り方にスポットを当てているため補足として説明しています。
 

ホームページのコンセプト作り

  • ホームページの目的を明確化する
  • ホームページのターゲット(ペルソナ)を決める
  • ホームページのターゲットに向けたコンテンツを決める
  • ホームページの重点キーワードを決める
  • 競合サイトを調査する

 

 

サイト構成(サイトマップ)を考えよう

これまでは、物理的な手順・作り方を主に説明してきましたが、実際にページを作る際には、サイトの設計が重要になります。

たとえば、どんなページ構成にするのか、どういった情報を掲載するのかなどですね。あまり深く考えすぎないでも構いませんが、下記のような構成図を作っておくと、それに沿ってサイトを作っていくことができるのでおすすめです。
 

サイト構成(サイトマップ)
 

どのようなコンテンツを作るべきかについては、これから作成する業種・内容によってまちまちなので一概には言えませんが下記のような項目はよくあるコンテンツです。
 

もし自分の作成するホームページにマッチする場合は作っておきましょう。
 

トップページ(HOME)、サービス(事業内容)、料金表、製品情報、会社情報(プロフィール)、初めての方へ、代表者あいさつ、リクルート(スタッフ募集)、社員の声、よくある質問、実績(作品)、お客様の声、お問い合わせ、メディア掲載歴、お知らせ、ブログ(コラム)

どんなコンテンツを候補にできるかは、あなたと同じ業種・業態のホームページを調べてみて参考にするのが近道だと思います。

 
 

写真素材・イラスト素材サイトを活用しよう

実際にホームページを作成する際に、良い画像がなくて素材不足になることがよくあります。また、ネットで検索して出てきたものは著作権で保護されているものもたくさんあるので安易に使ってはいけません。

ネットには、自由に使えて商用利用可能な画像素材サイトもたくさんありますので活用しましょう。

ジャンル 素材サイト名 概要 公式サイト
無料
写真
素材
サイト
画像素材サイト photo-ac

写真AC

写真ACは、日本の巨大写真素材サイトです。利用には無料の会員登録が必要ですが、人物・風景・パターン画像など多くの画像が提供されています。
詳しくはこちら
公式サイト
画像素材サイト pixabay

PIXABAY

ビジュアル重視の美しい素材が多いので壮大・綺麗・神秘的・グローバルなコンテンツに向いています。
詳しくはこちら
公式サイト
BURST トップページ

BURST

BURST(バースト)は、ネットショップサービス大手のshopify(ショピファイ)が運営するフリー素材サイトです。
詳しくはこちら
公式サイト
foodiesfeed トップページ

foodiesfeed

フード(食べ物)に特化した、野菜や果物、料理の写真が豊富な海外のフリー写真素材サイトです。
詳しくはこちら
公式サイト
写真素材サイト unsplash

upsplash

Unsplashは海外のフリー素材サイトで、ビジュアル重視の美しい素材が多く、壮大・綺麗・神秘的・グローバルな写真がたくさんあります。
詳しくはこちら
公式サイト
画像素材サイト ぱくたそ

ぱくたそ

ぱくたそは日本人の素材が多い有名なフリー素材サイトです。個性的なリアクションの人物素材が多い傾向があります。
詳しくはこちら
公式サイト
GirlyDrop トップページ

GirlyDrop

GirlyDropは、その名前の通りおしゃれでガーリーな写真に特化した写真素材サイトです。女性、ファッション、美容、カフェ、誕生日、イベントなどなどかわいい系の写真が多くあります。
詳しくはこちら
公式サイト
Photock トップページ

フォトック

Photock(フォトック)は、域や自然風景・植物、動物・建築物・夜景・ビジネスなどの様々なシーンの写真がある写真素材サイトです。
詳しくはこちら
公式サイト
有料
素材
サイト
有料素材サイト adobestock

Adobe Stock

「Atobe Stock」は、Adobe社が提供する有料素材サイトです。写真がメインですが、高品質のイラスト・アイコン・シルエット類も多数揃っています。
詳しくはこちら
公式サイト
Shutter Stock の素材サンプル

Shutter Stock

「Shutter Stock」は、画像、動画クリップ、音楽などが揃っている世界で有名な有料素材サイトです。写真がメインですが、高品質のイラスト・アイコン・シルエット類も多数揃っています。詳しくはこちら 公式サイト
iStock トップページ

iStock

iStorkは、ゲッティ・イメージズ・セールス・ジャパンが提供する有名な巨大有料素材サイトです。画像だけでなく、映像やイラストなども様々な素材が揃っています。
詳しくはこちら
公式サイト
PIXTA 有料素材サイト

PIXTA

PIXTA(ピクスタ)は、日本人の人物をはじめ、高品質な写真素材が揃う有名な有料素材サイトです。写真のクオリティーも非常に高いのが特徴です。
詳しくはこちら
公式サイト
イラ
スト
素材
サイト
イラスト素材サイト photo-ac

イラストAC

「イラストAC」は日本最大の無料イラスト素材サイトです。老若男女・動物・モノなど色々なイラストが揃っています。
詳しくはこちら
公式サイト
ソコスト トップページ

Socost(ソコスト)

「ソコスト」はシンプルで使いやすいイラスト素材です。主張しすぎないテイストで汎用性のあるイラストです。
詳しくはこちら
公式サイト
ちょうどいいイラスト

ちょうどいいイラスト

「ちょうどいいイラスト」は人物や物、記号などちょっとあったらいいなと思えるシンプルなイラスト素材サイトです。
詳しくはこちら
公式サイト
シグレニ トップページ

シグレニ(shigureni)

「シグレニ」は素朴で可愛い、女の子が中心に掲載されているイラスト素材サイトです。主張しすぎないテイストの女の子のイラストでどんなサイトにも馴染みやすそうです。
詳しくはこちら
公式サイト
unDrow

unDrow(アンドロウ)

「アンドロウ」は海外のシンプルなイラスト素材サイトです。IT・Webサービス系のサイトに利用できそうなイラストが多いです。
詳しくはこちら
公式サイト
イラスト素材 いらすと屋

いらすとや

「いらすとや」は、子供や大人・おじいちゃん・おばあちゃんなどの人物など独特のかわらしいイラストがたくさんある定番素材サイトです。
詳しくはこちら
公式サイト
シルエットAC

シルエットAC

「シルエットAC」は無料のシルエット素材サイトです。シルエット素材をお探しの場合におすすめのサイトです。詳しくはこちら 公式サイト
アイコン素材サイト icooon-mono

icooon mono

「icooon mono」は、アイコン素材に特化した素材サイトです。WEBデザインやDTP、ビジネスシーンで活用できるアイコンが揃っています。詳しくはこちら 公式サイト
human pictogram 2.0 (無料人物 ピクトグラム素材 2.0)

human pictogram 2.0

「human pictogram」は人に特化したピクトグラムという素材サイトです。WEB制作やビジネス資料などをよく利用される人物素材です。
詳しくはこちら
公式サイト
背景
素材
サイト
背景素材 subtle patterns

Subtle Patterns

透過系・白系のパターンが多い背景素材サイトです。主張しない背景でホームページやブログの背景におすすめです。
詳しくはこちら
公式サイト
BEIZ Image トップページ

BEIZ

BEIZ images(ベイツ・イメージズ)。空、川、山などの風景から、和柄、テクスチャ系、色別まで1万種類以上の非常に様々な背景を揃えている素材サイトです。
詳しくはこちら
公式サイト
背景素材 bg-patterns

Bg patterns

色鮮やか・濃い背景が多く、和柄・花・植物・可愛い・おしゃれ系などポップな柄が多い背景素材です。
詳しくはこちら
公式サイト
背景素材 free-texture

フリーテクスチャ素材館

木・紙・布・金属などの材質・テクスチャ系に特化した背景です。
詳しくはこちら
公式サイト
Background Labs トップページ

Background Labs

海外(カナダ)の運営する背景素材サイトです。
詳しくはこちら
公式サイト
背景素材サイト 背景素材

背景素材フリードットコム

様々な背景素材が揃っている。チラシ・バナー・HPの背景におすすめ
詳しくはこちら
公式サイト
その他 デザイン作成ツール Canva

Canva(キャンバ)

「Canva」は、Web上からのデザイン作成ツールです。初心者でも文字入れ・トリミング・合成などの簡単に画像加工ができます。
詳しくはこちら
公式サイト
ココナラ トップページ

ココナラ

「ココナラ」は出品者と購入者を繋ぐスキルシェアマーケットです。イラストレーターさんにオリジナルのイラストを描いて欲しい方におすすめです。
詳しくはこちら
公式サイト

 
(関連)【おすすめ素材サイト総まとめ】ホームページで使えるフリー・有料素材25選
 
 

独自ドメインのメールアドレスを作成しよう

独自ドメインを取得してレンタルサーバーを契約したら、メールアドレスも作っておくことをお勧めします。

メールアドレスの作成はロリポップの場合、メール設定>メール設定 ⁄ ロリポップ!webメーラーからメールアドレスの作成ができます。
メール設定>メール設定 ⁄ ロリポップ!webメーラー
 

ページ下部の新規作成ボタンをクリックします。
ページ下部の新規作成ボタンをクリック
 

contact@xxxx.comのような任意のメールアドレスを作成しましょう。
メールアドレスの作成
 

メールソフトとの接続含めたメールアドレスの作成利用方法の詳細は「ロリポップでメールアドレスを作成・送受信するやり方」をご覧ください。
 
 

まとめ 使いながら覚えていってホームページを作っていきましょう

まとめです。今回は、WordPressでホームページを作りたい初心者を対象にホームページの作り方をご紹介しました。
 

WordPress ホームページの作り方
 

  1. レンタルサーバーを契約してWordPressをインストールする
  2. 各種管理画面へのログイン方法を確認する
  3. WordPressの管理画面の見方と基本操作を覚える
  4. WordPressデザインテンプレート「テーマ」を設定する
  5. WordPress投稿機能でブログを書く
  6. WordPress固定ページを作成してメニューバーに設定する
  7. カスタマイザーでメインビジュアルや色等のテーマ設定を行う
  8. ウィジェットでサイドバーやフッターを設定する
  9. プラグインでお問い合わせフォームを作成する
  10. WordPressブロックエディターの使い方を更に覚える
  11. その他のWordPressの初期設定をする
  12. (補足)ホームページに必要な情報・コンセプトを整理する

 

なお、以下は、WordPress関連の主な記事です。


その他、WordPressに関する記事一覧はこちらをご覧ください。
 

今回は以上になります。最後までご覧いただきありがとうございました。
 

合わせて読みたい記事

なお、本記事の説明した内容以外のWordPressの使い方全般を、「【WordPress使い方総まとめ】ワードプレスの使い方を徹底解説」に記載しています。

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


 


 

目次

目次[非表示]

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

国内シェア上位のエックスサーバー、ロリポップ、さくらのレンタルサーバ、およびConoHa WING、mixhostを中心にWordPressおすすめレンタルサーバーを比較・紹介していきます。これからWordPressでホームページやブログを開設するためにレンタルサーバー選びを検討している方はこちらをご覧ください。

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【総まとめ】WordPress(ワードプレス)ホームページ作り方

【総まとめ】WordPress(ワードプレス)ホームページ作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

-WordPress, ホームページの作り方