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

WordPress ホームページの作り方

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

2020年2月21日

WordPressでホームページ作成する方法
 

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

WordPressdeでホームページを作成するには、サーバー・ドメイン契約して、WordPressインストールして中身を作成していきます。

  1. サーバーを用意する
  2. ドメインを用意する
  3. WordPressをインストールする
  4. 中身を作成する

 

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

 


 
 

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

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

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

【はじめに】WordPressとは。必要な手続きとかかる費用

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

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

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

WordPressを利用してホームページを自作する場合の費用ですが、おおよそ初年度1〜4万円程度、次年度以降1〜1.5万円程度です。
WordPressでサイトを自作する場合にかかる料金
 

項目 初期費用
(初年度のみかかる
イニシャルコスト)
維持費用
(翌年以降毎年かかる
ランニングコスト)
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の料金】ホームページ・ブログ開設にかかる費用」をご参照ください。

(関連)【総まとめ】個人ホームページの作り方・Webサイト自作方法
 
 

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

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

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

基本的に我々がWordPressと呼んでいる方のWordPressは(レンタルサーバーなどのサーバーにインストールして使うタイプ)は、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とは?概要と特徴をわかりやすく説明
 

おすすめの国内レンタルサーバー

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

カテゴライズ サーバーサービス おすすめプラン名 おすすめ度 特徴 月額費用
(3年契約)
初期費用 無料ドメイン ディスクサイズ WordPress対応 マルチドメイン上限 MySQL個数制限 転送容量制限

Webサーバー Webフォント提供 Webフォント制限 バックアップ機能 復元機能(データ取得) メールアドレス作成数 メールボックス容量制限 メール送受信サイズ制限 メール送信数制限 メール受信数制限 メーリングリスト メールマガジン アダルトサイト プラン変更 メールサポート チャットサポート 電話サポート
特におすすめ5社 エックスサーバー
エックスサーバー
スタンダードプラン
公式サイト
国内シェアNo1の王道レンタルサーバー。法人HPも多い
エックスサーバー スペックチャート
990円 無料 ◯(1つ) 300GB 無制限 無制限 無制限 nginx あり
モリサワフォント33書体
ドメイン制限:3ドメインまで

PV制限:75,000PV/月
◯(14日間) 無制限 20GB/1アドレス 100MB/送信 ※受信は制限なし 1,500送信/時間

15,000送信/日
無制限 リスト作成数:20件

登録数:500件/1リスト
メルマガ作成数:10件

登録数:1,000件/1メルマガ
× ◯(平日10:00~18:00) ◯(平日10:00~18:00)
ConoHaWING
ConoHa ロゴ
ベーシックプラン
公式サイト
簡単&高スペック&上場企業運営&若手ユーザー・ブロガー多い
ConoHa WING スペックチャート
880円 無料 ◯(2つ) 300GB 無制限 無制限 無制限 Apache+nginx あり
モリサワフォント33書体
ドメイン制限:3ドメインまで

PV制限:75,000PV/月
◯(14日間) 無制限 20GB/1アドレス 100MB/送信

100MB/受信
不明 不明 無制限 × × ◯(平日10:00~18:00) ◯(平日10:00~18:00)
ロリポップ!
ロリポップ!ロゴ
ハイスピードプラン
公式サイト
安価かつハイスペックのバランスがおすすめ
ロリポップ スペックチャート
550円 0円 × 400GB 無制限 無制限 無制限 LiteSpeed × × △(有償) 無制限 5GB/1アドレス 100MB/送受信 1,000送信/時間

10,000送信/日
無制限 リスト作成数:10件

登録数:500件/1リスト
メルマガ作成数:10件

登録数:500件/1メルマガ
× ◯(上位プラン変更のみ) ◯(平日:9:30〜13:00 14:00〜17:30) ◯(平日:10:00〜18:00)
さくらのレンタルサーバ
さくらインターネットロゴ
スタンダードプラン
公式サイト
安価&中以上スペック&個人店舗HP系におすすめ
さくらのレンタルサーバ スペックチャート
436円 無料 × 300GB 200 50個 無制限 nginx + Apache2.4系 あり
モリサワフォント33書体
ドメイン制限:3ドメインまで

PV制限:75,000PV/月
◯(最新8つ)

バックアップ&ステージング機能を自身で設定する必要あり。

無制限 20GB/1アドレス 200MB/送受信 100送信/15分

400送信/時間

9,600送信/日
無制限 10件 × × × ◯(平日10:00~18:00)
◯(平日10:00~18:00※)

2022年12月時点ではコールバック予約必要(詳細)

mixhost
mixhost ロゴ
スタンダードプラン
公式サイト
アダルトジャンル運営可能・上位プランがお得
mixhostスペックチャート
1,320円 無料 ◯(1つ) 300GB 無制限 無制限 無制限 LiteSpeed × × ◯(14日間) 無制限 無制限 不明 1,500送信/時間

15,000送信/日
無制限 無制限 × × ×
法人・中小企業向け エックスサーバービジネス
エックスサーバービジネス ロゴ
スタンダードプラン
公式サイト
同価格帯では最高環境のスペックやサービスが提供されている法人特化のレンタルサーバー。中小企業・法人の高スペックレンタルサーバーなら一番おすすめ 3,762円 16,500円 あり(1つ) 300GB 無制限 無制限 無制限 nginx あり
モリサワフォント33書体
ドメイン制限:3ドメインまで

PV制限:無制限
◯(14日間) 無制限 20GB/1アドレス 100MB/送信 ※受信は制限なし 1,500送信/時間

15,000送信/日
無制限 リスト作成数:20件

登録数:500件/1リスト
メルマガ作成数:10件

登録数:1,000件/1メルマガ
× ◯(平日10:00~18:00) ◯(平日10:00~18:00)
カゴヤ・ジャパン
kagoya ロゴ
S22プラン
公式サイト
法人利用率80%以上のレンタルサーバー。スペック的には普通なものの法人向けの中では安価な方で、実績も豊富。 1,760円 3,300円 あり(1つ・1年目のみ) 200GB 無制限 無制限 160GB/日 nginx + Apache 2.4系 あり
モリサワフォント30書体
ドメイン制限:3ドメインまで

PV制限:75,000PV/月
◯(10GB) 10,000 100GB/全体 100MB/受信 ※送信は制限なし 不明 不明 リスト作成数:1件

登録数:100件/1リスト
× × × ◯(平日10:00〜17:00)
CPIレンタルサーバー
CPIレンタルサーバーロゴ
ビジネススタンダード
公式サイト
法人利用率90%以上のサーバー。スペックは普通なものの、法人向けオプションが豊富で、マルウェア診断・データ移行支援サービス・24時間365日サポートなど手厚い体制 4,180円 無料 あり(1つ・1年目のみ) 200GB 無制限 無制限 160GB/日 nginx + Apache 2.4系 あり
モリサワフォント30書体
ドメイン制限:3ドメインまで

PV制限:75,000PV/月
◯(10GB) 10,000 100GB/全体 100MB/受信 ※送信は制限なし 不明 不明 リスト作成数:1件

登録数:100件/1リスト
× × × ◯(平日10:00〜17:00)
GMOクラウド iClUSTA+
GMO iCLUSTA+ロゴ
レギュラープラン
公式サイト
大手GMOが運営する法人向けに特化したレンタルサーバー。スペック的には普通なものの、安価に法人向けサーバーを利用できるのが強み。
1,551円※

現在為替レートの影響などにより一時的にサーチャージ料が別途発生します

5,500円 なし 500GB 91 150個 無制限 Apache あり
モリサワフォント33書体
ドメイン制限:3ドメインまで

PV制限:75,000PV/月
◯(7世代) 無制限 140GB/全体 30MB/送受信 不明 不明 リスト作成数:20件

登録数:1,000件/1リスト
× × ◯(平日10:00〜18:00)
個人にも法人にも コアサーバー
コアサーバーロゴ
Core-X(V2プラン)
公式サイト
GMOデジロック社の提供するレンタルサーバーサービス。価格は390円〜とかなり安く利用でき、同価格帯でかなり高スペックな部類。 390円 1,650円 あり(1つ) 300GB 無制限 無制限 10TB/月 LiteSpeed × × ◯(3世代) 無制限 10GB/1アドレス(推奨) 不明 5,000送受信/日 5,000送受信/日 × ×
◯※

V2プラン内での上位プランへのアップグレードのみ対応

×
ヘテムル
HETEMLロゴ
※単一プランのみ提供
公式サイト
ロリポップを提供しているGMOペパボ社が提供するレンタルサーバーサービス。価格と性能のバランスが良いが、今だとロリポップの方がおすすめ。 1,100円 無料 なし 500GB 無制限 無制限 40TB/月 LiteSpeed × ×
◯※

Webサーバー、メールサーバーは7日間前、DBサーバーは14日前

△※

復元は有料

無制限 10GB/1アドレス 10MB/送受信 1,000送信/時間

10,000送信/日
無制限 リスト作成数:15件

登録数:1,000件/1リスト
メルマガ作成数:15件

登録数:1,000件/1メルマガ
× × ×
カラフルボックス
colorfulbox
BOX2プラン
公式サイト
2018年会社設立した新規参入のホスティングサービス。後発ながら最新のサーバー環境を提供しているのが強み。アダルトサイト運用も可能。 968円
無料※

無料(3ヶ月以上の契約の場合) /
2,200円(1ヶ月契約のみの場合)

あり(1つ) 300GB 無制限 無制限 無制限 LiteSpeed × × ◯(14日間) 無制限 無制限 不明 2,000送信/時間

20,000送信/日
無制限 無制限 ×
◯※

※申込時にアダルト対応サーバープランで申し込みの必要あり

◯※

※アダルト対応サーバープラン - 通常のサーバープラン間の変更は不可

スターサーバー
スターサーバーロゴ
スタンダードプラン
公式サイト
ネットオウル社が運営する高速・格安のクラウド型レンタルサーバー。オールSSD&nginxで格安の中ではハイスペック。 440円 1,650円 × 200GB 無制限 30 21TB/月 nginx × × × × 1,000 2GB/1アドレス 100MB/送受信 1,500送信/日 無制限 × × ×
×※

エコノミー、ライトはスタンダードまでのプラン変更が可能。エコノミー、ライト、スタンダードはハイスピード、エンタープライズへの変更は不可

× ×
バリューサーバー
バリューサーバーロゴ
スタンダードプラン
公式サイト
GMOデジロック社が運営する格安レンタルサーバー。同価格帯ならコアサーバーの方がおすすめ。プラン変更には対応していない点に注意。 366円 2,200円 なし 100GB 無制限 無制限 300GB/月 Apache × × × × 無制限 2GB/1アドレス(推奨) 不明 4,000送受信/日 4,000送受信/日 × × × × ×
カテゴライズ サーバーサービス おすすめプラン名 おすすめ度 特徴 月額費用
(3年契約)
初期費用 無料ドメイン ディスクサイズ WordPress対応 マルチドメイン上限 MySQL個数制限 転送容量制限

Webサーバー Webフォント提供 Webフォント制限 バックアップ機能 復元機能(データ取得) メールアドレス作成数 メールボックス容量制限 メール送受信サイズ制限 メール送信数制限 メール受信数制限 メーリングリスト メールマガジン アダルトサイト プラン変更 メールサポート チャットサポート 電話サポート

ConoHaWING ベーシックプラン、ロリポップ!はハイスピードプラン、エックスサーバー・mixhost・さくらはスタンダードプラン、10%税込価格の場合で比較しました。
各サーバーの全プランのスペック・機能一覧は国内有名サーバーのスペック一覧比較表に掲載しています。
※2023年1月3日時点で調べた1年契約税込表示の価格・内容です。プラン変更をはじめ細かい内容は条件付きである場合もありますので、最新の正確な情報は公式サイトをご確認ください。


(関連記事)【おすすめレンタルサーバー比較総まとめ】WordPress対応5社
 

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

もし初めてホームページを作成する場合は、まずはなんのためにホームページを開設するのか目的を明確化しましょう。

ホームページ・Webサイトの目的
 

ホームページの目的例

  • サービス中心サイトとして顧客に商品・サービスを購入してもらいたい
  • コーポレートサイトとして取引先(候補)に会社情報を正しく発信したい
  • コーポレートサイトとして採用を中心にしたい
  • ブログ・メディアサイトでアフィリエイト収益を上げたい

 

サイトの規模によっては複数の目的を兼ねている場合もありますが、メインの目的を決めておくことはとても大切です。

ジャンル・目的を絞った専門サイトは検索エンジンの評価も高くなる傾向があります。

より具体的には、誰向けにどんな情報を発信する予定なのかを整理しておくと良いでしょう。
ホームページのコンセプトを決める

整理しておきたい情報

  • 誰向けに情報を提供するか
  • どんな情報を提供するか
  • 最終的に読者にどうしてほしいか
  • どんなキーワードで情報提供するか

(関連)【コンセプト決め】ホームページ コンセプトの作り方・考え方
 

業種・内容によってまちまちなのですが、下記のような項目はよくあるコンテンツです。

ウェブサイトに含めたいページ・コンテンツを全て書き出す

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

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

 

下記のような構成図を作っておくと、それに沿ってサイトを作っていくことができるのでおすすめです。

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

(関連)ホームページの構成図サイトマップとは?作り方の基本
 

ここからは、具体的にレンタルサーバー契約からWordPressインストール、ホームページ作成までのやり方を説明していきます。
 

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

(1) レンタルサーバーを契約してWordPressを設置する
 

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

(関連)法人・個人などそれぞれの用途に応じたおすすめレンタルサーバーは「【おすすめレンタルサーバー比較】5社+14社総まとめWordPress対応」をご参照ください。
 

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

Webの仕組み サーバー

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

 

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

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

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

 

初期ドメインについて

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

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

 

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

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

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

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

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

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

  • 【ブログ名】サイトのタイトルを入力※後で変更可能 (例.大阪のホームページ作成教室WEBST8)
  • 【ユーザー名】半角英数文字で任意の名前を入力します (例.webst8)
  • 【パスワード】複雑なパスワードにします。

 

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

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

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

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

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

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

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

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

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

 

常時SSLの設定をする

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

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

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

なお、SSLの詳細な説明については「【SSLとは】SSLの意味と必要性および仕組みや種類を解説」をご参照ください。

 

WordPressにログインする

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

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

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

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

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

 

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

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

ロリポップでSSLの設定を行う

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

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

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

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

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

 

WordPressの設定でSSL設定する

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

先ほどログインしたWordPressの管理画面で設定>一般をクリックします。
ダッシュボードから「設定」を選択し「一般」をクリック
 

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

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

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

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

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

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

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

そこで「http」でリクエストされた通信も「https」として通信させる設定を行っていきます(常にSSL通信になるので常時SSLといいます)。

サーバー上にある「.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)WordPressのログイン方法と管理画面の見方を覚える

(2) WordPressにログインして管理画面の操作を覚える
 

WordPressへの管理画面の入り方と、管理画面の基本的な見方について説明していきます。
 

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

WordPressにログインするためには、下記の管理画面URLにアクセスする必要があります。
 

WordPress管理画面用のURL
 
http(s)://ドメイン名/wp-admin/
(例. https://webst8-demo.net/wp-admin/)

 

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

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

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

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

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

 

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

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

Cookieによるログインエラー

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

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

Cookieによるログインエラー

 

WordPressの管理画面と覚えておきたい重要な使い方

ブログを書く前に、WordPressのダッシュボードの基本的な見方について説明していきます。ダッシュボードとは、WordPressの管理画面のことです。

管理画面は、「上部メニューバー」「左メニューバー」「真ん中の設定画面」の3つのレイアウトに分かれています。
WordPressの管理画面
 

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

左メニューバーの各項目の意味は下記の通りです。

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

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

 

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


 

 
 
 

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

(3) WordPressのテンプレート「テーマ」を設定する
 

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

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

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

WordPress テーマ 追加画面

WordPress テーマ 追加画面


 

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

 

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

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

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

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

有効化します。
lightning 有効化
 

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

合わせて読みたい記事

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

Lightningには、有料版「Lightning G3 Pro」もあります。そのほかのおすすめテーマは下記をご覧ください。
WordPressおすすめ有料テーマ
WordPressおすすめ無料テーマ

 

(4)投稿でブログを書く

(4) WordPressの投稿でブログ記事を作成する
 

つぎに、WordPressの「投稿」の使い方を覚えていきましょう。投稿はブログとして利用できる機能です。一般的には、お知らせやコラム、技術情報や時事情報などで使われることが多いです。

ワードプレスの投稿機能
 

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

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

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

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

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


 

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

ここからは、ブロックエディターの簡単な操作方法を説明していきます。

段落ブロックを挿入する

まずは段落ブロックを挿入してみましょう。段落ブロックは通常エディター末尾でエンターボタンを押下することで追加されます。あるいは+ボタンから「段落」を選択して挿入することができます。

■段落ブロックの追加


 

また、段落で文章を書いている途中でShift+Enterボタンを押下すると、同じ段落のまま改行されます(行間が大きく開きません)。※Enterボタンを押すと新しい段落ブロックとして改行されます(行間が大きくあきます)。

■Shift+Enterによる改行と、Enterによる改行の違い


 

見出しブロックを挿入する

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


 

なお、ブロックを選択すると、下記のようにブロックのすぐ上にツールバーが表示されます。見出しの場合は、見出しレベル(※)の変更やテキスト揃え、太字斜体などの設定ができます。また、右のメニューアイコンからブロック削除することもできます。

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

また、見出しのブロックを選んだ状態で、右サイドバーから(表示されていない場合は、右上の設定アイコンを押して表示できます)、色やその他の設定ができます。


 

まずは見出しを使ってブロックの基本操作を覚えておきましょう。

 

画像ブロックを挿入する

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


 

(※)画像ブロックの詳細な使い方については「【画像ブロック】WordPressブロックエディター画像ブロックの使い方」をご参照ください。
 

投稿記事を公開をする

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


 

ここでは、簡単なブロックのみ紹介しました。さらに詳しい説明は「WordPressブロックエディターの使い方総まとめ」をあわせてご参照ください。
 


 
 

補足 2018年以前の旧エディター「クラシックエディター」

今回は、「ブロックエディター(グーテンベルクエディター)」と言われるエディターで説明していますが、2018年以前までは長らくクラシックエディターというWord(ワード)に似たエディターが標準エディターとなっていました。

従来のエディターと新しいエディター(Gutenberg)
 

今からWordPressを始めたばかりの方なら本記事の記載のブロックエディターを利用すると良いでしょう。しかし、何らかの事情で従来のクラシックディターを推奨している場合にはClassic Editorプラグインを利用してクラシックエディターを利用することができます。

Classic Editorプラグインの導入方法は「【Classic Editor】WordPress5系でグーテンベルクから従来エディターに戻す方法」をご参照ください。クラシックエディターと新エディターを併用することもできます。

 

 

(5)固定ページで必要なページを作成する

(5) 固定ページで必要なページを作成する
 

次に、固定ページで会社情報やお問い合わせページなど必要なページを作って形を整えていきましょう。

今回は、下記に固定ページを作成してメニューバーを設定するやり方をご紹介します。(※)メニューの位置や見え方はテーマによって異なります。
ワードプレスで設定するメニューバーの例
 

固定ページと投稿の違い

一般的に固定ページでは「会社情報」や「お問い合わせ」などページ単体で独立しており、メニューバーに表示させるページは固定ページで利用します。

固定ページで作成したページは投稿一覧の中には表示されません。
ワードプレスの投稿と固定ページの違い
 
(参考)WordPress投稿と固定ページの違いと使い分け方

 

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

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

事前に作成した固定ページ
固定ページ新規作成>タイトルだけ入力(本文はなしでOK)>公開の手順を繰り返して、下記の固定ページを作成してみてください。
 

  • HOME
  • お問い合わせ
  • お客様の声
  • ブログ
  • 会社情報

(関連)WordPress固定ページの使い方を徹底解説

 


 

(6)メニューバーを作成・固定ページを割り当てる

(6) メニューバーを作成して固定ページを割り当てる
 

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

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

WordPress 外観>メニュー

WordPress 外観>メニュー


 

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

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

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

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

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


 

最後にメニューの設定を行います。ここではHeader NavigationとFooterNavigationにチェックを入れて最後にメニューを保存ボタンを押下します。
ここではHeader NavigationとFooterNavigationにチェックを入れて最後にメニューを保存ボタンを押下します
 
(※)Header NavigationとFooterNavigationという名称はご利用のテーマによって違います。また、テーマによっては1つしかチェックができない場合も3つある場合もあります。
 
以上で、メニューの追加は完成です。
 
ここでは、メニューバーを作り固定ページを割り当てる設定方法を簡単に説明しました。手順としては、まず(1)箱(入れ物)となるメニューを作り、(2)その中に先ほど作った固定ページ(メニューアイテム)を割り当てて、(3)最後に作成したメニューをどこに表示するという順番になります。
WordPress メニューバーの概念
 

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

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


 

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


 
 

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

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

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

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

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

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

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

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

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

 

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

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


 

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

 
 

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

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

次に、外観>ウィジェットからサイドバーやフッターを設定していきましょう。WordPressのウィジェットとは、ブログパーツ(部品)のことです。イドバーやフッターなどの部分でバナーを追加したり、投稿一覧を表示することができます。

 

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

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

下記のようなウィジェットの画面が表示されます(※注)
WordPress5.8以降の新しいウィジェット
 

投稿や固定ページのブロックエディター(グーテンベルクエディター)のように、ブロック単位でウィジェットを組み合わせて行く形になります。
ウィジェット画面でブロックを追加
 

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

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

 

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

2021年7月20日にリリースされたWordPress5.8以降は、ブロックウィジェットという新しい画面になりました。

今回ご紹介したLightningでは新版のブロックウィジェットが採用されていますが、テーマによっては従来のクラシックウィジェットの画面になっている場合もあります。
クラシックウィジェットの設定画面

詳細については「初心者でもわかるWordPressウィジェットの使い方」をご覧ください。
(関連)【Classic Widgets】ウィジェット画面を戻すWordPressプラグイン

 
 

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

(9) メインビジュアルや色などのテーマ設定をする
 

次に、メインビジュアルや色などのテーマの設定を行っていきましょう。外観>カスタマイズから、テーマカスタマイザーを開くことができます。
外観>カスタマイズ
 

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

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

 

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

 

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

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


 

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

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

 
 

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

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

(10) お問合せフォームを作成する
 

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

プラグインとは、スマホのアプリのような機能で、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」で詳しく説明していますので、ぜひご参考にしてください。
 

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


 

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


 

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

(補)そのほか役立つノウハウ・サイトの紹介
 

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

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

WordPressでおすすめの初期設定

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

 

(関連記事)【初心者向け】WordPressのおすすめ初期設定を徹底解説
 

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

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

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

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

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

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

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

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

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

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

 

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

サイトのタイトル「大阪の個別指導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のパーマリンクの変更手順とおすすめ設定
 


 
 

(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サーチコンソールの登録・設定方法と見方を徹底解説
 

(11-8)WordPressをバージョンアップする

WordPressのバージョンアップについて説明していきます。iPhoneのiOSやアプリと同様に、WordPress本体やテーマ、プラグインも新しいバージョンが次々にリリースされていきます。

WordPressをバージョンアップする場合、一般的な対象になるのは、「WordPress本体」「プラグイン」「テーマ」です。バージョンアップは、WordPressの管理画面から行うことができます。
 
WordPressのバージョンアップについて
 

WordPressやプラグインを古いバージョンのまま放置していると、セキュリティ的なリスクも高まりますので、基本的には最新バージョンに更新しておいた方が良いと言われています。

WordPressのバージョンアップは、ダッシュボード>更新から確認・更新することができます。ダッシュボード>更新をクリックしましょう。
ダッシュボード>更新
 

WordPress本体、プラグイン、テーマをそれぞれアップデートすることができます。
WordPressダッシュボード>更新でWordPress本体、プラグイン、テーマをそれぞれ更新する
 

(注意)事前にバックアップを取得しておきましょう

WordPress本体やテーマ、プラグインをバージョンアップすると、各々の組み合わせによってまれに不具合が起きる場合もあります。

万一、不具合がおきた場合に差し戻しができるようにWordPressやプラグインのバージョンアップはバックアップを取ったうえ、自己責任で実施ください。

(関連記事)【BackWPupの使い方】WordPress バックアッププラグイン

 

メンテナンスリリースとセキュリティリリースのみ自動更新に変更する

次に、メンテナンスリリースとセキュリティリリースのみ自動更新に変更しておきます(任意)。

WordPressインストールした場合に、初期状態は「WordPressのすべての新しいバージョンに対する自動更新を有効にします。」になっています。

勝手にバージョンアップされるとテーマやプラグインが追いついておらず何もしてないのに知らない間に勝手に不具合が起きたという場合も多々あるので、当サイトは「メンテナンスリリースとセキュリティリリースのみ自動更新」に変更して、手動でバージョンアップするようにしています。

ダッシュボード>更新のページ上部で「メンテナンスリリースとセキュリティリリースのみ自動更新」をクリックします。

 

自動更新の状態が「メンテナンスリリースとセキュリティリリースのみ自動更新」になりました。

 

WordPress本体メジャーアップデートとマイナーアップデート

WordPress本体プログラムはでは、バージョン管理として3桁の番号(A.B.C)を持っています。

WordPressの3桁のバージョン番号

このうち、バージョン番号の最初の2桁が「5.7.3」→「5.8.0」や「4.9.3」→「5.0.0」のように変更されるアップデートをメジャーアップデートと言います。

一方、バージョン番号の最後の1桁が「4.5.1」→「4.5.2」、「5.2.3」→「5.2.4」のように変更されるアップデートをWordPressのマイナーアップデートと言います。

メジャーアップデートの場合、以前のバージョンには無かった新規機能・仕様変更や開発者向けのAPIが新しく追加されたりします。マイナーアップデートと比較して変更範囲はとても大きいアップデート内容になります。

WordPressのバージョンアップの詳細は「WordPress(ワードプレス)のバージョンアップ・更新方法」をご参照ください。
 


 

(補足)そのほかホームページ作成に役立つノウハウ・サイト

(補)そのほか役立つノウハウ・サイトの紹介
 

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

画像・イラスト素材・画像加工サイトを利用する

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

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

ジャンル 素材サイト名 概要 公式サイト
無料
写真
素材
サイト
画像素材サイト 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選
 

ロリポップ・ムームードメインへのログイン方法を確認する

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

項目 アカウント開設サイト
レンタルサーバー「ロリポップ」のアカウント ロリポップ公式サイト
ドメインサービス「ムームードメイン」のアカウント ムームードメイン公式サイト
WordPressのアカウント ロリポップよりインストール・アカウント作成
(ログイン先)https://ドメイン名/wp-admin/

 

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

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

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

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

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

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

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

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

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

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

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

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

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

独自ドメインのメールアドレスを作成する

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

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

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

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

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

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

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

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, ホームページの作り方