こんにちは!兼業Webエンジニア兼Webデザイナーまさひろです。肩書が増えました笑
先日、無事にデザイン単体の案件を受注したことでデザイナーとして名乗ることにしました。お金が発生した時点でプロ。よって嘘は言ってません。
![](https://abenoblog.net/wp-content/uploads/2021/07/りんご.アイコン.png)
盛りすぎていることはいなめないンゴ!
エンジニアもデザイナーも自分でサイトを作るときにサーバーを契約してWordPressをインストールしますよね。
慣れれば簡単なのですが、最初はつまずくことも多々あります。
そこで、今回はなるべく優しく、画像多めでサーバーの契約からWordPressのインストール方法までを解説しました。
ちょっとした企画も準備しましたので、最後まで読んでいただけたら嬉しいです!
- サーバーの契約方法
- WordPressのインストール方法
- 最低限やるべき設定
目次
サーバーの選び方【Xサーバーがおすすめ】
サーバーとは?
そもそもサーバーとはなんぞや?という方のために簡単に説明すると、作成したWebサイトを保管しておくための箱のようなものです。
僕たちがホームページを見るときは、サーバーに「見せて!」とお願いしサーバーが「いいよ!」とデータを送ってくれているイメージです。
つまりサーバーがないとせっかく作ったWebサイトが誰にも見てもらえないということです。
サーバーとセットでドメインという言葉もよく聞くと思いますが、ドメインとはURLの末尾の部分【https://abenoblog.net】の【abenoblog.net】のことです。今回はあらかじめ準備されているドメインを使うので詳しい解説は省略します。
おすすめのサーバーは?
ぼくがおすすめするサーバーはエックスサーバーです。
![](https://www14.a8.net/0.gif?a8mat=3HEIIY+CKHGJ6+CO4+699KH)
エックスサーバーは以下のような特徴があります。
- 高速で動くのでストレスなく使用できる
- 利用者が多く、情報を探しやすい
- サポート機能が充実している
実際に運用していくうえで情報が多く分からないことを調べやすいというのが一番のメリットかと思います。
![](https://abenoblog.net/wp-content/uploads/2021/06/myicon-e1623405930130.png)
電話でもサポートしてくれるのはとても助かりますね!
まずは無料で始めてみよう
とはいえ、いきなりサーバーを契約するのは不安かと思います。エックスサーバーでは10日間のお試し期間がありますので、まずは実際に触ってみて扱い方を覚えていきましょう。
![](https://abenoblog.net/wp-content/uploads/2021/06/myicon-e1623405930130.png)
それでは実際の操作を説明していきます!
お試し申し込みの方法
それではエックスサーバーのサイトにいきます。
![](https://abenoblog.net/wp-content/uploads/2021/07/名称未設定-1.jpg)
お申し込みはこちら
![](https://abenoblog.net/wp-content/uploads/2021/07/名称未設定-1のコピー.jpg)
10日間無料お試し、新規お申込み
![](https://abenoblog.net/wp-content/uploads/2021/07/screencapture-secure-xserver-ne-jp-xinfo-2021-07-21-19_41_46-1024x796.jpg)
サーバーID:自分で好きな文字列を入力できます。実際に公開するサイトは独自のドメインを取得することになるので特に気にせずOK
プラン:X10を選択(デフォルトのまま)
WordPressクイックスタート:チェックをつけなくてOK
必要な情報を記入して次へ進みます。
![](https://abenoblog.net/wp-content/uploads/2021/07/screencapture-secure-xserver-ne-jp-xinfo-2021-07-19-18_36_41-741x1024.jpg)
必要な情報を記入して次へ進みます。
※インフォメーションメールの配信はチェック
入力したメールアドレス宛届いた確認コードを入力します。
![](https://abenoblog.net/wp-content/uploads/2021/07/screencapture-secure-xserver-ne-jp-xinfo-2021-07-19-18_39_39-scaledのコピー-908x1024.jpg)
ご自身が入力した内容を確認し、間違いなければ「SMS・電話認証へ進む」を選択
テキストメッセージで取得を選択
携帯に届いた認証コードを入力し「認証して申し込みを完了する」を選択
![](https://abenoblog.net/wp-content/uploads/2021/07/スクリーンショット-2021-07-19-18.41.26-1024x640.jpg)
この画面が出たらお試し申し込みの完了です!
SSL化を設定しよう
SSL化とは、一言でいうとセキュリティを高めるための設定です。データを送受信する時に第三者に情報が漏えいするのを防ぐ役割があります。
この設定がされていないサイトは「保護されていない通信です」と表示されてしまいます。
![](https://abenoblog.net/wp-content/uploads/2021/06/myicon-e1623405930130.png)
検索順位も落ちるので設定はマストです!
サーバー管理からサーバーパネルへ向かいます。
![](https://abenoblog.net/wp-content/uploads/2021/07/screencapture-secure-xserver-ne-jp-xserver-sv12623-2021-07-19-18_42_47-2048x1355のコピー-1024x678.jpg)
SSL設定
![](https://abenoblog.net/wp-content/uploads/2021/07/screencapture-secure-xserver-ne-jp-xserver-sv12623-2021-07-19-18_49_18-scaled-e1626767117605-1024x542.jpg)
独自SSL設定追加→CSR情報(SSL証明書申請情報)入力するをチェック→管理画面へ進む
![](https://abenoblog.net/wp-content/uploads/2021/07/screencapture-secure-xserver-ne-jp-xserver-sv12623-2021-07-19-18_50_18-scaled-e1626767049521-936x1024.jpg)
都道府県と市町村をご自身のお住まいの地域に変更※そのままでも特に問題ありせん
確認画面へ進む→追加する
![](https://abenoblog.net/wp-content/uploads/2021/07/screencapture-secure-xserver-ne-jp-xserver-sv12623-2021-07-19-18_51_17-scaled-e1626766923697-1024x322.jpg)
「〇〇〇〇〇〇.xsrv.jp」に独自SSL設定を追加しました。
と出たら完了です。
WordPressをインストールしよう
WordPressとは?
![](https://abenoblog.net/wp-content/uploads/2021/06/myicon-e1623405930130.png)
簡単に3行で説明します!
- 無料で簡単にWebサイトが作れるソフトウェア
- 個人ブログや企業のサイトなどなんでも作成できる
- 案件募集が多く、扱えると稼ぎやすい
![](https://abenoblog.net/wp-content/uploads/2021/06/myicon-e1623405930130.png)
個人でブログをしたい人もWeb制作で稼ぎたい人も必要なツールですね
WordPressのインストール手順
それではWordPressのインストール方法を解説します。
![](https://abenoblog.net/wp-content/uploads/2021/07/screencapture-secure-xserver-ne-jp-xserver-sv12623-2021-07-19-18_42_47のコピー-1024x678.jpg)
WordPress簡単インストール
![](https://abenoblog.net/wp-content/uploads/2021/07/screencapture-secure-xserver-ne-jp-xserver-sv12623-2021-07-19-18_52_21-scaled-e1626766854606-1024x353.jpg)
WordPressをインストールするドメインを選択
WordPressインストールを選択
![](https://abenoblog.net/wp-content/uploads/2021/07/screencapture-secure-xserver-ne-jp-xserver-sv12623-2021-07-19-18_44_32-scaled-e1626767305158のコピー-975x1024.jpg)
必要な情報を記入→確認画面へ進む
ブログ名:作成するサイトの名前になります。後で変更可能です。
ユーザー名:WordPressにログインするときのユーザー名になります
パスワード:WordPressにログインするときのパスワードになります
メールアドレス:サイトに紐づけたいメールアドレスを記載します
![](https://abenoblog.net/wp-content/uploads/2021/07/screencapture-secure-xserver-ne-jp-xserver-sv12623-2021-07-19-18_45_42-scaled-e1626766722182のコピー-1024x1024.jpg)
「インストールする」を押します
![](https://abenoblog.net/wp-content/uploads/2021/07/screencapture-secure-xserver-ne-jp-xserver-sv12623-2021-07-19-18_46_40-scaled-e1626767280628-1024x819.jpg)
この画面が出てきたらインストール完了です。念のためパスワードとMySQLのパスワードはメモしておきしょう。
※MySQLとは
MySQLとは、WordPressの情報を保管するデータベースのことです。今は特に気にしなくても大丈夫です。
ログインの仕方
![](https://abenoblog.net/wp-content/uploads/2021/06/myicon-e1623405930130.png)
サーバーの管理画面からWordPress簡単インストールを開きます
![](https://abenoblog.net/wp-content/uploads/2021/07/名称未設定-1のコピー-1.jpg)
管理画面用URLからWordPressの管理画面にいきます
![](https://abenoblog.net/wp-content/uploads/2021/06/myicon-e1623405930130.png)
インストールしてしばらくは「無効なURLです」と表示されます
![](https://abenoblog.net/wp-content/uploads/2021/07/りんご.アイコン.png)
大体5分から10分くらいで入れるようになるンゴ
![](https://abenoblog.net/wp-content/uploads/2021/07/screencapture-xs857606-xsrv-jp-wp-login-php-2021-07-19-19_07_33-1024x543.jpg)
インストールするときに記入したユーザー名とパスワードを入力します
![](https://abenoblog.net/wp-content/uploads/2021/07/screencapture-xs857606-xsrv-jp-wp-admin-2021-07-19-19_08_03-1024x848.jpg)
これがWordPressの管理画面です。
ここから無限のサイトが作れるわけですね。
SSLの設定をしよう
さきほど行ったSSL化ですが、WordPress側でも設定する必要があります。
![](https://abenoblog.net/wp-content/uploads/2021/06/myicon-e1623405930130.png)
簡単なので最初にサクッと終わらせましょう。
![](https://abenoblog.net/wp-content/uploads/2021/07/スクリーンショット-2021-07-23-8.26.05-1024x563.jpg)
設定→一般
WordPress アドレス (URL)とサイトアドレス (URL)をhttpsにする(sを追加する)
変更を保存
ログイン画面に移動するのでもう一度ユーザー名とパスワードを入力
サイトアドレスの横に鍵マークがついていればSSL化の完了です。
エックスサーバーを契約する
![](https://abenoblog.net/wp-content/uploads/2021/06/myicon-e1623405930130.png)
最後にエックスサーバー有料プランの契約方法をお伝えします!
エックスサーバーアカウントからログイン
料金支払いを選択
![](https://abenoblog.net/wp-content/uploads/2021/07/screencapture-secure-xserver-ne-jp-xapanel-xserver-payment-index-2021-07-19-19_04_54-1024x934.jpg)
サーバーIDにチェックを入れて契約期間を選択する
初期費用+選択した契約期間の合計金額を最初に支払います。
![](https://abenoblog.net/wp-content/uploads/2021/07/料金比較-1024x637.jpg)
ちなみに、僕が最初に契約したプランは12か月でした。
Web制作もブログも成果が出るのに時間がかかるので、最初は12か月のプランが良いかと思います。
![](https://abenoblog.net/wp-content/uploads/2021/07/screencapture-secure-xserver-ne-jp-xapanel-xserver-payment-method-2021-07-19-19_05_26-578x1024.jpg)
お支払い方法を選択して情報を入力
決済画面に進む
![](https://abenoblog.net/wp-content/uploads/2021/07/screencapture-secure-xserver-ne-jp-xapanel-xserver-payment-card-conf-2021-07-19-19_06_40-2048x1449のコピー-1024x725.jpg)
「支払いをする」を押すとサーバーの契約完了です。
![](https://abenoblog.net/wp-content/uploads/2021/07/りんご.アイコン.png)
最後まで読んでくれてありがとンゴ!
今回はサーバーの契約からWordPressのインストールの方法を解説します!