エックスサーバー

エックスサーバーでSSL化設定をするやり方を詳細に解説してみた

Sponsored Link

Sponsored Link

SSL化は時代の趨勢。

というのもSSL化されたサイトであれば様々な重要な情報を入力して送信するときには
データを暗号化してから送信してくれるからです。

その事によって第三者によるデータの盗み見・なりすまし・改ざんなどを防ぎます。

自分の入力したクレジットカード番号とかメールアドレス、個人情報が盗まれる事態が頻発している事でもあり。
その防止は急務です。
それが銀行など金融系のサイトやショッピングサイトをはじめ、大手の会社がこぞってWebサイトのSSL化をおこなっている理由です。

なお「SSL(Secure Sockets Layer)」は「TLS(Transport Layer Security)」と名称変更されていますが、SSLの方が名称として一般的に広く定着しています。

とはいえ既存のサイトをSSL化するのはかなり難しそうです。
また良いことばかりではなくてデメリットもあります。

そこでまずSSL化することのメリットとデメリットを見ていきたいと思います。

 

SSL化するデメリット

導入に費用がかかります。

SSL化にもいくつか種類があり、費用が異なります。

エックスサーバーなど最も下位の独自SSLが無料のところもありますが。
証明書費用、設定代行費用、転送設定やパスの修正などの改修費用、などが必要になる場合があります。

HTTPSに非対応のツールや広告が非表示になります(広告収入が減る)

GoogleやYouTube、Facebook、WikipediaなどがSSL化に対応済の反面
ニコニコ動画、Amazonアフィリエイト、A8など結構メジャーなところでHTTPS非対応なものがかなりあります。

SSL化した場合、SSL非対応のツールや広告がそのサイトでは非表示になってしまいますから
アフィリエイト収入がある場合、かなりの打撃となってしまいます。

ただ近い将来にSSL対応すると思いますのでアフィリエイト収入があるサイトはそれまで見合わせておいたほうが良いでしょう。

ソーシャル系ボタンのカウントがリセットされます

cebookの「いいね」カウントやTwitterのカウント、サイトへの訪問者カウンターなどがリセットされます。

なので過去記事の反響などをアピールしたい場合にはSSL化早めといたほうが良さそうです。

Google Search Console・Googleアナリティクスに再登録が必要です。

Search Console・Googleアナリティクスの仕様ではHTTPとHTTPSは別のサイトとして登録しなくてはなりません。。
アクセス解析を行っている場合は再度登録をし直す必要があります。

使っているサーバが、常時SSL化に対応しづらい場合があります

特定のディレクトリ以下にファイルを置かないとHTTPSにならないとかhtaccessが使えない、など問題が起きる場合があります。

アクセス数が減る可能性がある

ブログをSSL化した場合、一時的にアクセス数が減少する事があります。

設定が面倒くさい

慣れてないとかなり大変です。

ということなんで。

以上のことを考えると企業サイトやECサイトなどは別としてアフィリエイト目的のサイトやブログはデメリットが大きいです。

ただ今後常時SSL化は進んでいき

SLサーバ証明書国内最大手のシマンテック等によると
将来的にはインターネット通信全てがHTTPSで暗号化される時代が来る、とのこと。

結局は避けては通れないわけなんで。
私は挑戦してみることにしました^^;

SSL化するメリット

もちろんメリットもたくさんあります。
参考にした殆どの記事はメリットについて書いてありました。

サイトのセキュリティ強化

先程も書きましたが。
改ざんやなりすましの防止、盗聴防止、マルウェア対策、Free Wi-Fiからの接続の安全性確保など
セキュリティが強化されます。

サイトの信頼性をアピールできる

SSL化されると

鍵マークの表示、EV SSLだと緑のバーも表示されます。安全性が一目でわかってユーザーに安心感を与えることが出来ます。
ただ一般のユーザーがEV SSLにする必要はないと思いますが・・・・・

緑のアドレスバーで安全なウェブサイトを構築 EV(Extended Validation)は、証明書に記載される組織が、法的かつ物理的に実在し、またその組織が証明書に記載されるドメインの所有者であることを認証します。 EV SSLは世界標準の認証ガイドラインがあり、SSLサーバ証明書の中で最も厳格な審査が行われます。

EV SSL|GMOグローバルサイン【公式】)

HTTP/2対応ブラウザで表示が早くなる

HTTP/2対応ブラウザのブラウザでのインターネットを利用した時、表示速度が速くなります。
GoogleChrome・FireFox・Safari・Internetexplorerなど主なブラウザの最新バージョンはHTTP/2に対応済です。

SEOにほんの少しだけ有利になる

Google検索順位決定要因の一つになるそうです。
ただし影響を受ける検索結果は全体の1%未満とのことですので今の所そこまでの効果は見込めませんが。
今後どんどんSSLサイトを有利にしていく意向をGoogleが自ら表明していますので。
そのうちSSL化していないと検索順位が下がるという事態もありえます。

常時SSL化を検討事項の1つに入れざるを得ない状況です。

 

エックスサーバーでWordPressブログのSSL化を行う手順を詳細に解説

それでは実際にこのサイトをSSL化していきたいと思います。
私が使っているサーバーはエックスサーバーをですが。
独自SSLが無料で利用出来ます。(登録料などは別途)

お勧め。

さてSSL化作業を行う前にバックアップを取る必要があります。
特にワードプレスなどのCMSを使用している場合、エラーが発生しやすいので必須です。

エックスサーバーのバックアップ方法はこちら。

簡単なワードプレスのバックアップ方法 エックサーバーでの詳細説明

エックスサーバーで行うSSL化設定

サーバパネルにログイン出来たら、「ドメイン」の項目の中にある「SSL設定」をクリックします。

現在自分の所持しているドメイン一覧が出てきますので、SSL化させたいドメインの「選択する」をクリックします。

次の画面で確認をしたら「独自SSL設定を追加する(確定)」をクリック。
次のような画面が出てきます。

 

 

独自SSLの新規取得が完了し。

SSL設定の一覧」ボタンを押すと。以下のような画面が出ています。

表示されたURLをクリックすると自分のサイトが表示され、
しばらく時間が経った後に改めてURLをクリックすると、
正常に自分のブログのトップページが表示されますが、URLの部分が以下の画像の様になっています。

この段階では独自SSLの新規取得が完了しましたが、まだ設定が完了していません。
そのためこのような表示になっているのです。

 

 

WordPressの設定の変更

一般設定の変更

ワードプレスのダッシュボード画面左から

設定→一般をクリックします。

 

次の画面の「WordPressアドレス(URL)」と「サイトアドレス」という項目にあるURLを、手入力でSを付け加え「https」にします。

両方とも「https」に変更したら、「一般設定」画面を一番したまでスクロールし「変更を保存」ボタンをクリック。

すると管理画面だけは鍵マークが付きます。

 

 

この状態で記事を見ると画像が消えていることがわかります。

また公開しているブログのURLには鍵が付きません。

更に作業をしていきます。

画像リンクを「https」にする

この鍵マークがすべての記事に表示されるためには画像リンクやリンクがhttsになる必要があります。

今まで貼り付けた画像ですが。

ダッシュボードのメディア→メディアをクリックすると保存された様々な画像が出てきますが。
すべての画像にはリンクがついていてSSL化する前はhttpで登録されています。
画像をクリックすると「添付ファイルの詳細」が右端に以下のように表示されます。

枠で囲んだ部分がこの画像のURLです。

この全ての画像のURLがhttpsになっていなくてはなりません。

 

ただ最近はSSL化手続きをすると画像のURLもhttpsで表示されている場合も多く。
このサイトでは一般設定が終了したら画像の殆どがhttpsのリンクに切り替わっていました。

それでも鍵マークがつかない場合にはどこかに変換されていないURLがあると考えられます。

かなりの記事数があるサイトのすべてのURLを変える場合には手作業で行うのは大変ですので。
一括して全ての添付画像URLを変更してくれるプラグインを導入します。

画像のURLを一括変更してくれるプラグイン「Search Regex」

ダッシュボード左側にあるメニューバーから「プラグイン」→「新規追加」をクリックします。

出てきた画面右端のプラグイン検索の枠にSearch Regexと入れて検索します。

出てきたプラグインSearch Regexの「今すぐインストール」ボタンをクリック。

 

するとボタンが「有効化」という表示になるので。
更にクリックすると「有効」になります。

これでインストールが完了。

次にダッシュボードにあるツールをクリックし。
出てきたメニューの中からSearch Regexをクリック。

すると以下のような画面が出てきますので。

 

「Search pattern」のボックスに変更前(http)のURL

「Replace pattern」のボックスに変更後(https)のURLをそれぞれ入力した後

「Replace 」をクリックします。

すると以下のような画面が出てきますので

Resultsをチェックしすべて切り替わっていることを確認したら。
「Replace&Save」ボタンをクリック。

すると以下のような画面が出てきますので一番上に画面上に

「(数字)occurrences replaced」と表示されていれば変換がすべて完了したことになります。

ウィジェットエリアやヘッダーにある画像URLのURLを変更する

すでにメディアにある画像の変換は終わっていますし。
サイドバーやヘッダー・フッターにある画像は少ないので。

貼り直すことをおすすめします。
これが一番簡単です。

私がこのサイトに使っている「賢威」というテンプレートではダッシュボードに「賢威の設定」というところがありますので。
そこで5つの部分のチェックし、画像があればそれを張り替えます。

①賢威の設定

画像を差し替えてURLがhhtpsになっているかを確認。

②トップページ

画像がある場合差し替え。

③一覧ページは画像がないのでパス

④SNSの設定

ここには変更を要する画像が4つありますので要注意。

 

⑤ヘッダー

ここに画像がある場合画像を差し替えます。

 

 

なおサイドバーやヘッダーの仕様は各テンプレートによって違いますので。
(テンプレート名) ヘッダー ウィジット 編集 などのキーワードで検索してみてください。

 

ここまでやれば大概は大丈夫だと思いますが。

もしここまでやっても鍵マークが出てこない場合。
まずはブラウザを一旦閉じてサイド起動をしてみます。をしてみます。

それでもだめな場合はまだどこかにhttpのリンクが残っていることになります^^;

最後の手段 fire foxでチェック

fire foxというブラウザをダウンロードしていない場合はまず公式ホームからインストールします。

つぎにfire foxwを立ち上げ目的のサイトを表示させます。

するとURL外貨のようになっていると思います。

鍵不良マークをクリック。

すると以下の画面が表示されます。

そのメディアアイコンをクリック

すると以下のようになります。

 

問題がありそうなURLが表示されますので一つ一つチェック。

httpのままであるURLを探し。

サイトに戻ってそのURLのある画像などのURLをhttpからhttpsに変更します。

これでほぼ完了です。

アフィリエイトリンクをチェック

それでもだめな場合はおそらくはアフィリエイトリンクなどのSLL化に対応していないもののせいです。

現在はほとんどのサイトASPが[https]に対応していますが
もしアフィリエイトで対応していないリンクが必要であればSLL化を諦めるしかありません。

まとめ

以上でSLL化化に関しては解説をし終えましたが。
結構時間がかかりますねえ^^;

しかしやることは多いにせよ手順通りきっちりと作業をしていきさえすれば
最後までやりきることが出来ますので。
問題は起きないと思います。

とはいえ
実際にはSLL化したあと様々変更をしなくてはならないことがあります。

これで終わりではありません^^;

分け入っても

分け入っても

青い山(山頭火

長くなったのでそれについては別記事で。

 

追記12/13/2018

ログインしているときには鍵マークがついているんですが。
ログインしないとこのサイトに鍵マークが付きません。

うーーーーーーーーーーーむ

なんで?

修正したら追加します。

Sponsored Link

Sponsored Link

関連記事

  1. WordPress新エディタ「Gutenberg」の使い方
  2. WordPressのフォルダ構成とバックアップの仕方
  3. 【Basics of site construction】カテゴ…
  4. 【Basics of site construction】ドメイ…
  5. サーバって何?どのレンタルサーバーを選べばよいのか?
  6. 【Basics of site construction】多すぎ…
  7. 簡単なワードプレスのバックアップ方法 エックサーバーでの詳細説明…
  8. WordPressエディタ「Gutenberg」で用意されている…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

サイト構築関連

  1. Windows10 でフォルダの拡張子を表示するには?
  2. 【Basics of site construction】ドメインの選び方と名前の選定 サブディレクトリとサブドメインの役割について
  3. 独自ドメインのメールアドレスとメールソフトの設定について!Windows10やGmailでで簡単に送受信する方法や
  4. HTMLで動画や画像を埋め込みする方法を詳説
  5. サーバって何?どのレンタルサーバーを選べばよいのか?
  6. 【Basics of site construction】多すぎる選択肢 ホームページ作成方法  HTMLとCMSの長所と短所を知るべし
  7. エックスサーバーでSSL化設定をするやり方を詳細に解説してみた
  8. WordPress新エディタ「Gutenberg」の使い方

プログラミング関連

Sponsored Link

おすすめ記事

知っておくと便利なセレクタまとめ

セレクタについてはその基本を以下の記事にまとめてありますが。https://maliaj…

WordPressエディタ「Gutenberg」の使い方 総まとめ

WordPressエディタ「Gutenberg」の使い方についていくつか記事を書いてみました。その過…

WordPressエディタ「Gutenberg」で用意されている各ブロックの解説 

前記事で新エディタ「Gutenberg」を使って記事を書くために必要な最低限のものについて解説しま…

WordPress新エディタ「Gutenberg」の使い方

使い勝手がかなり違うように見える新エディタだが使い方はシンプル。新エディタはブロックを…

aタグの活用 記事の途中にジャンプさせたりCSSでリンクボタンを作る

HTMLのリンク<aタグ>の書き方外部リンクタグの基本HTMLはハイパーテキストですので他の…

HTML ul ol liタグで作る箇条書きリスト 使い方の基本

箇条書きリスト作成の基本の基本箇条書きを作るタグにはul・li、 ol・liの組み合わせがあって…

HTML CSS テーブル(表)の作り方とその装飾の仕方 基本

表(table)の作り方表を作るには。テーブルタグを使います。<TABLE&g…

HTMLとCSS 初歩的な文字装飾 基本まとめ

文字装飾の基本をまとめておきます。難しくありませんので、一つ一つ確実に押さえておきたいです。…

自己紹介

自己紹介

酒場マリアジョイ

酒場マリアジョイ

ウエブマーケティング入門酒場 
マリアジョイ
疲れたら一休み(^_-)-☆

AviUtl

AviUtl

AviUtlの初期設定・使い方の実際
・エンコードなどについて
書いた記事をまとめてあります。

Sponsored Link

普段使い画像編集ソフト

普段使い画像編集ソフト

普段遣い画像編集ソフト
軽快にちゃっちゃか編集できるすぐれものです。

人気の投稿とページ

MPC-BE 優れた動画再生ソフトの設定と使い方基本的なことの詳細
コーデックとしてUt Video Codec Suiteの特徴と設定の仕方
Windows10でブルーライトカットの設定 コントロールパネルの使い方
AviUtlのすべてのエフェクトについての解説⑬アニメーション効果(3)
HTMLで動画や画像を埋め込みする方法を詳説
AviUtl合成モードの種類とその効果 使い方
AviUtlのすべてのエフェクトについての解説⑪アニメーション効果(1)
AviUtlでGIF形式で動画を保存することができる出力プラグイン Direct GIF Export 2
AviUtlのすべてのエフェクトについての解説⑫アニメーション効果(2)
AviUtlのすべてのエフェクトについての解説③クリッピング・斜めクリッピング・マスク

ソフト・アプリの使い方

PAGE TOP