うらなか書房のあやしいグッズあり〼

うらなか書房と申します。AmazonYahooClubTTTrinitySUZURIなどで、ちょっとあやしいTシャツやグッズの販売をしています。このブログでは、おすすめのホラー映画や漫画、本、その他風変わりなもの・場所などの紹介をしています(たまにお役立ち情報や暗い話も書きます)。

たまに毒吐くちゃん

カテゴリー「Web関連」の人気記事TOP3

ブログを常時SSL化しました~その手順と混在コンテンツの直し方など~

time 更新日:  time 公開日:2017/09/28

SSL 安全な接続

2017年10月から、SSL化されていないサイト(アドレスが「https://」でなく「http://」から始まる)をGoogle Chromeで表示すると警告が出るようになるとの情報を知り、このブログをSSL化するべきか否か、しばらく迷っていました。

というのも、下調べをしただけで相当面倒くさそうだったのと、それを知った当時は使用中のサーバー(ロリポップ)でSSLの無料サービスが行われていなかったので、対応を先送りにしていたのでした。

しかし8月末ごろ、ロリポップで無料のSSLサービスが始まっていたことを知り、ついにこのブログをSSL化することに踏み切りました。覚悟はしていたものの、実際やってみた所やはりかなり面倒くさい作業でした……。

どなたかのご参考になるかもしれませんので、以下にこのブログ(WordPressで構築)をSSL化した手順と、混在コンテンツを直す時にハマッた点、その他困ったことなどを書いておこうと思います。

スポンサーリンク

何故SSL化する必要があるのか

上でも少し書きましたが、今まではSSL化されていないサイト(http://~)が一般的で、SSL化されているサイト(https://~)=安全、という感じであったのが、2017年10月から、SSL化されていないサイトは安全ではないWebサイトはSSL化されているのが当たり前)という扱いに変更になるようです(Google様の意向)。

サイトを開いた時に、「このサイトは安全ではありません」や、「このサイトは保護されていません」などと表示されたら、来訪した方の印象はあまり(いやかなり?)よくないですよね……。

また、SSL化されたサイトを検索で優遇する(上位に表示する)という話もありますが、これに関しては効果は本当に微々たるもののようです(「グローバルでクエリの1%未満にしか影響しません」とのこと……詳しくは⇒Googleウェブマスター向け公式ブログ )。

ので、今の所何故SSL化が必要かといえば、訪れた方に「危険なサイト」という印象を与えないため、というのが一番の理由ではないかと思います。
それが気にならなければ、無理にサイトをSSL化する必要はないかもしれません(結構面倒くさい作業なので……)。

では以下でこのブログをSSL化した手順を書いていきます。

バックアップを取る

SSL化する前に、念のため投稿やデータベースのバックアップを取っておいてください。

サーバーの「独自SSL」の設定をする

ロリポップの場合、ユーザー専用ページにログインすると、サイドバーに「独自SSL証明書」という項目があるので、そこをクリックします。

SSL化したいドメインの横にある「独自SSL(無料)を設定する」というボタンを押すと、5分ほどで「https://~」のURLを使用できるようになります。

.htaccessファイルに301リダイレクトのコードを追記

「http://~」にアクセスがあった場合に、「https://~」に自動的に飛ばすという設定(301リダイレクト)をします。
以下のページを参考にさせて頂きました。

WordPressを高速化するための.htaccess設定のベストプラクティス

301リダイレクト以外にもWordPressが高速になるコードが載っていますので、設定していない方はついでに設定するといいかもしれません(私は「webp」は使用していないので、それ以外のコードを使わせて頂きました)。

注意
.htaccessファイルは下手にいじるとブログが表示されなくなる恐れがあるのでお気をつけください(かくいう私もこのファイルのせいで過去に何度か画面を真っ白にしたことがあるので、なるべくならいじりたくないファイル……)。
バックアップを取ってから作業した方がいいです。

WordPressの設定の変更

WordPressの「設定」⇒「一般」に、「WordPressアドレス (URL)」と「サイトアドレス (URL)」という項目があるので、これを「http://~」から「https://~」に変更します。

安全な接続(緑の鍵マーク)を目指す

この時点でもうブログのアドレスは「https://~」に変更されているのですが、完全にSSL化されているかというとそうでないことがほとんどだと思います。

ブラウザのアドレスバーを見ると、恐らく

SSL この接続は安全ではありません

上記のように「この接続は安全ではありません」という状態になっています(混在コンテンツ)。

これを、

SSL 安全な接続

安全な接続」状態にしなければなりません。SSL化はここからが本番です……!

画像や動画、広告などのsrcの中身が「http://~」から始まっていると「混在コンテンツ」の状態になってしまうので、それを解消していきます。

内部リンクを「http」から「https」に書き換える

記事内にある内部リンク(自ブログの他記事へのリンクや画像リンクなど)を、「http://~」から「https://~」に変更します。

画像のアドレスは変更が必須ですが、実はテキストリンクの場合は変更しなくても大丈夫です。しかしついでなので一緒に変更してしまっていいと思います。

手動で書き換えてもいいのですが、記事数が多いと手間がかかるので、一括で変更できるツールを使うのが一般的です。

Download Search Replace DB」というツールを使っている方が多いようなのですが、現在このツールをダウンロードするにはメールの登録が必要です。
で、私はメールの登録をしたのですが、その後どこからダウンロードしていいか分からず……(登録ありがとう、というような返信は来たものの、そこにはダウンロードページらしきものが載っていなかった)。

しばらく待っていたのですがその後別のメールが来ることはなかったので、仕方なく別の方法を探すことに。

WordPress Codexの「Moving WordPress」というページで、「Better Search Replace」というプラグインが紹介されていたので、それを使ってみた所、問題なく変更できました。

使い方は下記ページに載っています。

テーブル単位でテキストを一括置換できるWordPressプラグイン Better Search Replace

置換前 http://uranaka-shobou.com

置換後 https://uranaka-shobou.com

などとします。

私は全部のテーブルを選択したのですが、「wp_posts」(記事の投稿本文)だけでもよさそうです(恐らくその方が安全)。

プラグイン「Search Regex」ではダメなのか

WordPressの語句検索&置換といえば、「Search Regex」というプラグインが有名ですが、このプラグインで「http://~」から「https://~」への変更を行うと不具合が起きることがあるとか(シリアライズ云々……この辺私はあまり詳しくないので、知りたい方は検索してみてください)……。

しかしSSL化の際にこのプラグインを使用している方も結構いるようなんですよね。なのでそこまで心配する問題ではないのかも……?

とはいうものの、やはり何かトラブルがあったら恐ろしいので、私はCodexに載っているプラグインを使用しました。

テーマファイル内やウィジェットを調べる

テーマファイル内に「http://~」を含む画像やアフィリエイトリンクがないかどうか調べます。
Ctrl+Fで「src=”http://」をページ内検索すると見つけやすいかと思います。もしあったら「src=”https://」に変更したり、コード全体をSSLに対応している新しいコードに貼り替えたりします。
テーマファイルをカスタマイズしていない場合は恐らくそのままで大丈夫かと思います。

同じようにウィジェットも調べます。

Feedlyボタンのコードを書き換える

Feedlyボタンを設置している場合、そのままだと混在コンテンツの原因になるので、コードを少し書き換える必要があります。
下記のページを参考にさせて頂きました。

feedlyボタンをSSL対応したのにhttpsサイトにリンクできない時の対応方法

記事の投稿内の修正

混在コンテンツの原因の大半は古いアフィリエイトリンク

このブログの場合、この段階でチラホラと緑の鍵マークのページが現れ始めました。
しかしまだ半分くらいの記事が混在コンテンツのまま……。

以後はそれぞれの記事の投稿内のチェックをしていきます。

混在コンテンツの原因の多くが古いアフィリエイトリンク(「src=”http://」でページ内検索して引っかかるもの)なので、それをSSLに対応している新しいコードに貼り替えます。

主なASPのSSL対応時期
  • A8ネット ⇒ 2016年7月26日~(詳細
  • バリューコマース ⇒ 2016年7月28日~(詳細
  • もしもアフィリエイト ⇒ 2016年11月~(詳細

ちなみに、アフィリエイトリンクはテキストリンクでも、古いものであれば貼り替えが必要です。テキストの後に大抵imgという画像タグがくっついているのですが、このsrcの中身が「http://~」から始まっていると混在コンテンツとして引っかかってしまうのです。

貼り替えが必要かそうでないか判断がつかない場合は、各ASPの新旧のコードを見比べるか(上記の「詳細」ページに書いてあります)、後に出てくる「F12⇒コンソール⇒セキュリティ」で調べてみてください。

アフィリエイトリンクも一括で直そうと思えば直せるはずですが、古いコードだと「nofollow」が入っていなかったり、また商品が在庫切れになっていたり、逆に新しいタイプのものが出ていたりということがあるので、この機会に全て手動で貼り直すことにしました(これがまァ地味だし手間がかかるしでつらい作業でした……)。

スクリーンショット「HeartRails Capture」はSSLに対応していない

それと、このブログではいくつかの記事に「HeartRails Capture」で作成したスクリーンショットを載せていたのですが、これが残念ながらSSLには対応していませんでした。

なので、下記の記事を参考にさせて頂きまして、ショートコードでスクリーンショットを表示する方法に切り替えました。

SSLでも画面スクリーンショット表示

「functions.php」ファイルをいじりたくない……という場合は、「Browser Shots」というプラグインで同じようなことができます。

それらを直してもまだ緑の鍵マークが現れなければ……。

「F12⇒コンソール⇒セキュリティ」で調べる

F12⇒コンソール⇒セキュリティ」を調べると、混在コンテンツの原因になっている画像や動画などが出てきます。

詳しくは SSL化をする時に混在コンテンツ「!」の原因がわからない時に確認する方法

しかし厄介なのが、「F12⇒コンソール⇒セキュリティ」には何も表示されないのに緑の鍵マークにならない場合があることです。

このブログでは、以下の3つが原因でした。

「F12⇒コンソール⇒セキュリティ」で調べても出てこないが混在コンテンツの原因になったもの

ニコニコ動画の埋め込み

ニコニコ動画は今の所SSLに対応していないようです。そのため、記事ではニコニコ動画の埋め込みがブロックされていた(=非表示になっていた)のですが、投稿本文内のタグは残っているという状態でした。

思い当たる投稿があれば「iframe」という語句をページ内検索してみるといいかもです。

記事中広告

SSLに対応していない記事中広告もブロックされていました。

script」などでページ内検索をかけてみるといいかもしれません。

アフィリエイトリンクのコードが一部だけ残っている

アフィリエイトリンクをきちんと貼り替えたつもりが、中途半端に古いコードが残っていたということもありました。

これも改めて「src=”http://」で検索するといいかもです。

混在コンテンツの直し方 まとめ

  1. Ctrl+Fで「src=”http://」をページ内検索して、その「http://」を「https://」に直すか、もしくはコード全体をSSL対応のものに貼り替える(アフィリエイトリンクなどの場合)。
  2. それらを直してもまだ緑の鍵マークにならなければ、「script」や「iframe」でページ内検索をしてみる。そこに含まれている「http://」を「https://」に直したり、SSL対応のコードに変更したりする。
    使用しているASPや動画サービスがSSLに未対応であれば、そのコードは削るしかない。
  3. それでもまだ緑の鍵マークにならなければ、再度「src=”http://」でページ内検索をしてみる(古いアフィリエイトリンクの一部を削除し忘れている可能性がある)。
  4. それでもまだ緑の鍵マークにならなければ、「http://」で調べてみる。直せるものは「https://」に直す(新しいアフィリエイトリンクコードの一部である場合はいじらない方がいい)。

その他にしたこと

  • グーグルサーチコンソールに「https://~」のブログを登録(別ブログの扱いなので新しく登録する)。サイトマップを送信する
  • グーグルアナリティクスの「管理」⇒「プロパティ設定」の「デフォルトの URL」を「http://」から「https://」に直す
  • Push7のブログのURL変更
  • 各種アフィリエイトサイトにブログのURLの変更届

medi8について

ほとんどのアフィリエイトサイトがURLの変更届だけで済むのですが、medi8ではSSL化したブログは別ブログ扱いになるとのことで(「よくあるご質問15」)、ブログを改めて登録し直す必要がありました。
もちろん広告も新しく作り直しです。

スムーズに切り替えたかったので、SSL化する数日前に「https://~」のURLで登録の申込をした所、あえなく却下されてしまいました。「https://~」への変更が完了してから申し込まないとダメなようです(サイトが存在していればOKなので、混在コンテンツの状態でも大丈夫です)。

その他困ったこと

「Feedly」の登録はリセット

「Feedly」の登録はリセットされます(別ブログの扱い)。
これまで「Feedly」でこのブログの更新通知を受け取っていた方は、お手数ですが再度ご登録してくださると嬉しいです(もちろん新規のご登録も大歓迎です)。

follow us in feedly

「Push7」ではURLの変更のみをすればよく、その他の設定はそのまま引き継がれるようです(多分……)。
もしよろしければこちらもご登録ください。このブログが更新されるとプッシュ通知が届きます。

Facebookのシェア数が消えた

SNS Count Cache」というプラグインを使っていたため、「http://~」の頃のSNSのシェア数を引き継げる(設定ページに「HTTPからHTTPSへのスキーム移行モード」という項目があるので、それを「有効」にする)……はずだったのですが、Facebookのシェア数だけが何故か復活せず……。

Twitterやはてブ、Pocketなどのシェア数は復活しました。Facebookについてはいろいろ調べてみたのですが、結局解決策が見つからず……。「SNS Count Cache」の更新を待つことにします。

あとがき

アフィリエイトリンクの貼り直しに時間がかかりまして、結局完全にSSL化するのに3週間ほど費やしてしまいました。

ただ私の場合、ついでだからと他にもいろいろ直したり、途中ちょっと体調を崩したりということがあったので、頑張れば10日くらいで終わるかもしれません(記事数やアフィリエイトリンクの数にもよると思いますが……)。

ロリポップ」では7月くらいまでSSLの無料サービスがなかったので、評判のいい「エックスサーバー」か「ミックスホスト」、「JETBOY」などに移ろうかな……と考えていたのですが、モタモタしている内に「ロリポップ」でもSSLの無料サービスを始めてくれたのでよかったです(速度や機能面を考えると本当はサーバーを引っ越した方がいいのかもしれませんが……。しかしサーバーの引っ越しってものすごく神経を使いそうなのでなるべくならやりたくない……)。

SSL化が無事終わってホッとしましたが、SSLだとかAMPだとかホントもう面倒くさいので勘弁してほしいです。

スポンサーリンク

AmazonでTシャツや電子書籍(短編小説集)を販売しています

Amazon詳細ページへ Amazon詳細ページへ

Tshirt TrinityでTシャツやバッグを販売しています

TSHIRTS TRINITY

マスコットキャラ

たまに毒吐くちゃん

当ブログのマスコットキャラ「たまに毒吐くちゃん」。所々に出没します。
TSHIRTS TRINITYClubTSUZURIでTシャツ・グッズ販売中です!

同じカテゴリーの記事

ブログを常時SSL化しました~その手順と混在コンテンツの直し方など~

ブログを常時SSL化しました~その手順と混在コンテンツの直し方など~

WordPressで構築したブログを常時SSL化した手順を載せています。混在コンテンツの直し方や、「F12⇒コンソール⇒セキュリティ」で調べても表示されない混在コンテンツの原因についても書いています。
Read More
WordPressテーマ「マテリアル」のカスタマイズ方法【更新日を表示、スマホのメニューを最初から開いておく等】

WordPressテーマ「マテリアル」のカスタマイズ方法【更新日を表示、スマホのメニューを最初から開いておく等】

無料ワードプレステーマ「マテリアル」のカスタマイズ方法を載せています(更新日を表示、スマホのグローバルメニューを最初から開いておく、カテゴリーとタグを記事下に表示、サイト説明文にリンクを貼る、カテゴリーごとの記事の表示をフッターに移動する)。
Read More
ブログを書く時に使える便利なWebサービス【リンクカード、画像軽量化など】

ブログを書く時に使える便利なWebサービス【リンクカード、画像軽量化など】

リンクカード「Embedly」、サムネイルにリンク「HeartRails Capture」、GIFアニメ作成「Animated GIF Maker」、画像を軽量化「TinyPNG」、SVG画像に変換「ZorroSVG」、漫画のコマを使用できる「マンガルー」を紹介しています。
Read More
【WordPress】「悪意あるログイン試行」への対策【.htaccess】

【WordPress】「悪意あるログイン試行」への対策【.htaccess】

WordPressの「悪意あるログイン試行」への数が急増したので、.htaccessを使い、ログインページなど特定のファイルへの海外からのアクセスを制限することにしました。その方法や問題点を書いています。
Read More
【jQuery】画像がコンベアのように横に流れるスライドショー【自動で繰り返し、それぞれの画像にリンクを貼ることが可】

【jQuery】画像がコンベアのように横に流れるスライドショー【自動で繰り返し、それぞれの画像にリンクを貼ることが可】

画像が横にスクロールするjQuery製のスライドショーを紹介しています。自動で繰り返し、それぞれの画像にリンクを貼ることが可能です。WordPress用とそれ以外用のコードを載せています。
Read More
WordPressブログをAMPに対応させ広告、関連記事、SNSシェアボタンを表示する方法(アナリティクスにも対応)

WordPressブログをAMPに対応させ広告、関連記事、SNSシェアボタンを表示する方法(アナリティクスにも対応)

WordPressブログをプラグインでAMPに対応させ(有効化するだけなので簡単)、そのページに広告(アドセンスの表示・非表示の切り替えが可)、SNSシェアボタン、関連記事などを表示する方法と、AMP用のアナリティクスのコードの貼り方、AMPでエラーが出た時の対処法について書いています。
Read More
GitHub Gistを使うとブログにコードを簡単、綺麗に表示できる【プラグインやライブラリ不要】

GitHub Gistを使うとブログにコードを簡単、綺麗に表示できる【プラグインやライブラリ不要】

GitHub GistのEmbedにより、プラグインやライブラリを使わずにブログに手軽にコードを貼り付ける方法や、注意点、表示のカスタマイズをするCSSなどを載せています。
Read More
CSSで作るスライドショー(自動で繰り返し、フェイドイン・アウトで画像を切り替え、それぞれの画像にリンク)

CSSで作るスライドショー(自動で繰り返し、フェイドイン・アウトで画像を切り替え、それぞれの画像にリンク)

CSSで作るスライドショー(幅と高さを固定、自動で繰り返す、フェイドイン・アウトで画像を切り替え、それぞれの画像にリンクを貼ることができる)のコードを載せています。JavaScriptやjQueryは使いません。
Read More
【WordPress】Jetpack「関連投稿」の表示場所、記事数を変更する方法

【WordPress】Jetpack「関連投稿」の表示場所、記事数を変更する方法

ワードプレスのプラグイン「Jetpack」の機能「関連投稿」を任意の場所に表示+表示する記事数を変更するカスタマイズを載せています。
Read More
WordPressの無料テーマ おすすめ8個【日本語、レスポンシブ、SEOに強い】

WordPressの無料テーマ おすすめ8個【日本語、レスポンシブ、SEOに強い】

ワードプレスの無料テーマ(テンプレート)で、おすすめの「個性的なテーマ」「初心者向けのテーマ」「高速・多機能なテーマ」「カスタマイズに向いているテーマ」を2つずつ紹介しています。いずれも日本語、レスポンシブデザイン対応、SEOに強いといわれているテーマです。テーマを選ぶ決め手や注意点も書いています。
Read More
2017年使用中のJetpackの機能【WordPressプラグイン】

2017年使用中のJetpackの機能【WordPressプラグイン】

WordPressの公式プラグイン詰め合わせ「Jetpack」の内で使用中の機能(Markdown、関連投稿、サイト統計情報、コンタクトフォーム、購読、プロテクト、パブリサイズ、サイトマップ、拡張配信、シングルサインオン)を紹介しています。
Read More
【WordPress】SNS Count Cacheが有効化できない+Twitterのシェア数がカウントされない時にしたこと

【WordPress】SNS Count Cacheが有効化できない+Twitterのシェア数がカウントされない時にしたこと

WordPressのプラグイン「SNS Count Cache」が有効化できなかったのですが、PHPのバージョンを変更した所、無事有効化することができました。Twtterのシェア数の表示もできるようになりました。
Read More
【WordPress】Jetpack Markdownを使う時の注意点2つ

【WordPress】Jetpack Markdownを使う時の注意点2つ

Jetpack Markdown(ジェットパック マークダウン)を使おうとした所、困ったことが2つ起きました(見出しが出ない+段落が効かない)。その解決方法を書いています。
Read More
レトロな雰囲気のフリーフォント おすすめ6個【商用無料で漢字も使える】

レトロな雰囲気のフリーフォント おすすめ6個【商用無料で漢字も使える】

「国鉄方向幕書体」「機械彫刻用標準書体フォント」「うつくし明朝体」「しねきゃぷしょん」「コーポレート・ロゴ」「GD高速道路ゴシックJA」というレトロな雰囲気のフリーフォントを紹介しています。見本のバナーもあります。
Read More
【2017年】おすすめのWordPressプラグイン【無料、定番多め25個】

【2017年】おすすめのWordPressプラグイン【無料、定番多め25個】

実際に使ってみて、記事が書きやすくなったり、管理がしやすくなったWordPress(ワードプレス)のプラグインを紹介しています。定番のものが多めです(スパム対策やバックアップ、リンク切れチェック、公式プラグイン「Jetpack」など)。
Read More