4.【SSL化】初めてのWordPress 導入編

早速記事を書きたいかもしれませんが、その前に初期設定が必要です。今回はその中のSSL化というhttpsへの変更について説明をしていきたいと思います。

迷子にならないように!

お名前.comではドメインだけの販売やワードプレス以外のプランの販売もある為、間違いのないよう、また、スムーズに目的の申し込みができるよう上記のリンクから進むことをおすすめします。

 

連動した動画はこちらから

SSLについて

作業自体はあっという間に終わってしまいますが、簡単にでもSSL化について最低限は知っておくと、今後役に立つと思いますので説明していきます。

SSL化とは

「SSL化」なんていきなり言われてもわからない人も多いと思います。

でもそんなに構えないでください。

「http」「https」何て言うと、聞いたことがある人も多いんじゃないでしょうか。

お名前.comSSL化1

現在、あなたのWEBサイトはどちらから始まるURLですか?

恐らく、動画や記事を見てWordPressを始めた方は、httpから始まるURLですよね?

SSL化とは、簡単に言うと、このhttpをhttpsに変更することを言います。

お名前.comSSL化2
4.【SSL化】初めてのWordPress 導入編

自分のサイトはhttpのままでいいの?

4.【SSL化】初めてのWordPress 導入編

httpsにしないといけないの?

4.【SSL化】初めてのWordPress 導入編

お金はかかるの?難しくないの?

なんて様々なことを考えるかもしれませんね。

まず、結論から言うと、今の時代ではSSL化は必須で、お金もかからず、簡単に設置できます

お名前.comSSL化3

作業自体も細かい説明などを抜きにしたら5分程度で完了します。

早速作業をしてほしいところですが、その前にまず、httpsに変更するということが何なのかを簡単に知っておきましょう。

なぜhttpsにするの?

文字としてはhttpに「s」が付いただけに見えますが、これがあると、セキュリティを強化しているということになります。

お名前.comSSL化4

httpのままではレンタルサーバーとブラウザ間の通信時にデータが暗号化されませんが、httpsの場合は、通信が暗号化されます。

お名前.comSSL化5

そのため、第三者に通信を覗かれたり、勝手に変更されることを防ぐことができます。

お名前.comSSL化6

httpsにしないとどうなるの?

httpsに変更しないと、データは暗号化されないままなので、セキュリティ上問題があるということは分かったと思いますが、他にもhttpsにすべき理由があります。

お名前.comSSL化7

少し前までは、SSL化するには高額な費用がかかりましたが、現在はどこのサーバーでも無料のものを利用できるようになりました。

お名前.comSSL化8

そこから、多くのWEBサイトがSSLを利用するようになり、セキュリティの強化を行っています。

そして最近になって世の中のほとんどの検索シェアを占めるGoogleが、SSLになっていないサイトを「安全ではないサイト」と表示するようになりました。

お名前.comSSL化9

現在の検索シェア

お名前.comSSL化10

現在ではMicrosoft Edge(マイクロソフトエッジ)やGoogleChrome(グーグルクローム)、FireFox(ファイヤーフォックス)、Opera(オペラ)などのあらゆるブラウザで、安全かどうかの表示が出るようになっています。

お名前.comSSL化11

具体的には次のような表示となります。

お名前.comSSL化12

こんな感じで、httpのままだといかにも安全ではないサイトを表示しているかのように見えてしまいますよね。

逆にhttpsの場合は安全なサイトということが一目でわかります。

お名前.comSSL化13

と、いうことでSSL化は絶対にやっておいた方がいいですよね。

SSL化する際の注意点

SSL化するにあたっての最大の注意点はhttpからhttpsに変わることで、1文字増えてWEBサイトのURLが変更されてしまうということです。

お名前.comSSL化14

WordPressの記事などにご自身のWEBサイトのURLを貼っていることもありますよね。

「この内容は別の記事でご紹介しているのでこちらからご覧ください」なんて言って、別の記事のURLを貼ったりする場合です。

お名前.comSSL化15

これを内部リンクと呼びます。

これは自分のWordPress内部だけの話なのでこの後説明する検索と置換のツールを使えばあっという間にすべての記事に「s」の1文字を追加してやることができます。

では、別の第三者があなたのWEBサイトのURLを貼り付けて紹介してくれている場合はどうでしょう。

お名前.comSSL化16

これは「https~」に変わりましたよ~と伝えて、変更を依頼するしかありません。

お名前.comSSL化17

他にも、YouTubeやTwitterなどの外部のツールでURLを貼り付けた場合はどうでしょうか?

お名前.comSSL化18

これもWordPress内部の話ではないので、手作業で直していくしかありません。

要するに、SSL化をするのは早ければ早いほど良いというわけです。

私が指導をする場合はWordPressをインストールした直後に設定してもらっています。

それでは、実際にSSL化をしていきましょう。

SSL化の導入

ここからは、レンタルサーバーごとに操作が変わります。

今回はレンタルサーバーの契約段階から説明させていただいているお名前.comでのSSL化を説明していきます。

お名前.comSSL化19

ステップ1 レンタルサーバーでの操作

まずは、インターネットを起動します。

お名前.comSSL化20

次に、お名前.com NAVIに移動しましょう。

これまでの動画でおなじみのブックマークバーから進んでいきたいと思います。

お名前.comSSL化20

お名前.com NAVIのログインページに移動したら、「お名前ID」「パスワード」を入力してログインします。

お名前.comSSL化21

ドメインの契約更新ページが表示されても気にせず先に進みます。

画面上部のメニュー一覧から「レンタルサーバー」をクリックしましょう。

お名前.comSSL化22

メッセージが表示されたら、「更新画面から移動する」をクリックします。

お名前.comSSL化23

レンタルサーバーのページに移動したら、ご利用中のプランのコントロールパネル項目にある「ログイン」をクリックしてください。

お名前.comSSL化24

すると、レンタルサーバーのコントロールパネルに移動します。

コントロールパネルのログインページからスタートしても構いません。

次に、画面左側に並んだメニュー項目から、「セキュリティ」をクリックします。

お名前.comSSL化25

セキュリティのページが表示されたら、「SSL証明書」をクリックしてください。

お名前.comSSL化26

ここでは、SSL化したいドメインが正しく選択されているか確認しましょう。

ドメインが正しく選択されていたら「申し込む」をクリックします。

お名前.comSSL化27

「SSL証明書を選択してください」というページが表示されるので希望するSSLを選択します。

有料のSSLも存在していますが、今回は無料のSSLを利用しますので、一番左の「無料SSL」というものにチェックを入れて画面右下の「確認する」というボタンをクリックしましょう。

お名前.comSSL化28

すると、確認画面が表示されるので、内容に間違いがなければ画面右下の「完了する」ボタンをクリックします。

お名前.comSSL化29

画面上に「SSL証明書のお申込みが完了しました」と表示されたらレンタルサーバー側での設定はこれで終わりです。

お名前.comSSL化30

お名前.comのページは閉じてしまっても構いませんが、念のため「一覧に戻る」ボタンをクリックして前の画面に戻ると、設定したドメインのステータスが無料SSL設定中となっています。

お名前.comSSL化31
お名前.comSSL化32

さらに、この設定を行うと登録しているメールアドレス宛にも変更を行った旨のメールが届きます。

お名前.comSSL化33

ステップ2 WordPressでの操作

URL変更の設定

レンタルサーバーでの操作が終わったら今度はWordPressでの操作を行っていきます。

事前にご自身のWordPress管理画面をブックマークなどしている方はそちらから進めてください。

お名前.comSSL化34

私の方では、この画面からWordPress管理画面に進む方法で説明していきます。

まずは、画面左側のメニュー一覧から「ホーム」をクリックします。

お名前.comSSL化35

次におすすめメニューから「WordPress」をクリックしてください。

お名前.comSSL化36

表示されたページのWordPress一覧から管理画面項目にある「ログイン」をクリックします。

お名前.comSSL化37

すると、WordPress管理画面のログインページが表示されます。

せっかくなので、まだの方はこのページをブックマークしておきましょう。

お名前.comSSL化38

画面上部の☆マークでブックマークが可能です。

ブックマークの保存先となるフォルダは「ブックマークバー」のまま「完了」をクリックします。

お名前.comSSL化39

すると、画面上部のブックマークバーにこのページが追加されます。

それでは、WordPressの管理画面にログインしていきます。

ユーザー名かメールアドレスと、パスワードを入力して「ログイン」ボタンをクリックします。

お名前.comSSL化49

ログインできるとダッシュボード画面が表示されます。

お名前.comSSL化41

次にWordPressの設定画面に移動していきます。

画面左側がWordPressのメニュー一覧になっているので、そこから「設定」というところにマウスを移動します。

お名前.comSSL化42

すると、さらにメニューが表示されるので、「一般」をクリックします。

お名前.comSSL化43

一般設定のページでは、サイトタイトルやキャッチフレーズを変更することができます。

今回は中央にある「WordPressアドレス(URL)」「サイトアドレス(URL)」の2つを変更していきます。

お名前.comSSL化44

どちらも現在のアドレスは「http://」の後にご自身のドメイン名が続いていると思います。

お名前.comSSL化45

この「http」の後に「s」を付け加えてください。

お名前.comSSL化46

私の場合は、「https://solabotschool.com」となります。

2つとも「s」を付け加えたら、画面を下にスクロールして「変更を保存」ボタンをクリックします。

お名前.comSSL化47

これで、設定が変更されます。

最初の作業でお名前.com側の設定を行いましたが、この手続きは完了するまでに多少時間がかかります。

完全にSSL設定が変更されるとお名前.comから完了通知となるメールが届きます。

お名前.comSSL化48

そのメールが一つの指標となっていますが、それを受け取る前にWordPressで「s」を付ける作業をすると、このように「接続が保護されていません」というページやエラーページが表示されてしまいます。

しかし、もう少し待って、メールが届いてからアクセスすると正しく表示されるのでご安心下さい。

念のためSSL化されたかを、ご自身のWEBサイトを表示して確認してみましょう。

WEBサイトを表示するにはWordPress管理画面の左上にあるご自身のサイト名をクリックします。

お名前.comSSL化49

私の場合はこの管理画面のタブも残したいので「Ctrl」キーを押しながらクリックします。

すると、新しいタブで自分のサイトが表示されます。

お名前.comSSL化50

アドレスバーにURLが表示されるので見てみましょう。

鍵のマークが表示されてSSL化に成功したことがわかります。

ちなみにGoogle chromeをお使いの方は、「https://」部分が隠れているので、詳細を見たい場合は、URL部分をゆっくり2回クリックします。

すると、しっかりとhttpsに変更されていることがわかります。

お名前.comSSL化51

ここから先は必須ではありませんが、必要があれば行ってください。

WordPressをインストールしてすぐ記事などを書いてしまった方などが対象です。

すでに運営中のサイトをSSL化する場合

サイト内の記事にある文字を一括変更

冒頭でも説明したように、SSL化してサイトURLをhttpsに変更する前に記事を作成して、そこにhttpのURLなどを貼り付けている場合は、「s」を付け加えてあげないと、リンクとして正しく誘導することができなくなってしまいます。

お名前.comSSL化52

記事が少なく、手直しで簡単に修正できるのであれば、自分で「s」を入力していけばいいだけですが、たくさんある場合や、どこにあるかわからない場合などは、検索と置換のツールを使うと便利です。

WordPressには「プラグイン」という機能を追加する仕組みがあります。

プラグインは、本来は複雑なプログラムを組まないとできないようなこともプラグインを追加するだけでできるようになってしまう便利な仕組みです。

お名前.comSSL化53

お問い合わせ機能を増やしたり、サイトにスライドショーを追加したりなど、数え切れないほど種類は様々です。

お名前.comSSL化54

SSL化をする前にたくさんの記事を作成してしまい、その中にたくさんhttpの表記があるという場合は「Search Regex」というプラグインを利用して一気に文字を置き換えましょう。

お名前.comSSL化55

今回は記事も作成していないような場合の方に向けて説明しているので、このプラグインの説明は別の記事や動画を参考にしてみてください。

リダイレクト設定

WordPressをインストールしたばかりの方は不要ですが、ある程度サイトにアクセスがある方などはリダイレクト設定というものも考えておく必要があります。

仮に誰かがhttpのままのURLをブックマークしていたり、何かにメモをしていたりすると、「s」がない状態のURLでアクセスしてしまうかもしれません。

お名前.comSSL化56

しかし、現在はすでに「s」が加わった状態なので正しくアクセスできなくなっています。

お名前.comSSL化57

そういったことも考慮して、httpのURLにアクセスした方を強制的に「s」付きのページに誘導することができます。

お名前.comSSL化58

その誘導こそがリダイレクトであり、引っ越した時の郵便物が転送されるのと同じ話です。

これも本来はプログラムで導入すべきですが、初心者の方には難しいのでリダイレクトをサポートしてくれるプラグインを利用しましょう。

リダイレクト処理をするためのプラグインは「Really Simple SSL」がおすすめです。

お名前.comSSL化59

注意点は、プラグインを利用し続けなければ有効ではないという点です。

コンセントを挿したままにしなければ冷やされない冷蔵庫と一緒で、プラグインを設定したままにしておかなければリダイレクトされないということです。

プラグインを利用せずにできる方は利用せずにリダイレクト設定を行いましょう。

こちらも具体的な導入方法は別の記事や動画を参考にしてください。

外部のツールで対処が必要な場合

SSL化を行う際にもう一つ気を付けなければならないのが、WEBサイトだけでなくYouTubeやTwitter、Instagramなどの外部のツールにURLを記載している場合です。

お名前.comSSL化60

これもWordPress内の話ではないので、検索と置換のツールを使っても直せないですよね。

それぞれのプロフィール欄や概要欄などにhttpのまま貼り付けてしまっているものなどがあれば、手作業で直しておく必要があります。

お名前.comSSL化61

先ほどのリダイレクトの処理でhttpsの正しいサイトへ誘導することは可能ですが、httpのままだとセキュリティ上の観点からクリックするのを止めてしまう人もいるかもしれせんし、何となく格好も悪いです。

お名前.comSSL化62

早い段階で修正しておきましょう。

お疲れ様でした。

これで、今回のSSL化の作業は完了です。

とにかく早い段階で設定しておけば、文字の置き換え作業やリダイレクトの処理も不要であっという間にSSL化することができます。

WordPressをインストールしたら真っ先にやってしまいましょう。

お名前.comSSL化63

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA