【Lesson3】WordPressをインストールしてみよう!サイトのSSL化とテーマのインストール

ここで学習できること
  • ワードプレスのインストール方法
  • 超重要!サイトのSSL化
  • 初心者おすすめの無料テーマ「Lightning」をインストールしてみよう
  • 補足:おすすめ有料テーマ「TCD」

ワードプレスをインストールしよう

画面の「ワードプレスをインストール」ボタンをクリックします。

ねえさん
ねえさん
左のメニューバーのサイト作成ツール>WordPress簡単インストールを選択してもOK。

ワードプレス簡単インストールの設定

「サイトURL」の所に先ほど作ったドメインが入っています。
ドメイン右横の三角をクリックするとサイトのURLにwwwをつけるかつけないか決めれます。

今回のURLだと「http://bono1990.com」にするか「http://www.bono1990.com」のどちらかです。

ヤフーやグーグルなど大手サイトにはwwwが付いているところが多いです。
wwwが無いとサイトのURLが短くなって良いという意見もあります。
wwwのあるなしが検索結果に影響を与えることは無いので、あなたが好きな方でいいです。

コウちゃん
コウちゃん
僕は短い方がいいから「http://bono1990.com」にするね!
ねえさん
ねえさん
wwwが付いているのと、付いていないサイトは全く別物なので混同しないよう注意しましょう。

ドメインの隣の「入力は任意です」と書いてある所には、何もいれないでください。

利用データベースはそのままでOK。

引き続きワードプレスの設定をします。
サイトのタイトルは後からでも変更できるので、とりあえず思いつくものを選べばOKです。

ユーザー名、パスワードを決め、メールアドレスを入力します。

ここで入力したユーザー名とパスワードはワードプレスの管理画面にログインする際に必要になるので、忘れないようにしましょう。

プライバシー 検索エンジンによるサイトのインデックスを許可するのチェックはとりあえず外しておきます。

この意味はグーグルやヤフーの検索結果に表示させるようにしますか?という意味です。
現段階だとワードープレスをインストールしただけで、何も内容がありませんよね?
ある程度お客さんに見てもらって大丈夫な内容まで仕上がってからサイトをインデックスさせましょう。

この設定は後からワードプレスで変更できます。

 

 

承諾するにチェックをいれてインストールボタンを押します。

 

 

正常にインストールできたらこの画面になります。
管理者URLをクリックしてみてください。

 

後からもう一度ロリポップで作業しますのでロリポップの画面は閉じないでください。

ねえさん
ねえさん
ワードプレスに戻ります。

 

管理者URLをクリックするとワードプレスのログイン画面に移動します。

先ほど入力したユーザー名、パスワード、表示されている日本語を入力してログインボタンを押せば管理画面に入れます。

ねえさん
ねえさん
こちらのページをブラウザーの「お気に入りに追加」しておくと今後ログインする際に便利です。
ねえさん
ねえさん
お疲れ様!ワードプレスがインストールできました。

コウちゃん
コウちゃん
やったー
ねえさん
ねえさん
普通ならここで終了なんだけど、内容を作り始める前にサイトをSSL化します。

コウちゃん
コウちゃん
SSL化??
ねえさん
ねえさん
SSL化はとっても重要なの。
サイトを作り終わってからSSL化するのはとってもややこしい!!
必ずサイトを作り始める前に済ませておきましょう!!

SSLとは

SSLとは「SSL(Secure Sockets Layer)」の略で、インターネット上でのデータのやりとりを暗号化し、第三者に情報をのぞかれたり盗まれたりしないようにする機能のことです。

少し前まではクレジットカードなどのデータを扱うサイトのみSSL化されていましたが、今では全てのサイトをSSL化するようGoogleが推奨しています。


SSL化されているサイトは
https://で始まり、URLの上に鍵マークがつき「保護された通信」と表示されています。


一方でSSLされていないサイトは
「保護されていない通信」と表示されます。

サイトをSSL化することでグーグルからの評価が上がることも期待できます。

サイトをSSL化してみよう

ねえさん
ねえさん
ロリポップならサイトのSSL化もボタン1つでできちゃいます。

ロリポップ!に戻ります。
左サイドバーの セキュリティ>独自SSL証明書導入をクリックします。
SSLには無料と有料がありますが、今回は「無料独自SSLを設定する」をクリックしてください。

チェックボックスにチェックをつけて、独自SSL(無料)を設定するをクリックします。

クリックするとSSL化が始まります。
通常数分で作業が完了します。

ロリポップでSSL化が終わったらワードプレスの画面へ戻ります。

左サイドバーにある、設定>一般をクリックします。
一般設定の「WordPressのアドレス(URL)」とサイトドレス(URL)が
http://になっていますので、2つともhttps://と修正します。
半角英数小文字のsを入れてください。
入力できたら、ページ一番下の「変更を保存」をクリックして保存します。

 

 

一度ログアウトした後ログインして「保護された通信」となっていれば成功です。

ねえさん
ねえさん
お疲れ様。これでワードプレスのインストールは終了です。

 

テーマをインストールしよう

テーマ(テンプレートみたいなもの)を利用すれば誰でもプロみたいな美しいデザインのホームページを作れます。
もちろんスマホ表示にも対応!
テーマには無料の物と有料のものがあります。
また「プラグイン」という機能を追加すればプログラミングを覚えなくても無料で、いろんな機能をホームページに追加できます。

ワードプレスのテーマとは

ワードプレスのテーマはデザインのテンプレートみたいなものです。
ダッシュボードの外観 > テーマから様々なテーマを確認できます。ボタン一つでテーマを切り替えれます。
テーマには無料で使用できるもと有料で使用できるものの2種類あります。

会社やお店におすすめなのは「Lightning(ライトニング)」
Lightning(ライトニング)は無料で使えるワードプレステーマで、ビジネスに最適な機能が備わっています。

ライトニングのおすすめ5つのポイント

無料で使用できて商用利用もOK!

無料のテンプレートの中には商用利用NGのものもあるけど、ライトニングなら無料で利用できます。

ライトニングは厳しい審査を通過して公式登録されたテーマで、管理画面上から簡単にインストールできます。
(公式登録していないテーマは、zipファイルをダウンロードしてそれをアップしなければならならないので手間がかかります。)

また、「レスポンシブデザイン」と言って、パソコンからアクセスするとパソコン用に表示され、スマホから見るとスマホ用にと利用者の環境に応じて自動で表示切り替えをしてくれます。
スマホ表示がきちんとされるサイトは利用者が便利なだけでなく、Googleからの評価も上がります。

どんな業種でも違和感なく使え、ビジネス向きの機能が満載!

ライトニングのデザインはとってもシンプル。
写真と配色をかえれば、どんな業種にも違和感なく合います。

またビジネスに必要な機能を十分搭載しているから、初心者にぴったりです。

情報が豊富&書籍が出版されているからわかりやすい!

ライトニングのユーザーは多く情報が豊富
わからないことがあっても、
「ライトニング + 使い方」
などで検索すると、解決方法をブログなどに書いてくれている人も多く解決方法が見つかり安いです。
また初心者向けのライトニングの使い方が書いてある書籍も販売されいるので、書籍を見ながらじっくり作業を進めることができます。

ライトニングのデメリット

ページの一番下にライトニングのコピーライト


ホームページの一番下にライトニングのリンクが入ります。
気になる人は1,480円(税抜)でコピーライトを取る権利を購入できます。1つ購入すれば複数のサイトに使用できます

→ 購入はこちら。

ライトニング をインストールしてみよう

ねえさん
ねえさん
コウちゃん今の状態でサイトにアクセスしてみてよ。
コウちゃん
コウちゃん
植物の画像になっている
ねえさん
ねえさん
これは初期設定「Twenty Seventeen」というテーマです。
テーマを変えることでサイトの見た目がいっぺんに変わるよ。

 

 

ダッシュボードに戻ります。
外観>テーマ>新規追加をクリックします。

「Lightning」と検索ボックスにすると、今回使用するテーマが表示されるのでそれをクリック


「インストール」ボタンを押します。
インストールが完了すると「インストールボタン」が「有効化」になるので、「有効化」ボタンを押します。

 

 

 

新しいテーマLightningがインストールされました。
このテーマは次のプラグインを利用する事を推奨しています : VK All in One Expansion Unit (Free).
この無料のプラグインによって様々な機能を追加する事が出来ます。

と表示されています。
これは、Lightningに絶対必要なプラグインですので「プラグインのインストールを開始」をクリック

補足
もう一つの必須プラグイン「Lightning Advanced Unit」はLightning 6.0 からテーマと統合されたのでインストール不要になりました。

一括操作のところをインストールに設定し適応をクリック

 

 

プラグインがインストールされました。
「必須プラグインのインストール画面に戻る」をクリックします。

 

有効化をクリックします。

 

ライトニングの設定方法&使い方

ライトニングの設定方法は公式ホームページに詳しく書いてあります。

https://lightning.nagoya/ja/setting

ねえさん
ねえさん
また、ライトニングに関する書籍も出ています。
おすすめはこちらの2冊です。
コウちゃん
コウちゃん
本を見ながら作業できると助かるー!

2冊とも「さくらレンタルサーバー」をおすすめしていますが、
私はロリポップの方が初心者でも扱いやすいと思っているので、
ロリポップ&ムームードメインをおすすめしています。
本と同じように作業したい方はさくらレンタルサーバーでどうぞ

 

ライトニング以外のおすすめのテーマ

ライトニングは無料で使えるおすすめのテーマなのですが、
「有料でもいいので、もっとカッコいいテーマがいい!」
という方におすすめなのが「TCD」シリーズです。

一度ホームページをご覧ください。

とっても美しいデザインで見とれてしまうはず!

テンプレートも豊富に取り揃っているので、あなたのお店にぴったりのものが見つかると思います。

TCDホームページ:https://design-plus1.com/tcd-w/

LESSON4に続く