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

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

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

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

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

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

WordPressの特徴

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

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

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

 

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

 

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

 

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を利用してアメブロやFC2、シーサーブログ、はてなブログなどのブログサービスを展開している営利組織です。

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

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

項目	WordPress.org	WordPress.com
意味	WordPressというソフトウェアは配布している組織・サイト。通常WordPressといえばこちらを指します WordPress.org	WordPressというソフトウェアを基盤にしたブログサービス。プラグインやテーマの制限があるため、あえてWordPress.comを利用する場合は注意が必要です。 ■WordPress.com

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

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

 

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

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

 

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

 

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

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

 
 

 

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

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

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

 

項目	アカウント開設サイト
レンタルサーバー「ロリポップ」のアカウント	WordPressを使うならロリポップ！ 簡単インストール完備で楽々スタート！
ドメインサービス「ムームードメイン」のアカウント	格安ドメイン取得サービス─ムームードメイン─
WordPressのアカウント	ロリポップよりインストール・アカウント作成

 

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

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

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

 

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

 

ここでは、独自ドメインが契約中ずっと無料で利用できる「ハイスピードプラン」を選択します。

 
(関連記事)【ロリポップ評判】特徴・おすすめプランとメリットデメリット
 

アカウント情報を入力します。初期ドメイン・パスワード・メールアドレスを入力したあと、今回は「無料で独自ドメインを取得する」にチェックを入れて、契約と同時に独自ドメインを取得設定していきます。

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

 

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

 

SMS認証コードを入力します。

 

つづいて、申し込み情報を入力します。

 

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

 

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

 

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

 

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

 

 

WordPressにログインする

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

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

 

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

 

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

 

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

 

 

常時SSLの設定を行う

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

 

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

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

 

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

 

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

 

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

 

 

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

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

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

 

「WordPressアドレス（URL）」、「サイトアドレス（URL）」を「http://～」から「https://～」に変え、「変更を保存」をクリックします。

(※)本操作で誤った内容を入力・保存すると、WordPressにアクセスできなくなる場合があるため、慎重に行いましょう。
 

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

 

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

 

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

 
 

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

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

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

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

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

 

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

 

.htaccessをクリックします

 

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

 

 

 

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

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

 

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

 

 

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

 

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

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

 

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

ロリポップのログインはロリポップのトップページログインから行います。

 

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

 

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

 

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

 

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

 

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

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

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

 

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

 

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

 

 

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

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

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

 

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

 

 

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

 

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

 
 

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

 

 

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

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

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

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

 

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

 

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

 

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

 

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

 

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

 
 

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

 

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

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

 

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

 

 

 

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

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

 

新規追加ボタンを押下します。

 

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

 

有効化します。

 

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

 

 

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

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

 

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

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

 

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

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

 

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

 

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

 

下記のような編集画面が初期状態で表示されます。大きく、メインのエディターエリアと上部ツールバー、右のツールバーがあります。

(※)上記はWordPress5.5の画面です。バージョンによって若干の差異があるのでその場合はご自身のご利用の画面に合わせて読み替えてください。
 

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

 

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

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

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

 

 

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

 

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

 
 

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

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

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

 

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

 

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

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

■例）固定ページで作成したお問い合わせページ

 

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

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

 

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

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

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

固定ページは固定ページ＞新規追加から作成することができます。

 

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

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

 

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

 

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

 

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

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

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

 

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

 

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

 

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

(※)名称はなんでもOKです。
 

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

 

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

 

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

 

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

 

最後にメニューの設定を行います。ここではHeader NavigationとFooterNavigationにチェックを入れて最後にメニューを保存ボタンを押下します。

 
(※)Header NavigationとFooterNavigationという名称はご利用のテーマによって違います。また、テーマによっては1つしかチェックができない場合も3つある場合もあります。
 
以上で、メニューの追加は完成です。
 

 

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

 

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

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

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

 

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

 

 

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

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

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

 

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

 

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

 

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

 

 

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

 

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

 

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

 
 

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

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

 

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

 

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

 

 

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

 

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

 

左側の追加したいウィジェットタイプを選択してドラッグ＆ドロップで任意の箇所にウィジェットを追加します。

 

 

ウィジェットタイプを選択して、任意の箇所にウィジェットを追加します。

 

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

 

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

 

 

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

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

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

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

 

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

 

 

 

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

 

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

 

 
 

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

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

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

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

 

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

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

 

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

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

 

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

 

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

 

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

 

 

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

 

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

 

 

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

 

初期状態では、ワードプレスインストール時に設定したメールアドレス宛に問い合わせ内容が通知されていれば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の使い方をもっと覚えていきましょう。

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

 

 

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

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

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

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

 

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

 

ここでは下記のように変更して保存します。

 

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

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

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

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

 

 

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

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

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

 

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

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

 

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

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

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

 

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

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

 

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

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

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

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

 

 

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

 

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

 

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

 

 

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

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

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

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

 

 

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

ご利用のテーマによっては、ブログの投稿画面で、ユーザーIDがそのまま表示される場合があります。

 

 

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

 

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

 

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

 

 

 
 

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

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

 

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

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

 

そのまま有効化します。

 

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

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

 

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

 

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

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

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

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

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

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

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

 

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

 

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

 

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

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

 

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

 

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

 

 

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

 

 

以上でバックアップ設定の完了です。初回は念のため手動で今すぐバックアップもしておきましょう。作成したジョブを確認するために左の管理画面から「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マーケティングなどを意識してホームページを作る場合は本来最初に実施する行程ですが、今回はあくまで作り方にスポットを当てているため補足として説明しています。
 

 

 

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

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

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

 

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

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

 
 

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

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

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

ジャンル	素材サイト名	概要	公式サイト
無料 写真 素材 サイト	写真AC	写真ACは、日本の巨大写真素材サイトです。利用には無料の会員登録が必要ですが、人物・風景・パターン画像など多くの画像が提供されています。 詳しくはこちら	公式サイト
	PIXABAY	ビジュアル重視の美しい素材が多いので壮大・綺麗・神秘的・グローバルなコンテンツに向いています。 詳しくはこちら	公式サイト
	BURST	BURST(バースト)は、ネットショップサービス大手のshopify(ショピファイ)が運営するフリー素材サイトです。 詳しくはこちら	公式サイト
	foodiesfeed	フード(食べ物)に特化した、野菜や果物、料理の写真が豊富な海外のフリー写真素材サイトです。 詳しくはこちら	公式サイト
	upsplash	Unsplashは海外のフリー素材サイトで、ビジュアル重視の美しい素材が多く、壮大・綺麗・神秘的・グローバルな写真がたくさんあります。 詳しくはこちら	公式サイト
	ぱくたそ	ぱくたそは日本人の素材が多い有名なフリー素材サイトです。個性的なリアクションの人物素材が多い傾向があります。 詳しくはこちら	公式サイト
	GirlyDrop	GirlyDropは、その名前の通りおしゃれでガーリーな写真に特化した写真素材サイトです。女性、ファッション、美容、カフェ、誕生日、イベントなどなどかわいい系の写真が多くあります。 詳しくはこちら	公式サイト
	フォトック	Photock(フォトック)は、域や自然風景・植物、動物・建築物・夜景・ビジネスなどの様々なシーンの写真がある写真素材サイトです。 詳しくはこちら	公式サイト
有料 素材 サイト	Adobe Stock	「Atobe Stock」は、Adobe社が提供する有料素材サイトです。写真がメインですが、高品質のイラスト・アイコン・シルエット類も多数揃っています。 詳しくはこちら	公式サイト
	Shutter Stock	「Shutter Stock」は、画像、動画クリップ、音楽などが揃っている世界で有名な有料素材サイトです。写真がメインですが、高品質のイラスト・アイコン・シルエット類も多数揃っています。詳しくはこちら	公式サイト
	iStock	iStorkは、ゲッティ・イメージズ・セールス・ジャパンが提供する有名な巨大有料素材サイトです。画像だけでなく、映像やイラストなども様々な素材が揃っています。 詳しくはこちら	公式サイト
	PIXTA	PIXTA(ピクスタ)は、日本人の人物をはじめ、高品質な写真素材が揃う有名な有料素材サイトです。写真のクオリティーも非常に高いのが特徴です。 詳しくはこちら	公式サイト
イラ スト 素材 サイト	イラストAC	「イラストAC」は日本最大の無料イラスト素材サイトです。老若男女・動物・モノなど色々なイラストが揃っています。 詳しくはこちら	公式サイト
	Socost(ソコスト)	「ソコスト」はシンプルで使いやすいイラスト素材です。主張しすぎないテイストで汎用性のあるイラストです。 詳しくはこちら	公式サイト
	ちょうどいいイラスト	「ちょうどいいイラスト」は人物や物、記号などちょっとあったらいいなと思えるシンプルなイラスト素材サイトです。 詳しくはこちら	公式サイト
	シグレニ(shigureni)	「シグレニ」は素朴で可愛い、女の子が中心に掲載されているイラスト素材サイトです。主張しすぎないテイストの女の子のイラストでどんなサイトにも馴染みやすそうです。 詳しくはこちら	公式サイト
	unDrow(アンドロウ)	「アンドロウ」は海外のシンプルなイラスト素材サイトです。IT・Webサービス系のサイトに利用できそうなイラストが多いです。 詳しくはこちら	公式サイト
	いらすとや	「いらすとや」は、子供や大人・おじいちゃん・おばあちゃんなどの人物など独特のかわらしいイラストがたくさんある定番素材サイトです。 詳しくはこちら	公式サイト
	シルエットAC	「シルエットAC」は無料のシルエット素材サイトです。シルエット素材をお探しの場合におすすめのサイトです。詳しくはこちら	公式サイト
	icooon mono	「icooon mono」は、アイコン素材に特化した素材サイトです。WEBデザインやDTP、ビジネスシーンで活用できるアイコンが揃っています。詳しくはこちら	公式サイト
	human pictogram 2.0	「human pictogram」は人に特化したピクトグラムという素材サイトです。WEB制作やビジネス資料などをよく利用される人物素材です。 詳しくはこちら	公式サイト
背景 素材 サイト	Subtle Patterns	透過系・白系のパターンが多い背景素材サイトです。主張しない背景でホームページやブログの背景におすすめです。 詳しくはこちら	公式サイト
	BEIZ	BEIZ images(ベイツ・イメージズ)。空、川、山などの風景から、和柄、テクスチャ系、色別まで1万種類以上の非常に様々な背景を揃えている素材サイトです。 詳しくはこちら	公式サイト
	Bg patterns	色鮮やか・濃い背景が多く、和柄・花・植物・可愛い・おしゃれ系などポップな柄が多い背景素材です。 詳しくはこちら	公式サイト
	フリーテクスチャ素材館	木・紙・布・金属などの材質・テクスチャ系に特化した背景です。 詳しくはこちら	公式サイト
	Background Labs	海外(カナダ)の運営する背景素材サイトです。 詳しくはこちら	公式サイト
	背景素材フリードットコム	様々な背景素材が揃っている。チラシ・バナー・HPの背景におすすめ 詳しくはこちら	公式サイト
その他	Canva(キャンバ)	「Canva」は、Web上からのデザイン作成ツールです。初心者でも文字入れ・トリミング・合成などの簡単に画像加工ができます。 詳しくはこちら	公式サイト
	ココナラ	「ココナラ」は出品者と購入者を繋ぐスキルシェアマーケットです。イラストレーターさんにオリジナルのイラストを描いて欲しい方におすすめです。 詳しくはこちら	公式サイト

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

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

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

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

 

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

 

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

 

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

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

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

 

 

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

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

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

 

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

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

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