ウェブサイト
前回のレクチャーでは、サーバーとドメインの取得と設定をレクチャーしました。
サーバーとドメインをセットアップしたことで、ウェブサイトをはじめるための下準備ができました。
今回は、サーバーにWordPressをインストールして、テーマを設定していきましょう。
このレクチャーから、実際にウェブサイトをウェブブラウザ上で構築・制作する作業をしていきます。
まずは、WordPressとは何か、テーマとは何かを、おさらいしていきましょう。
前回のレクチャー
WordPressとは？
WordPressとは、ブログやウェブサイトをかんたんにはじめることができるシステムのことです。
通常ウェブサイトをはじめるには、プログラミング言語の知識や技術が必要になります。
しかし、WordPressをインストールすることで、誰でもかんたんにウェブサイトをはじめることができます。
WordPressのインストールはクリック1つで完了します！
さらに、WordPressの「テーマ」をインストールすることで、手軽にウェブサイトのデザインや機能も変えられます。
また、お問い合わせフォームや人気記事ランキングなどの機能も、「プラグイン」を導入することでかんたんにウェブサイトに設定ができます。
専門的な知識がない初心者の方でも、WordPressを利用することで、スムーズにウェブサイトの構築・制作・運用が可能になるのです。
WordPressは、これからウェブサイトをはじめるにあたっての、大切な基盤となっています。
テーマとは？
テーマとは、デザインや機能をウェブサイトにかんたんに適用させるためのパッケージです。
テーマをインストールすることで、ウェブサイトの見た目や機能をカスタマイズすることができます。
ウェブサイトのデザインは、ウェブサイトの構築・制作において大切な要素の１つです。
みなさんの中にも、ウェブサイトの見た目にこだわりたい、と思っている方もいらっしゃるでしょう。
通常のウェブサイトの構築・制作でデザインにこだわろうとすると、プログラミング言語の知識や技術が必要になる上、プログラミング言語を入力する手間もかかってしまいます。
テーマはインストールするだけで、完成された状態のデザインがウェブサイトに適用されます。
さらに、ウェブサイトの基本の色や画像、コンテンツの配置も自分好みに変更できるので、１つのテーマから無限のデザインの可能性が生まれます。
変更も、コードなどをいじらずにかんたんに反映できるので、初心者の方でも自分の好きなようにウェブサイトをカスタマイズしやすいです。
WordPressのインストールとテーマの設定
- WordPressのインストール（30分）
wpXでWordPressをインストールします。
- テーマのインストール（15分）
WordPressにテーマのインストールをします。
| 必要なツール | 必要なコスト |
|---|---|
 Google Chrome |
|
無料テーマを使う場合は無料、有料テーマを使う場合は1万円前後の費用がかかります。
WordPressをインストールする
それでは、WordPressのインストールについてレクチャーしていきます。
WordPressのインストールは、前回のレクチャーで取得してドメインを設定したサーバーの、「wpXクラウド」からおこないます。
「wpX」はWordPressに特化したレンタルサーバーなので、WordPressでウェブサイトをはじめたい方、特に初心者の方におすすめのレンタルサーバーです。
1-1. WordPressのインストール
まずは、wpXクラウドの管理パネルにログインします。
ログインしたら、「サーバー管理」のタブから「新規インストール」をクリックします。
WordPress新規インストール画面が表示されるので、「WordPressID」、「ブログタイトル」、「メールアドレス」を入力しましょう。
「サイトアドレス」は、独自ドメインを利用する場合は入力不要です。
「独自SSL」はここでは設定せずに、後ほど設定しましょう。
3つの項目の入力が終わったら「次へ進む」ボタンをクリックします。
確認画面が表示されるので、間違いがないか確認したら「確定（WordPressをインストール）」ボタンをクリックします。
これでWordPressのインストールは完了です。
ウェブサイトがブラウザに表示されるまで最大15分ほどかかるので、しばらく待ちましょう。
管理ユーザとパスワードは、最初にWordPressにログインするときに必要な情報なので、忘れないようにコピーしておきましょう。
WordPressのインストールってこんなにかんたんなんですね！もっと複雑なのかと思っていました。
WordPressの自動インストール機能がついているレンタルサーバーを使うと、クリックだけでインストールできるので初心者の方におすすめです。
インストール直後にウェブサイトにアクセスすると、このような画面が表示されます。
先にこのページを開いてしまうとキャッシュが残ってしまい、15分以上経過しても正しくウェブサイトが表示されない場合があります。
インストール後は、15分ほど待ってからアクセスするのがおすすめです。
15分ほど経過してからウェブサイトにアクセスすると、このようにウェブサイトが表示されます。
アドレスバーのところに「保護されていない通信」とありますが、これは何でしょうか？
これは「SSL化」をされていないウェブサイトの状態を示しています。
先ほど後回しにした「独自SSL」の設定をしましょう。
先ほど後回しにした「独自SSL」の設定をしましょう。
1-2. 独自SSLを設定する
「SSL」とは、インターネット上の情報を暗号化して通信する仕組みのことをいいます。
ウェブサイトに「SSL化」を設定することで、個人情報などの重要な情報が暗号化されるので、インターネット上でのトラブルを防ぎやすくなります。
SSL化したウェブサイトのURLは「http」ではなく、「https」からはじまります。
キーワード
- SSL：インターネット上の情報を暗号化して通信する仕組み。個人情報などの重要な情報も暗号化されるので、インターネット上でのトラブルを防ぎやすくなる。SSL化してあるウェブサイトのURLは、「https」からはじまる。
それでは、SSL化の設定をしていきましょう。
「アプリケーション設定画面へ」をクリックします。
アプリケーション設定画面の下にある「セキュリティ設定」から「独自SSL設定」の「設定」ボタンをクリックします。
独自SSL設定の追加画面が表示されるので、「CSR情報」にチェックは入れずに、「独自SSLを追加する（確定）」ボタンをクリックしましょう。
「CSR情報」とは、SSL化をするときに必要な、「SSLサーバ証明書」を発行してもらうために提出する個人情報のことです。
企業で独自にSSL化をする場合は、SSLサーバ証明書の発行のためにCSR情報が必要な場合がありますが、個人でウェブサイトを運営していく場合は特に必要ありません。
CSR情報の部分は入力せずに次に進みましょう。
SSL化補助機能の画面が表示されるので、①SSL化補助機能のすべての項目をチェックし、②「チェックを入れた機能を実行（確認）」ボタンをクリックします。
確認画面が表示されるので、間違いがないか確認をして、「チェックを入れた機能を実行（確定）」ボタンをクリックします。
これでSSL化が完了しました。
セキュリティのために今はSSL化するのが主流となっているので、忘れずに設定しましょう。
SSL化の設定は、ウェブサイトの運営をはじめてから設定すると、バックアップを取ったりと面倒なので、構築するときに設定するのがおすすめです。
SSL化の設定直後にウェブサイトにアクセスすると、このような画面が表示されます。
ウェブサイトに適用されるまで最大1時間ほどがかかるので、しばらく待ちましょう。
1時間ほど経過して、再度ウェブサイトにアクセスしました。
アドレスバーを確認すると、きちんとURLが「https」ではじまっています。
ここまでが、WordPressをインストールしてウェブサイトを表示させるまでの流れです。
ウェブサイトがようやく見える形になりましたね！感動です！
こうして自分のウェブサイトが目に見える形になると嬉しいですよね！
WordPressをインストールしたときに最初に表示されるウェブサイトのデザインは、WordPressの公式テーマが適用されています。
ここから、テーマを設定して自分の好みのウェブサイトにしていきましょう。
1-3. 管理画面へログイン
まずは、WordPressの管理画面にログインしましょう。
自分のウェブサイトのURLの後ろに「/wp-admin.php」と入力すると、ログイン画面が表示されます。
ログイン画面が表示されたら、WordPressをインストールするときに設定した管理ユーザと、ランダムで生成された初期パスワードを入力し、ログインします。
ログインすると、「ダッシュボード」が表示されます。
ここがWordPressの管理画面のホームとなります。
左端にある黒いバーは「メニュー」といいます。
ログアウトは、ツールバーの右端のアイコンにカーソルを重ねる（マウスオーバー）とバーが表示され、その中の「ログアウト」をクリックすることでおこなえます。
テーマの設定をする前に、初期パスワードを変更しましょう。
1-4. パスワードの変更
メニュー内の①「ユーザー」をクリックし、②「ID」をクリックします。
ユーザー画面をスクロールしていくと、「パスワードを生成する」ボタンが表示されるので、クリックします。
クリックすると新規パスワードの入力画面が表示されるので、①新しいパスワードを入力し、②「プロフィールを更新」ボタンをクリックします。
これで次回からは、自分が設定したパスワードで管理画面にログインできるようになります。
テーマをインストールする
パスワードの変更が完了したら、テーマの設定へと移ります。
まずはテーマを選ばないといけませんね。
テーマってどれを選べばいいんだろう・・・
2-1. インストールするテーマを決定
WordPressの特徴として、世界中でリリースされているテーマから好みのものを選択できるというポイントがありますが、どういった選び方をすればいいのか難しいですよね。
国 産 | 海外産 | |
|---|---|---|
有料 | ◎ | △ |
無料 | ○ | △ |
テーマは大きく分けると、国産か海外産か、有料か無料かに分けられます。
海外産テーマも美しく高機能なテーマがたくさんあるのですが、マニュアルやカスタマイズといった情報が、日本語ではなかなか得ることができないというデメリットがありますので、まずは国産テーマから選んでみましょう。
もちろん英語が堪能な方は海外テーマに挑戦するのもアリです！
有料テーマと無料テーマはどちらがおすすめかというのは、色々な観点がありますが、私たちは有料テーマをおすすめします。
有料テーマは無料テーマと比較すると、インストールすればほぼ完成という状態でウェブサイトをはじめることができるものが多いです。マニュアルも充実しています。
有料テーマと無料テーマでおすすめのテーマをピックアップしました！
なるべく初心者の方が使いやすいようなテーマを選んだので、参考にしてください。
おすすめの有料テーマ
SANGO 
| 評価 | |
| おすすめポイント | 心地よいマテリアルデザインと豊富な機能 |
| 価格 | 10,800円（税込） |
SANGOはユーザーフレンドリーを追求したWordPressテーマです。Googleのマテリアルデザインを大部分で採用。内部SEOも最適化されています。
「サルワカ」の中の人が制作したテーマです。心地よいマテリアルデザインと、コンテンツを制作するのに便利な機能が豊富で、ブログをはじめるなら、このテーマを選んでおけば間違いないです。「Lipple inc.」も「SANGO」を使用しております。
MAG
| 評価 | |
| おすすめポイント | 美しいデザインと機能 |
| 価格 | 10,980円（税込） |
全てのブロガーに捧げるアクセスアップと広告収益を同時に上げる為のWordPressテーマ「MAG」
ひとつひとつのコンセプトや目的に沿ったテーマを多数リリースしている「TCD」からブログ向けテーマの「MAG」をピックアップしました。直感的にコンテンツを制作できるのが特徴です。アイキャッチ無しでも訴求力抜群の「ZERO」というブログ用テーマもおすすめです。コーポレートサイトやポートレートサイトに最適なテーマも複数ありますので、目的に沿ったテーマが見つかると思います。
SWALLOW
| 評価 | |
| おすすめポイント | シンプルな見た目と洗練された機能美 |
| 価格 | 9,900円（税込） |
「SWALLOW（スワロー）」はブロガーのためのWordPress専用テーマです。 余計な機能を削ぎ落とし可能な限りシンプルな設計の「モバイルファーストテーマ」となっています。
プロブロガー八木仁平監修のテーマです。「必要なものとは何か」というコンセプトで開発された、スッキリした見た目とシンプル機能が特徴です。ブログ初心者にぴったりなテーマです。メディア運営にもおすすめ。
おすすめの無料テーマ
Cocoon
| 評価 | |
| おすすめポイント | SEO・高速化・モバイルフレンドリーに最適化 |
| 価格 | 無料 |
Cocoonは、SEO・高速化・モバイルフレンドリーに最適化した無料テーマです。
とにかくシンプルで、コンテンツをファーストに設計されたテーマです。デザインなどは少し物足りないという印象はありますが、ウェブサイトをはじめるための基本的な機能はしっかりと含まれているため、初心者の方におすすめです。
Sentry
| 評価 | |
| おすすめポイント | スマートフォンのデザインが美しい |
| 価格 | 無料 |
Sentry（セントリー）は、AMPに対応したスマホファーストの無料Wordpressテーマです。
テーマをインストールするだけで、様々な機能がすぐに使えます。デザインもカスタマイズしやすく、記事の執筆や編集作業をサポートする機能も用意されているので、コンテンツ制作が充実します。
Godios.
| 評価 | |
| おすすめポイント | 革新的な表示速度と女性的なデザイン |
| 価格 | 無料 |
革新的な表示速度を実現可能にした無料WordPressテーマ
ページが一瞬で表示されます。デモサイトでぜひ体感してください。 ストレスなく閲覧できるウェブサイトはファンがつきやすいです。 セミフラットデザインという少し柔らかな印象のデザインが女性の方におすすめです。シェアボタンの表示がかわいいです。
テーマは有料・無料のものがたくさんあり、迷ってしまいますが、最初のうちは自分の好みに合っているデザインを選ぶといいですよ。
今回は目に優しくて使いやすいデザインの「SANGO」にしました。
「SANGO」には「親テーマ」と「子テーマ」があります。
親テーマは配布されている基本のテーマのことで、子テーマはカスタマイズ用のテーマのことをいいます。
子テーマを使用してウェブサイトをカスタマイズすれば、親テーマのアップデートがされたときも、メンテナンスがしやすいので便利です。
また、親テーマをカスタマイズしていて重要なコードを消してしまった、というトラブルも回避できます。
テーマの設定後は、ウェブサイトのカスタマイズもしていきたいので、今回は子テーマを使用します。
子テーマの使用には親テーマのインストールも必要なので、どちらもインストールしていきましょう。
子テーマがないテーマもたくさんあるので、その場合は親テーマをだけインストールして使用しましょう。
キーワード
- 子テーマ：基本のテーマ（親テーマ）とは別の、カスタマイズ用のテーマ。子テーマでウェブサイトのカスタマイズをすることで、親テーマのアップデートがあったときもメンテナンスがしやすい。
2-2. テーマをインストール
それでは、テーマをWordPressにインストールしていきましょう。
メニュー内にある①「外観」をクリックします。
テーマの画面が表示されるので、②「新規追加」ボタンをクリックします。
テーマをアップロードする画面が表示されるので、「ファイルを選択」ボタンをクリックします。
ファイルの選択画面が表示されるので、①テーマを選択し、②「開く」ボタンをクリックします。
ファイル名を確認して、問題がなければ「今すぐインストール」ボタンをクリックします。
「テーマのインストールが完了しました」と表示されたらOKです。
親テーマは使用せずに子テーマを使用するので、「テーマのページに戻る」をクリックして、テーマの画面に戻りましょう。
続いて子テーマをインストールします。
親テーマと同様、①テーマを選択し、②「開く」ボタンをクリックします。
インストールが完了したのを確認したら、子テーマの場合は「有効化」をクリックします。
テーマの画面を開いたら①テーマがインストールされているか確認し、②「サイトを表示」をクリックします。
サイトを表示をクリックして、きちんとウェブサイトにテーマが適用されているか確認しましょう。
2-3. ウェブサイトのインデックスを回避する
ウェブサイトは公開されましたが、まだ完成形ではないので検索エンジンにインデックスされないように設定しましょう。
「インデックス」とは検索エンジンが「クローラー」と呼ばれるシステムを利用して、ウェブページを分析しデータベース化した状態のことをいいます。
検索エンジンは日々世界中のウェブサイトをチェックし、データベース化しています。
ウェブサイトはインデックスされることで、検索エンジンの検索結果に表示されるようになるのです。
メニュー内の①「設定」をクリックし、その下に表示される②「表示設定」をクリックします。
表示設定の画面が表示されたら、③「検索エンジンがサイトをインデックスしないようにする」にチェックを入れます。
最後に④「変更を保存」ボタンをクリックすれば、ウェブサイトがインデックスされなくなります。
ウェブサイトが完成したら設定を戻すのを忘れないようにしましょう。
キーワード
- インデックス：検索エンジンが「クローラー」と呼ばれるシステムを利用して、ウェブページを分析しデータベース化した状態のこと。
2-4. WordPressをメンテナンスモードに設定
制作途中のウェブサイトはあまり人に見られたくないですよね。
最後に、「プラグイン」を使って、制作中のウェブサイトが表示されないようにメンテナンスモードの設定をしましょう。
はじめてのプラグインのインストールですね！
プラグインに関しては今後詳しくレクチャーします。
メニュー内の①「プラグイン」をクリックします。
プラグインの画面が表示されたら、②「新規追加」ボタンをクリックします。
新規追加をクリックしたら、プラグインの追加画面が表示されます。
①「WP Maintenance Mode」で検索してください。
「WP Maintenance Mode」は、ウェブサイト全体をメンテナンスモードの表示にしてくれる便利なプラグインです。
検索したら「WP Maintenance Mode」が表示されるので、②「今すぐインストール」ボタンをクリックします。
インストールが完了すると、「有効化」のボタンが表示されるので、クリックします。
「有効化」ボタンをクリックすると、自動的に画面が移動します。
今回インストールした「WP Maintenance Mode」の「設定」をクリックします。
設定画面が表示されるので、まず「状態」の①「有効化」にチェックを入れます。
こうすることでメンテナンスモードが設定されます。
その下の②「検索エンジンボットをバイパスする」は、先ほど設定した「2-3. ウェブサイトのインデックスを回避する」と同じ機能ですが、重ねて設定しておきましょう。
最後に③「変更を保存」ボタンをクリックすると、ウェブサイトの表示がメンテナンスモードに切り替わります。
メンテナンスモードを解除する場合は、「WP Maintenance Mode」の「設定」から変更してもいいですが、プラグインの管理画面から「停止」がおすすめです。
プラグインが適用されると、ウェブサイトはこのように表示されます。
プラグインを停止しない限り、ウェブサイトの表示はこのままになります。
ウェブサイトが完成したら、プラグインの停止も忘れないようにしましょう。
まとめ
WordPressをインストールし、テーマを設定したことで、ウェブサイトが構築されました。
みなさんが想像しているよりも、WordPressのインストールはかんたんに感じませんでしたか？
テーマは「SANGO」を利用しましたが、他のテーマを使用した場合も、これからのレクチャーは役立つ内容ですので、改めて今後もよろしくお願いします。
次回からは制作に移ります・・・といいたいところですが、テーマやプラグインの設定でも操作したWordPressの管理画面について解説します。
何事も基本からですね！
次回のレクチャー
取締役
チーフエディター リサ
チーフエディター リサ
横浜市在住。 学生時代よりウェブメディアを複数運営していた経験を生かし、株式会社Lippleで編集長として勤務。ライティングだけでなく、ウェブサイト運営・分析も行う。年間100本以上の映画鑑賞がライフワーク。ピカチュウが大好き。
記事一覧を見る 代表取締役 社長 マサキ
ウェブサイト制作のことならLippleにご相談ください
Lippleは経営活動、営業活動に柔軟に対応したウェブサイトを構築・制作し導入します。ウェブサイト制作でお悩みの方は、私たちまでご相談ください。