新しいサイトの作りを一から公開するよ

new-site

こんにちは、龍権(@ryuken_biz)です。

2017年はブログを一年間書いてきて、ブログの美味しさを味わってしまったので、2018年は新しいサイトを立ち上げようと思っています。
やっぱり育てる時は大変ですが、育った後の喜びは育てたやつしか知らないでしょ。

ということで、今回は新しいサイトの作りを一から公開していこうと思います。
大したことはしていませんが、サイトの作りで苦労している方々にはためになるように、なるべく詳しく書いていきます。

ドメインを取ろう

ドメインとは、あなたのサイトの住所のことをいいます。
例えば、「www.yahoo.co.jp」のことです。
世の中には数え切れないほどのサイトが存在しますが、それらを一意的に識別するためのものになります。

独自ドメインを取らなくても、ホームページサービス提供業者に登録すると、無料でドメインを取得することはできます。
また、無料ブログに登録しても、ホームページに近いサイトは作成できます。
しかし、サイトを自在に修正できなかったり、業者の広告が強制的に表示されたり、サービスが突然終了するリスクがあったりとなにやら不安要素が多いです。
ですので、利益を狙ったサイトを作成するのであれば、最初から独自ドメインを取ることをお勧めします。
ですので、今回は独自ドメインを取ることから始めました。

ドメイン取得

ドメインは「お名前.com」で取得しました。
取得するドメインは最初から決まっていて、「tokyobtc」を取得しようと思っていたので、検索してみます。
new-site1

すると、「tokyobtc」で取得できるドメインが表示されます。
「.com」や「.net」が良さそうでしたが、すでに取得されていたので、今回は「.info」にしました。
「.info」にチェックを入れて、次に進みます。
new-site2

契約期間はとりあえず1年にします。
初期設定で自動更新になっているので、意図的に解約しなければずっと更新され続けられます。
「Whois情報公開代行(新規登録と同時なら無料)」にはチェックを入れました。
後で公開をお願いしようとすると、すごい費用がかかるみたいですよ。
サーバーは既に「エックスサーバー」を使っていたので、ここでは「利用しない」を選択しました。
お名前IDとパスワードを入力して、次に進みます。
アカウントを持っていない場合は、新規登録から始めましょう。
new-site3

支払いは既に登録されているクレジットカードにしました。
コンビニ・銀行振込・請求書で支払うことも可能です。
new-site4

申込が完了すると、申込内容が確認できます。
new-site5

ドメイン一覧メージでも、ドメインが登録されていることが確認できました。
new-site6

ネームサーバ変更

ネームサーバとは、「tokyobtc.info」にアクセスが来た時に、「ここを見に行ってね」とコンテンツの場所を教えるための情報です。
今回、ドメインは「お名前.com」で取得し、サイトのコンテンツは「エックスサーバー」に登録する予定でしたので、「tokyobtc.info」のネームサーバを「エックスサーバー」に変更しないといけません。

エックスサーバー」では、ログインするとネームサーバ情報が確認できますので、それらの情報を元にネームサーバを変更しておきます。
ネームサーバを変更しようとすると、一度確認されるので、このまま進めます。
new-site7

エックスサーバー」で確認したネームサーバ情報を登録していきます。
数が少ない時や多い時にも対応していますね。
new-site8

確認画面で間違いないことを確認してから、設定します。
new-site9

変更が完了したことを確認できました。
new-site10

ドメイン取得はこれでバッチリですので、次は取得した「tokyobtc.info」を「エックスサーバー」に登録していきましょう。

レンタルサーバにドメインを登録しよう

エックスサーバー」の管理画面にアクセスして「ドメイン設定」に進みます。
new-site21

「ドメイン設定」画面で「ドメイン設定の追加」タブを選択して、「tokyobtc.info」を入力します。
「✅無料独自SSLを利用する」と「❏CSR情報(SSL証明書申請情報)を入力する」は初期設定のままにしておきます。
終わったら、「ドメイン設定の追加(確認)」を押して、確認画面に進みます。
new-site22

確認画面でドメインが間違いないことを確認してから、「ドメイン設定の追加(確定)」を押しましょう。
new-site23

ドメイン設定が追加されました。
new-site24

10分ほど経ってから「tokyobtc.info」にアクセスしてみると、ちゃんと「Xserver」が表示されました。
この時点ではまだコンテンツがないので、当然です。
これからコンテンツを追加していきましょう。
new-site25

XサーバーにWordPressをインストールしよう

サイトにコンテンツを追加する方法はいろいろあります。
HTMLを作成してアップするのも良いでしょう、今時この方法を使う方はいないと思いますが。
何かしらツールを使って更新するのが普通でしょう。

今回は、コンテンツ管理が楽にできる「WordPress」を使うことにしました。
ということで、「エックスサーバー」に「WordPress」をインストールしましょう。
インストールといっても管理画面でできるので、難しいことは一切ありません。

まずは、サーバー管理画面で「自動インストール」を選択しましょう。
new-site31

「自動インストール」画面で「プログラムのインストール」を選択すると、インストールできるプログラム一覧が表示されます。
一番上に「WordPress」が表示されているので、「インストール設定」を押しましょう。
new-site32

設定画面で色々入力します。
「インストールURL」に何も入力しないと、内部のディレクトリが分かりづらくなるので、適切なディレクトリを入力します。
「ブログ名」にはかっこいい名前を付けました。後でも変更できるので、あまり気にしないで入力しましょう。
「ユーザ名」、「パスワード」は管理画面にアクセスするための情報です。
「メールアドレス」は管理者のメールアドレスを入力します。
「データベース」は特にこだわりがなければ、「自動」で生成しましょう。
new-site33

確認画面で一通り確認し、問題なければ「インストール(確定)」を押しましょう。
new-site34

インストールが完了すると、管理画面のURLとID、PASSWORDが画面に表示されます。
赤字で書いてある通り、管理画面へのログイン情報ですので、必ず控えておいてくださいね。
new-site35

「インストール済みプログラム一覧」タブでも「WordPress」がインストールされていることを確認できましたー
new-site36

ここで、ドメイン「tokyobtc.info」にアクセスしてみるとサイトが表示されるはずですが、実はまだ「Xserver」が表示されます。
ここで、「tokyobtc.info/wp」にアクセスすると、サイトがちゃんと表示されました。
new-site37

これは、「WordPress」をインストールする際に、「http://tokyobtc.info/wp」にインストールしたことが原因です。
次は、「tokyobtc.info」にアクセスした際に、サイトが表示されるように設定してみましょう。

サイトアドレスから「wp」を消す設定

「WordPress」にログインして、「設定」→「一般」を選択しましょう。
new-site41

「サイトアドレス (URL)」を以下のように修正します。
修正前:「http://tokyobtc.info/wp
修正後:「http://tokyobtc.info」
new-site42

「変更を保存」をクリックして、WordPress側の修正は一旦終わりです。

次に、FFFTPツールを利用して、WordPressのディレクトリの中にある「.htaccess」と「index.php」をダウンロードします。
ディレクトリは「/tokyobtc.info/public_html/wp/」配下です。
new-site43

ただし、一階層目に「.htaccess」がある場合は、そのままでいいので、「.htaccess」はダウンロードしなくて良いです。
今回は、一階層目にすでに存在していたので、「index.php」のみダウンロードします。
new-site44

ダウンロードした「index.php」をテキストエディタで開いて、最後の1行を編集します。
修正前:「/wp-blog-header.php」
修正後:「/wp/wp-blog-header.php」
new-site45

編集が終わったら、「index.php」を一階層目にアップしましょう。
「.htaccess」もダウンロードしている場合は、同じ階層にアップしましょう。
new-site46

同じ階層にある「index.html」が邪魔しているので、名前を「index.html.backup」に変更しておきます。
new-site47

これで「tokyobtc.info」にアクセスしたら、サイトがちゃんと表示されましたー
new-site48

ブログテーマを導入しよう

WordPressのテーマは無料テーマも数多くあり、無料テーマを使っても見た目のきれいなサイトは作成できます。
しかし、かゆいところに手が届かないというか、欲しい機能がないゆえにサイトのカスタマイズが自在にできないデメリットもあるわけです。
今回はサイトをガッツリ作り込みたいので、最初から見た目の機能も充実している有料テーマを導入しようと思いました。

WordPressテーマ「ハミングバード」」がシンプルでアニメーション機能も付いていたので、導入してみます。

リンク先に遷移して普通の買い物感覚でテーマが購入できます。
購入が完了すると、「hummingbird.zip」の圧縮ファイルがダウンロードされますので、「tokyobtc.info」に導入しましょう。

まずは、管理画面にログインして、「外観」→「テーマ」をクリックします。
new-site52

「新規追加」をクリックします。
new-site53

「テーマのアップロード」をクリックします。
new-site54

「ファイル選択」で先程ダウンロードした「hummingbird.zip」を選択し、「今すぐインストール」をクリックします。
new-site55

インストールが完了したら、忘れないで「有効化」をクリックしましょう。
new-site56

新しいテーマが有効になりましたね。
new-site57

その違いはテーマ導入前後を見比べてみると歴然です。
有料テーマ導入前
new-site51
有料テーマ導入後
new-site58

サイトの準備はこれで完了しました。
やってみると意外とそんなに大変でもなかったです。
新規サイト構築のハードルが高くて、なかなか踏み出せない方でも試してみたら良いのではないでしょうか。
これからコンテンツを追加していくので、お楽しみに。