現在このウェブサイトはロリポップサーバーを使用してWordpressで作成し「SSL化」済みなので安心してご利用下さい。
本日は、かねてよりの悩みの種だった「SSL化」を簡単、無料でチャッチャッと済ませたいと思いますので宜しくお願いします。
例によって、話が右に左に斜め下に行っちゃいそうなので
「チャッチャッと言わんか(`皿´)ノ~」
とお急ぎの方は、「SSL化」のポイント3つ。までLet’s la go(*・ω・)ノ♪
Contents
「SSL化」する必要あるの?
そもそも「SSL化」とは、インターネットサイトを暗号化する技術の事ですが「Secure Sockets Layer」の略ですね☝
2年程前からGoogleが「ウェブサイトのSSL化を」推奨していたのは知ってましたが、個人的には・・
なんて思ってました。
だって当時のSSL化って、年間数十万の費用に、電話審査があったりと面倒くさそうなイメージしかなかったんだもんヾ(;´▽`)(特に法人だと)
後にそこまでセキュリティレベルを上げなければ、そこまで費用も面倒もかからないと分かりましたが・・
っと、ゴマもドン引きする程の意味不明な頑固ちゃんでした。
ところが最近そんな頑固ちゃんを一変させる出来事が・・・
そう・・・
Google様がついに本気をみせてきました!!
いつの間にか、僕のウェブサイトが「危険なサイト」の仲間入りに😱💦
赤文字での警告に最近変わりました😱
虚しい叫びだけがこだまします。
やはり「SSL化」しなければいけないのでしょうか?
こんな時「進化論」でお馴染みのダーウィン様の言葉が思い出されます。
最も賢い者が生き残る訳でもない
唯一生き残るのは変化できる者である
心に染みわたります・・
そう、どれだけ年を重ねても柔軟な心持ちと、変化する事を恐れていてはいけません。
受け入れる事が大切なのです。
男も女も見てくれの若さなんてものは実は大して重要じゃなく、気持ちの柔軟さ、しなやかさが最も・・
では次にSSL化(https://)にするメリット、デメリットを考えてみます(・ω・)b
「SSL化(https://)」のメリット・デメリット
最大のメリットと言えば、セキュリティレベルが上がるのでウェブサイトの安全性が高まるという事です。
僕のこのサイトでは住所や氏名、クレジットカード情報を記入するなんて事がそもそもないので無関係の様に思えるんですが、サイトの改ざんやなりすましなどもそう簡単にはできなくなります。
「SSL化」は視覚的に安心できる!
使用してるブラウザにもよりますが、僕はGoogle chromeがメイン(たまにFirefox)なので、検索結果の横に緑ボッチ(安全性の高いサイト)とそうでないサイトとの差別化をされる様になりました。
chromeを使ってWPの管理画面に行っただけで毎回・・
「安全な通信ではありません!」
ほぼ99.9%は安全だとは思いますが、自分の管理画面に行くだけでこんなネガティブワードを見せられるのは精神衛生上あまり良くはないですよね☝💦
何よりも訪問者の方にも安心して閲覧してもらえるという事ですね。
「SSL化」はSEO対策になる
SEOとは検索エンジンを最適化する意味ですね。(Search Engine Optimization)の略です。
簡単に言うとSSL化(https://)しているウェブサイトは検索結果を上位にする可能性がある(SEO)とGoogleは言っているのです。
当初GoogleはSSL化(https://)はSEOには適応しないと言っていた記憶がありましたが、いつの頃からの適応となったそうです。
個人的には全く興味がないですが、SEOに命賭けてる人もいるぐらいですから、まぁメリットとしましょう☝
逆にデメリットを必死で考えてみましたが全く思いつかなったです(ノ)・ω・(ヾ)
以前のようにお金もかからないし、簡単だしこれはメリットこそあれデメリットはなしでスグにでも導入が急がれます!
乗せられやすい自分を可愛く思いつつ早速取りかかります。
結果、「SSL化」は超簡単でした!
実は気合いを入れて半日ぐらいは覚悟してましたが、な、な、なんと30分弱でオールコンプリートです!
ポイントは3つだけです🤟!
「SSL化」のポイント3つ!
-
- サーバー側の設定(5分)
- 301リダイレクトの設定(5分)
- WP内設定と「https://化」(20分)
- サーバー側の設定(5分)
この工程だけで大まかな「SSL化」は完了できます。
もしつまずいたらその時に対処すれば良いんじゃないかと!
では早速いってみましょう👊♪
1.サーバーの設定
今回はロリポップサーバーでの設定になります。
- ロリポップにログインし、左サイドバーの「セキュリティ」を選択
- .いくつかサイトを持ってる場合は「SSL化」したいサイトをチェック☑️を入れ【独自SSL(無料)を設定する】を選択
とりあえずサーバー側の設定は終了です。
反映されるまで数時間かかる事があるので、しばらくしたら「https://」で自分のウェブサイトにアクセスして表示されていれば完了です。
では次にサーバーにログインした状態のまま、リダイレクトの設定に移りたいと思います。
2.301リダイレクトの設定
今回「SSL化(https)」によりウェブサイト自体のURLが変わってしまうので、以前から見てくれているユーザーの再来、「検索エンジン」を新しいURLに導く為に「301リダイレクト」を使います。
イメージ的には、引っ越しをしたので郵便物を転送してもらえる様、郵便局に申請するみたいな事です。
google様も推奨してるのでおとなしく従いましょう☝
前提条件としてサーバーの「.htaccess」ファイルにアクセスできる必要があります。(大体のサーバーで可能)
まず自分の契約しているサーバーにログイン後、FTP設定から今回「SSL化」するサイトにログインします。
どこのサーバーでも似たようなものですが、左サイドバーからFTPへ。
WPの自分のサイトにアクセスすると、大体上の方の階層に「.htaccess」ファイルがあるので選択します。
301リダイレクトコードは正しい位置にコピーしよう
下記のコードをコピペします。
「.htaccess」ファイル内の「#BEGIN Wordpless」の上にコピペします。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
</IfModule>
これだけです。
文字に起こすと大そうな感じですが、時間的には5分もあれば余裕で終わると思います。
ひとまずお疲れさまでした🙇
では最後にWord press内の作業に移ります。
この作業は、事と次第によっては1日がかりの作業になってしまうので慎重に心してかかりましょう(・ω・)b
3.WP内設定と「https://化」
さて、この時点でウェブサイトの「SSL化」は済んではいます。
しかし、この時点ではサーバー上に「http://」と「https://」のサイトが混在してる事になり、これから「https://」に統一するという作業をします。
っと言っても、やる事は「s」の一文字を書き足すだけです☝
まずWord plessの管理画面の左サイドバーの「設定」→「一般」を選択します。
「wordpressアドレス」と「サイトアドレス」の「http://」部分に「https://」と一文字ずつ書き足し(もちろん半角)設定を保存します。
以上で「SSL(https://)」は完了です。
です!
ですが!
ここからが少し面倒なポイントになります。
サイトアドレスは「https://」に変更され「SSL化」しましたが、まだ「完全なSSL化」はされていません。
もし新規のサイトであればこれで終わりですが、もう既に完成されたサイトでは記事内部に「http://」が存在しているのです。
例えば添付画像やサイト内リンク、メディアリンク、アフィリンクなど、その全ての「http://」を「https://」に修正し直す必要があるのです!
確かにもし膨大な記事を書いていたら、一つ一つチェックしていくなんて、とんでもない時間がかかりますよね☝
ゴマ?It is not because things are difficult that we do not dare; it is because we do not dare that they are difficult.
「難しいからやろうとしないんじゃない。
やろうとしないから、難しくなるんだ?」
よく分からないけどカッコイイ・・
ん〜〜、こんな時は普段は活動停止状態の頭をフル回転させます。
ん〜、・・
プラグインか!?
「Search Regex」を使ってサイト内URLを一括変換しよう。
「完全なSSL化」とはつまり、サイト内のURLを全て「https://」に変えなければいけないという事です。
僕のこのサイトの場合、調べたら2000個ほどの「http://」が存在してました。
そこで今回は、ある特定の文字を一括変換してくれる便利なプラグインを使う事にしました。
まずWPの管理画面、左サイドバーのプラグインを選択。
検索で「Search Regex」を探して有効化。
再度、管理画面のツールから「Search Regex」の設定画面に移ります。
このプラグインにはいくつか便利な使い方があるんですが、今回はデフォルト設定のままでOKです☝
1.「http://」から始まる自分のサイトアドレス
2.「https://」から始まる自分のサイトアドレス
3.「Replace & Save」で変換
これでサイト内URL(画像URLも)を全て一括変換してくれます。
要は上のURLから下のURL(sのついたURLに)一括返還するとゆう事ですね。
便利な時代です。開発者様には頭が下がります🙏
さてこれで「SSL化」しているハズです。
「SSL化」の確認はFirefoxが便利
「完全なSSL化」を確認するにはブラウザの「Firefox」が視覚的に分かりやすいと思います。
「Firefox」で自分のウェブサイトを表示してみます。
緑色の🔒が表示されていれば「完全なSSL化」に成功したという事です(^-^)v
「edge」や「chrome」でも分かるとは思いますが、アイコンの色で判別できるのは嬉しいところです。
僕は他の2つのウェブサイトも「Firefox」で確認しました。(特に「http://」が混在してる状態だと分かりやすい)
アイコンによってどんな状態になってるのか少し見てみましょう♪
盗聴などがされないページ
黄色いビックリが余計に怪しい印象💧
黄色よりさらに危険な状態
盗聴や攻撃者に対して安全ではない
これで自分のウェブサイト(ページ)がどんな状態なのか一目瞭然ですね。
もし「完全なSSL化」してないページがあったらブラウザのソースからエラーコード(http://)を探していきます。
しかしもし、どうしても「http://」の場所が分からなかったらどうやって探すのか??
「http://」の場所を探すのは「chrome」のディベロッパーツールがオススメ
もし使った事がなければ、ブログ運営だけに留まらず、WEB開発やページの検証など、物凄く高機能なツールなのでこれから知ってて間違いなく損はないので、これを機に使い慣れておくのもいいかもですね☝✨
さて、今回のどうしても「http://」の場所が分からない場合「chrome」で対象のページを表示します。
F12(機種によってはFn+F12)で
ディベロッパーツールが開きます。
全て英語で書かれていますが、エラーコードを探す事ができます。
「Mixed Content」以降のソースから目的の文字列(http://)を簡単に見つける事が出来ましたね。
「SSL化(https://)」のまとめ
今回、数年単位で面倒くさがっていたSSL化も、やってしまえば30分ぐらいで終わる簡単な作業でした。
要はウェブサイト上の「http://」を「https://」に全て変換する事で「完全なSSLサイトになるという事を覚えておきましょう☝
メリットこそあれ、デメリットはなし!
ノリが良くて可愛いヤツです💗
っという事で、簡単SSL化のお話でした。
初めまして。こんばんは。
手順通りに一括でhttps://に変えましたが、緑色の鍵になりません。
ディベロッパーツールでも見つけられないんですけど、どうしたらいいでしょうか?
鍵が黄色のビックリマークがでて、余計怪しい感じなんです。
どうかご教授下さると嬉しいです。
遅くなりました、こんばんは。
ウィジェットは確認しましたか?
例えばサイドバーやフッターの事ですが。
多分そこに画像や動画、テキストなどを設置してると思いますが、URLが存在してないか確認詩てみて下さい。
文章からすると全ページが緑になってなさそうなので、ウィジェットが怪しいと思いますが・・
がんばって下さい!
コメ遅くなりすいませんでした。
ありがとうございます。やはりプロフ画像に問題があったみたいです。助かりました。また宜しくお願いします。