令和時代の個人サイト制作入門（５）WordPressの初期設定と構築

カテゴリ： webデザイン・サイト運用　タグ: WordPress, WordPressによる令和時代の個人サイト制作入門, 技術書典

2019年9月22日開催「技術書典7」で出す予定の新刊の内容を
ブログで全部書いていってどんどん更新をしていこうという、一連のシリーズの第5回です。

前回の記事では、 WordPress（ワードプレス）を用いた個人サイト（同人サイト）の制作・運用において
ハードウェアやアプリなど、必要な環境を揃えるという面で話をいたしました。

今回は、いよいよ実際にWordPressをサーバーにインストールする流れをお話できればと思います。

WordPressによる令和時代の個人サイト制作入門（４）必要な環境を揃える

第2回の連載で書いたとおり、今回はレンタルサーバー「エックスサーバー」および
その系列のドメイン取得サイト「エックスドメイン」を使って構築を進めていきますが、
他のサーバーでも大体同じような流れになるはずです。

※今回の連載には大量の画像が登場しますが、紙面の都合等の関係から
　本のほうには画像の一部のみ掲載予定です。（他の回も同じ）

ドメイン取得

さて環境を揃えたところでいよいよWordPressの構築に移ります。
構築といっても、ほとんどが事務的な手続きを粛々と進めるだけで終わります。

最初にやるのはドメインの取得です。

好きな文字列をあらかじめ考えておいて、
エックスサーバーの系列のエックスドメインで
新しくドメインを取っていきます。

【注意】
「サーバー申し込みでドメイン無料キャンペーン」の期間中に無料でドメインを取りたい場合は、
以下に記す方法と異なり、最初にサーバー取得の手続きを行わないと
ドメインが無料にならないのでご注意ください。
詳しくは以下のリンクをご覧ください。

キャンペーンドメイン | レンタルサーバー【エックスサーバー】

まずはエックスドメインのサイトに飛んで、「取得希望のドメインを検索」から取りたいドメインを入力して、
検索を押します。

ドメイン取得が格安 30円(税抜)から【Xdomain(エックスドメイン)】

すると既存のドメインとかぶってなければ、「取得可能」と表示されます。

.com以外に.netや.jpなど他のドメインのチェックボックスも出てくるんですけれども、
基本的にはあなたがよほど有名じゃない限りは
そのうち1個のドメインだけにチェックしてもらえれば大丈夫です。

2個以上チェックした方が望ましいというケースは、あなたがある程度知名度があり、
紛らわしいドメインを他人に取られるのを避けたい場合に備えてあらかじめ取ってしまう、
いわば防衛のために取得する場合です。
ドメイン取得は早いもの勝ちなので、それを防止するためにやるわけです。

大企業になると、スペルミスなども含めてドメイン自体は使わないけれども
他の人に取られないように取るということを結構やっているところはありますね。

知名度を悪用されて成人向けのサイトやフィッシングサイトに案内されるという
パターンが結構あります。

どうしてもドメインの分だけ更新費用にお金はかかりますが、
防衛目的で複数ドメインを取ることもあるということは頭の片隅に入れておいてください。

それと、「co.jp」というドメインがあるのですが、
これは日本の会社（法人）じゃないと取れないのでご注意ください。

というのも、「co.jp」は「.com」にある他のドメインに比べると厳格な審査があり、
取得する者が日本の企業であることを証明するために、
実際に登記簿に乗っている住所などのちゃんとした情報が必要になります。

こうしてドメインの候補を選びましたら会員登録を行います。

エックスサーバーとエックスドメインで共通のアカウントとなりますので、
もしサーバーの方の登録を先に済ませている場合はそのときに取得したIDを使えば大丈夫です。

そうでない場合は会員情報を新しく登録します。

そしたらクレジットカードや銀行振込などのお支払い情報を入力していただき、
最後の確認画面で利用規約に同意をして完了となります。

これだけですので意外に簡単です。

料金は今回の「test-gcmstyle.com」を取る際は800円台でした。

しかしこれは初年度の価格として割と安めに設定されたものです。
（エックスドメインに限らずどこも初年度は安いです）
「.com」の更新料は、原稿執筆時点では1年あたり1,500円（税別）となっています。

エックスドメインを例にしましたが、どのドメイン取得サイトでも似たような感じです。
取りたいドメインを選ぶ→会員ログインか登録→料金支払い、という流れですね。

ドメイン取得時に気をつけること

一度取ったドメインは、あとから名前を変えることできません。

そのため、取得するときにスペルミスには最大限の注意を払ってください。

正しいつづりのドメインを新たに取り直すことになりますので、余計な料金が発生してしまいます。

サーバー取得

サーバーの取得も似たような流れです。

先ほど登録を済ませたエックスドメインの会員ID で管理画面（Xserverアカウント）にログインします。
※「Xserverアカウント」は最近まで「インフォパネル」と呼ばれていました。

Xserverアカウント画面の「契約関連」にある「サービスお申し込み」というボタンをクリックすると、
サーバー申込みのメニューが出てきます。

エックスサーバーインフォパネル「サービスお申し込み」 — Xserverアカウント「サービスお申し込み」

エックスサーバーの場合、普通の「エックスサーバー」と
「エックスサーバービジネス」という2種類がありますが、
個人で取得するのであれば普通のエックスサーバーで大丈夫です。
また、プランも最安の「X10」で大丈夫です。

これを開くとサーバーIDの入力欄があります。
ここもエックスサーバーの他のサーバーとかぶってなければ好きなものにできます。

このIDは初期ドメインというものに影響してきます。

先ほどのプロセスで既に独自ドメインを取っているので実際はほとんど使いませんが、
初期状態だと「サーバーID.xsrv.jp」というドメインが割り当てられます。

この初期ドメインを使ってホームページの構築もできますが、
これだと他のサービスに乗っかっているのと同じようなドメインの扱いとなります。
もちろんこの状態で運用していくことも可能ではありますが、
初期ドメインはあくまでサブ的な扱いをするとここでは覚えておきましょう。

ドメインの場合は名前を決める時に料金を払いましたが、
サーバーは10日間の試用が可能となっておりますので、
お金は契約サーバーを取得した後に10日以内に払えばいいということになってます。
Xserverアカウントの「決済関連」の「料金のお支払い」から支払いができます。

ドメインとサーバーを紐付ける

無事にサーバーとドメインが両方取れれば、
Xserverアカウントの画面にサーバーとドメインが両方表示されているかと思います。

次に、独自ドメインとサーバーを取っただけではまだこのドメインとサーバーに何の関係もなくて動かないので、
このドメインとサーバーを紐づける設定を行う必要があります。

同じ系列なんだから勝手に紐づけてくれという声が聞こえてきそうですが、実はそうじゃないんですね。

普通はドメインとサーバーは独立して取るようになっているので、
サーバー側の設定で「このサーバーではこういうドメインを使います」という宣言をしなければならないのです。

そしてエックスサーバーの場合は、 Xserverアカウントの中にある
サーバー専用のコントロールパネル（サーバーパネル）で設定することになります。

ここに入って、「ドメイン」の「ドメイン設定」から実際の設定を行います。

皆さんの画面には、初期ドメインである「サーバーID.xsrv.jp」しか表示されていないと思います。

ここで「ドメイン設定追加」というメニューを選びます。

ここでドメイン名のところに、先ほど取得したドメインをそのまま入力します。

その下の「無料独自SSLを使用する」と「高速化・アクセス数拡張機能『Xアクセラレータ』を有効にする」という項目がありますが、二つともチェックを入れたままで大丈夫です。

「SSL」とは、インターネット上で通信を暗号化する技術です。

サイトのURLが「https:」で始まるサイトを見かける事が最近はありますね…
というか、最近は大部分のサイトが「https:」で始まるURLになったと思います。

昔の個人サイトに馴染みがある人は従来の「http:」でやっていたと思います。

お問い合わせフォームなどの入力をする時に平文（暗号化されていない文章）でやり取りするのが
「http:」なのですが、「https:」だとそれが暗号化されるので、
最近はお問い合わせフォームを設置するサイトや、ショッピングサイト、SNSなどを運営するには
必須といえる存在です。

数年前までは個人レベルでSSLに馴染みのある方は少なかったです。
なぜなら、SSLはサーバー代とは別に暗号化の仕組みである「SSL証明書」を取得しなければならず、
その部分で高額の費用が発生していました。

しかしここ数年で、レンタルサーバー各社が
無料で SSL証明書を取得・サーバーに適用してくれるサービスを一斉に始めました。

これには2014年に設立された、
すべてのWebサーバの暗号化を目指す非営利団体「Let’s Encrypt」が深く貢献しています。

今ではエックスサーバーをはじめ、さくらやコアサーバー、ロリポップなど
主要なレンタルサーバーは全て無料でSSLの取得ができます。

しかもSSL証明書を取るために面倒な手続きや設定をしなくても、ほぼボタンひとつだけで完結します。
これは近年のサイト制作においては革命的な出来事と言っても過言ではありません。

というわけでここは何も考えずにチェックを入れたままにしておきましょう。

「Xアクセラレータ」も基本的にはそのままの設定で大丈夫です。
特に何もしなくてもサーバーが高速化されます。

何か不具合が起きた時だけ、原因の一つとして考えられる要素になるかもしれないので、
そんな時は試しに外すことを考えるという感覚で大丈夫です。

「確認」ボタンを押して、ドメイン設定が完了します。

これでサーバーとドメインが紐付いた、つまり独自ドメインのURLを打ち込むと、
このサーバーが表示するコンテンツにアクセスできるようになったことを意味します。

初期設定に最大1時間前後かかります。
それまでは「反映待ち」という表示がされるようになっており、
この表示が消えると正常に表示できるようになります。しばらくは別のことをしましょう。

ところで「https://www.gcmstyle.com」のように、
「www」が含まれるURLをよく見かけることがあると思います。

昔はURLの最初に「www.」を付けるのが一般的でした。

別に草を生やしているのではなくて、「www」とは「World Wide Web」の略称です。

これはWebサイトの存在している空間全体のことで、つまり
「『インターネットする』と俗に言う場合の『インターネット』のこと」を意味します。

ドメインにはメールとか色んな使い道があるけど、
その中でもWebサーバーに使う場所だよ！ということで「www」をつけていて、
今でもサーバーでは「www」があってもなくてもサイトにアクセスできる設定になっています。

ところが最近は「www」をつけない方が一般的になってきたように思います。

というのも、このスマホ時代にいち速くアクセスする時、
URLを覚えやすい・打ち込みやすいことが重要となり、なるべく短い文字列にする必要があります。

その過程で「www」をつけないサイトが増えたという実感を持っています。
なので今からやる人はwwwはつけないほうがわかりやすいと思います。
（このサイトもどこかのタイミングで変更したい…）

「反映待ち」の表示が消えたらいざURLにアクセスしてみましょう。

デフォルトでは「このウェブスペースへはまだホームページがアップロードされていません」という文字が出る — デフォルトでは「このウェブスペースへはまだホームページがアップロードされていません」という文字が出ます

エックスサーバーのデフォルトの文章である
「このウェブスペースへはまだホームページがアップロードされていません」という文章が出てきたら無事成功です。

あとはこのサーバーに実際のコンテンツをアップすれば、人に見てもらうホームページが完成というわけですね。

補足（ネームサーバーの設定）

ドメインとサーバーを別の系列のサイトでそれぞれ取得した場合、
「サーバーにドメインを紐づける」という上記の作業以外に、もう一つの作業が発生します。それは「ドメイン側でネームサーバーというものを設定する」ことです。

ざっくり言うと、ドメインとサーバーが両思いにならなければならないということです。

サーバーの方でドメインを定義しても、
ドメインの方でサーバーを向いていなければカップルにならないんですね。

試しにエックスドメインの方の設定画面を見てみましょう。
「ネームサーバー情報」というのが書かれていることにお気づきでしょうか。

ネームサーバー1から5まであり、それぞれに「ns1.xserver.jp」のように書いてあります。
これがネームサーバーの名前（ややこしい…）です。

これは「エックスサーバーにあるネームサーバーと対応付ける」という意味になります。

エックスドメインの場合、ここにデフォルトでエックスサーバーのネームサーバーが書いてあるため、
何もする必要はなかったのです。

例えば、ドメインがエックスドメインでサーバーがさくらのサーバーだったとします。

その場合はさくらのサーバーで「ドメイン名を入力してサーバーと紐付ける」という第一の作業が必要になります。

もう一つの作業がエックスドメイン側の設定として「さくらのサーバーを示すネームサーバーの名前を設定する」ことです。

ネームサーバーの名前は「（サーバー名）ネームサーバー」でネット検索すると、サーバー公式のヘルプページに多くの場合書いてあります。

さくらの場合は

プライマリネームサーバー（ネームサーバー1）：ns1.dns.ne.jp
セカンダリネームサーバー（ネームサーバー2）：ns2.dns.ne.jp

という名前になっています。
ネームサーバー3以降はありません。

この情報をエックスドメインのネームサーバー情報に入力します。
5個設定欄がありますが、ネームサーバーが2個しかない場合、1と2だけを入力して3〜5は必ず「空欄」にしてください。

「ns3.xserver.jp」などの記述を残しておくと「元カノ（カレ）をいつまでも電話帳に残している状態」ですので、
必ず空欄にします。

WordPressをインストールする（簡単インストール）

ここまで来たらあとはコンテンツをアップロードするという段階まできました。HTMLを上げれば、もうWebサイトとして成立します。

そのため、残りはWordPressを構成しているファイルをアップするという流れになります。

第3回で「WordPressはFTPソフトを使い、WordPressを構成するファイル群を丸ごとサーバーにアップしてそこからオンライン上で設定を行うことでサイトが作れる」と書きましたが、
実は FTP ソフトを使うより楽な方法があります。

それは「WordPress簡単インストール」というサーバーの機能を使ってしまうことです。

WordPressは有名で利用者が多いため、エックスサーバーに限らずメジャーなサーバーは
ほとんどこのような簡単インストール機能を持ち合わせています。

これの機能を使うと、サーバーの中にWordPress を構成するファイルを自動的に置いてくれますので、
FTPソフトを全く立ち上げないままにWordPressのインストールができます。

またFTPでファイルをアップロードした場合、アップ後にWordPressの初期設定の作業が待ち構えています。

WordPressさんはこれを自称「WordPressの有名な5分間インストール」と説明しており、
実際難しくはなくある程度の用語の理解があればすぐ設定が終わります。

ところが本当の初心者にとっては
「データベースってどういう設定にすればいいんだろう」という
疑問が発生し得る可能性があります。

このエックスサーバーの設定では、
「WordPress簡単インストール」の設定画面の段階で WordPress の初期設定に相当する作業、
すなわち「ブログ名」「サイトのURL」「WordPressにログインするためのユーザー名やパスワードの設定」など
基本的な部分さえ自分でできれば、あとはデータベースに関する情報などが自動で設定されます。

サイトURL

ドメインは自動的に入っています。
「/」の右にさらに空欄があり、ここはドメインのトップではなく
配下のフォルダにWordPressをインストールする際に入力します。

主に、同じサイトにWordPressを複数導入する必要が生じた際に使います。

もしくはサイトのトップページを普通のHTMLサイトにしつつ、
WordPressで更新したいコラムだけをWordPressにするという場合に
「/column」のような形でサブフォルダに置くことがあります。

そのような特別なことをしないのであれば、
普通にトップページにインストールすればいいので、右の欄には何も入力する必要はありません。

ブログ名

あなたがWebサイトにつけたい名前です。
後から変更できますので仮の入力でもまったく構いません。

ユーザー名、パスワード

WordPresssの管理画面にログインするときに使うユーザー名とパスワードになります（管理者のアカウントをひとつ作成します）。
両方とも好きなように設定できます。

ユーザー名は英字・数字の列でお好きなようにどうぞ。

パスワードを破られてしまうと他人が好きにコンテンツを編集できてとても危険ですので、
なるべく強固な普段使っていないパスワードを設定してあげる必要があります。

Chromeのブラウザの自動パスワード生成機能やパスワード生成サイトなどを駆使して
ランダムな文字列による強力なパスワードを作りましょう。

メールアドレス

ここでのメールアドレスは、
WordPress全体の管理用メールアドレスおよび管理者のユーザー名とパスワードに紐付いたもので、
WordPressで何かあった場合はこのメールアドレスに通知されます。

特にサーバー側でメールアドレスを新しく作らなくても、
WordPress のシステムから自動でメールを送ってくれます。

次の「キャッシュ自動削除」はそのままオンでいいです。

データベース

最後に「データベース」です。
WordPressでは、MySQLという仕組みのデータベースを使いデータを取り扱いますが、
そのデータベースの初期設定を自動で行ってくれる初心者にとって大変ありがたい項目です。
表からはほとんどデータベースを意識しないで大丈夫ということですね。

確認画面では、WordPress管理用のパスワードやMySQL用のパスワードを表示できるようになってますので、
この段階でパスワードなどをメモっておくといいと思います。

そして「インストールする」を押します。

インストールには数十秒から数分かかりますので、ボタンを押した後は何もせずに放置してください。

数分後に完了画面が出てきます。
この時「管理画面URL」が表示されますので、一旦このURLにアクセスしてください。

ログイン画面が出てくるので、先ほど入力したIDとパスワードでログインをしてみてください。
そして管理画面にログインできれば大成功です。

なんと素晴らしいことにもうこの時点でサイトの基本的な枠組みが完成してしまったのです！

またトップページにもこのような画面が表示されることを確認してください。

極めてシンプルで無骨なサイトではありますが、
ここからいろんなカスタマイズをしていくことになりますよ。

注意点としては、
すでにWordPressを入れているサイトで「簡単インストール」をやる場合に、
サブフォルダーの設定を間違えてしまうと、そこに既存のデータがあった場合上書きされてしまいます。

なお、導入でつまづいた時はエックスサーバーのヘルプをご覧ください。

私の本には書ききれない部分が公式のヘルプには画像つきで説明があります。
このヘルプが理路整然としているところも個人的なエックスサーバーの好きなところです。

自動インストール直後に行うのが望ましい設定

エックスサーバーによるWordPressの自動インストールが完了したら、
まずは以下の2つの作業を管理画面でやっておく必要があります。

サイトを検索に引っかからないようにする

作りかけのサイトですから、
完成するまではGoogle検索に引っかからないようにしておいた方が望ましいです。
いわゆる検索避けというやつですね。
そのための設定を行います。

「設定」→「表示設定」の一番下にある「検索エンジンがサイトをインデックスしないようにする」にチェックが入っていなければ入れて「保存」してください。
こうすることで、安心して作りかけのサイトの構築を進められます。

（より厳重にサイトを保護するために、パスワードをかける設定などもできます。別途記事で取り扱います）

FTPでアップしてインストールするパターンの場合、
最初の設定画面の時にこの「インデックスしないようにする」設定がありますが、
エックスサーバーの自動インストールではそのような設定がが無いので、
この段階で手動でやってあげる必要があります。

サイトを SSL に対応させる

「設定」→「一般」をご覧頂いて、
「WordPressアドレス（URL）」と「サイトアドレス（URL）」というところが
「https://」ではなく「http://」で始まっていた場合、ここを「https://」に変える必要があります。

先ほどドメインの紐付け設定の時に「SSLを利用する」と宣言したので、
ここをSSLに対応したアドレスに変えてあげる必要があるわけですね。

「WordPressアドレス」と「サイトアドレス」両方に設定します。

「WordPressアドレス」と「サイトアドレス」両方をhttpsで始まるアドレスに変更

設定を保存すると即座にログアウトされ、再びログイン画面が出てくると思います。
同じ IDとパスワードでログインすると再び管理画面に戻ることができます。

アドレスバーを見て、「https://」で始まるURLであり、鍵マークが表示されていることを確認してください。

無事httpsになったサイトのトップページとログイン画面を両方ブックマークしておくと、
今後の確認や設定変更などがスムーズに行えます。

これに無料テーマを適用してダミー記事を載せる（別途説明）と↓のようなサイトが完成します。
こういう感じのものならすぐ作れるという例として出しておきます。

「Wordpressによる令和時代の個人サイト制作入門」の過程で作ったデモサイト

次回は、WordPressの管理画面でできることを通じて、
WordPressが持っている機能を大まかに整理していきます。

令和時代の個人サイト制作入門（６）WordPressの管理画面

★こちらの連載を同人誌にした『令和時代の個人サイト制作入門』
紙の本およびダウンロード配信（PDF）を各種同人ショップで実施中です。
140ページの充実した内容となっておりますので、ぜひご覧ください。

令和時代の個人サイト制作入門～WordPressで一国一城の主になる方法～

次の記事「9/22開催「技術書典7」で新刊『令和時代の個人サイト制作入門』を発行します #技術書典」へ

前の記事「令和時代の個人サイト制作入門（４）WordPressに必要な環境を揃える」へ

著者「アンメルツP」について

アンメルツP（gcmstyle / 安溶二）
ボカロP。鏡音リン・レンなどのVOCALOID（広義）を歌わせたオリジナル曲・カバー曲を2008年から作り続けています。代表作にゲーム『プロジェクトセカイ』収録の高難易度曲「人生」、著書に『ボカロビギナーズ！ボカロでDTM入門第二版』（インプレス）など。
音楽ジャンルに関係なく、キャラクター性を活かしたボカロ曲を制作しています。
楽曲ストリーミング配信、カラオケ配信（JOYSOUND／DAM）多数。

より詳細なプロフィール・活動実績はこちら