【ど素人のSSL化】注意点7つ紹介!初心者は.htaccess記述、SNSボタン削除に手こずるかも?

公開日: : 最終更新日:2018/10/27 サイト運営, 備忘録

スポンサードリンク

 

どうも!心一です。

今回はSSL化作業時の注意点を書きます。

サイト運営超絶ど素人の僕でもまぁ何とかできました…(先人のブロガーの方々本当にありがとうございました…!)

ただ、ど素人の僕にとっては作業中にびっくりしたこと、困ったことがいくつかあり、「できた!」と思ったら翌日なぜか警告マークになってたり、

記事を書いてSearch Consoleからインデックス登録のリクエストをしたものの紐付けを忘れていたり、完了までずるずると尾を引いていました。

ですが今日やっと、完了しました!(感動)

作業時間はかれこれトータル10時間くらい、日数にすると3日間のブログ作業はSSL化に費やしました、笑えない…。

ですので、これからSSL化に取り掛かるブロガーの人に向けて、かつ自分の備忘録がてら記事にしておきます。

ちなみに僕はXserverで契約、CMSはWordpressを使っています。

また、基本的な作業・知識については「SSL化 Wordpress」とか「SSL化 Xserver」とかでググると詳しい手順メインの記事が出てきますので、

この記事はあくまで注意点をメインで知るものだと考えてください。

 



 

全体的な流れ





僕がした作業の大まかな流れは以下の通りです。
  1. SSL化するサイトのバックアップを取る
  2. 契約しているレンタルサーバー(僕ならXserver)にログインしてSSL化設定
  3. SSL化反映のため、小1時間待つ
  4. サイト内の全ての「http~~~」を「https~~~」に変更する
  5. 「http~~~」へのアクセスを「https~~~」にリダイレクトされるように設定する。
  6. GoogleアナリティクスとSearch Consoleに「https」になったサイトを紐付け
  7. もしかしたら翌日に鍵マークが警告マークになってるかも?
  8. 警告マークの原因(どこかにあるhttp)を潰す
  9. 完了!
 

ちゃんと上手く出来れば手順6で終了なはずです、僕みたいに知らない間にミスをしてるとこうなります(笑)

ちなみに、どのレンタルサーバーでもCMSでも流れとやることは大きく違わないようですね。

 

手こずったポイント

サイトのバックアップ





SSL化はサイト全体の変更になるので、サイト情報のバックアップを取っておくべきです。

恥ずかしながら以前取ったのが一年半ほど前だったこともあり方法を全く覚えていませんでした(汗)

調べてみると2パターンがあることを知りました。
  • FTPソフトを使用する方法
  • プラグイン「BackWPup」を使用する方法
 

前もFTP使った記憶があるし、①でやろうかと思って色々調べて奮闘していたのですが調べているうちによく分からんようになってきて、

もういいやと思い②を少し調べたところ、断然簡単そうだったので②を選択。

結果めちゃんこ簡単で所要時間10分かかりませんでした(笑)

みなさんにもバックアップを取るなら「BackWPup」の使用をおすすめします。

取ったバックアップはどこに保存されて、どうすれば復元までできるのかも調べておきましょう!

 

共有SSLか独自SSLか?





バックアップを取った後、契約しているレンタルサーバーにログインしてSSL化の設定を行います。

その際に、共有SSLか、独自SSLかを選択することになります

初心者からしたらなんじゃこれですよね(笑)

ざっくり両者の違いを言うと、
  • 共有SSL…SSL証明書をレンタルサーバー会社と共有する
  • 独自SSL…自分のサイト専用のSSL証明書をゲットできる
 

共有SSLのほうが手間・コストともに手軽に始められそうで、独自SSLがその逆で少し料金もかかることが一般的なようです。

まぁその分、独自SSLでは個人情報を扱うページなどでもURLに自分のブログのドメインが表示されたりと信頼感を感じさせるページになるとは思います。

(ちなみに共有SSLではドメインにレンタルサーバーの名前が入ります)

”SSL化する”という点ではどちらでも大丈夫そうですし、好みで選んでも良いと思います。

詳しいことは「SSL 独自 共有 違い」などでググればたくさん出てきますので、詳しい知識はそちらで付けてください。

ちなみに僕の場合は、Xserverだと無料で独自SSLができましたので独自SSLにしました。

 

スポンサードリンク

 

SSL化を設定すると小1時間ブログにアクセスできない





これは手こずったというよりちょっとびっくりしたことです。

SSL化を設定する時、手順としてはただ画面をポチポチしていくだけなのですが、

設定後は内容が反映されるまでに時間がかかるらしくブログ管理主であっても管理画面にすらアクセスできません。

ちなみに、ブログにアクセスするとこんな画面▼になりました(ブラウザはGoogle chromeです)

 

こんな画面、初心者からすると心臓に悪いです…。(笑)

でも実際は40分くらい?でアクセスできるようになっていましたので、落ち着いてお菓子でも食べながら待ってください。

 

サイト内にもともとhttpsの部分があった





サーバーでSSL化の設定&反映がされたら後はhttpsにしていく作業です。

僕はサイト内のhttpから始まる部分をhttpsにするのにプラグインのSearch Regexを使用しました。

これはサイト内に存在する文言の一括置換するプラグインです。

これでhttpをhttpsに置換するよう入力すると、置換箇所を事前に教えてくれます。

僕のサイトの場合、300箇所以上あったので「いや、たぶん大丈夫だろ…(確認めんど)」と思ってしまったのですが念のため最初の30件くらいは確認しました。

でも結果的にちゃんと確認してよかったです。

というのもSSL化前らでも既にhttpsになっている箇所があるからです。

この状態で置換作業をすると、httpsに含まれている箇所のhttpも置換対象になり、結果的にhttpssになってしまう箇所が発生します。

なので、手順としては以下の通り置換する必要があります。
  1. http→https
  2. httpss→https
 

このように二段階で置換するとサイト内のhttpが全てhttpsになるはずです。

僕はこれで結果的に問題なくSSL化できましたが、他に置換する文字を間違えてしまったりすると悲惨なことになりますので、

置換の直前はしっかり確認しておきましょう。

 

.htaccessの記述箇所が分からなかった





ブログ訪問者にhttpsのアドレスにアクセスしてもらうためにすることとしてリダイレクトの設定があります。

なんのためにする設定かというと、http~~~にアクセスしてくれた読者さんを自動的にhttps~~~のページに飛ばしてくれるようにする設定設定です。

作業としてはレンタルサーバーにログインして.htaccess編集画面を開き以下のコードを記述するだけです。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

 

PC画面としては▼下の画像のように記述できれば大丈夫です^^

後は右下の「.htaccessを編集する(確定)」のボタンをクリックし、その後に表示される確認画面でも同じボタンを押せば完了です。


ちなみにですが、記述した部分の下にあるコードは元から記述されていました。(# BEGIN WordPressから# END WordPressの部分)

Xserverのマニュアルにもありましたが、消さないように注意しましょう。

 

こうやって説明すれば一瞬で済みそうな話なんですが、ど素人の僕が手こずったポイントはこれだけあります。

  • Xserverのマニュアルには一行目と五行目のコード(IfModuleの行)は書かれてなかった
  • .htaccessのどこにこれを書けばいいかパッと理解できなかった
  • ググっても大体の記事が「このコードを.htaccessに記述します(キリッ」としか書かいていなかった
  • てかそもそも.htaccessをいじる画面を開くと上級者向けとか書いてるプレッシャー
 

三つ目に関しては、いやその.htaccessのどこに書けばええんかってハナシよ!!と半ばキレ気味でしたw

 

アナリティクスとSearch Consoleへの紐付けを忘れずに!





記事内容は同じでも、httpからhttpsという一文字の違いでネット上では全く別のサイトと認識されてしまいます。

なので、ここまできたら忘れずに紐付けをし直しましょう!

アナリティクスは簡単なのですが、Search Consoleの紐付けは少し手間がかかります。

というのも、今までインデックス登録をしていたものを一つずつインデックスし直す必要があるからです。

あんまり連続でやると認証を何度も求められて手間がかかりますし、単純にポチポチするだけの作業なのでしんどかったです…。

僕も現在は上位表示されている記事しかアップできていません。

 

翌日にhttpsになっていない箇所があるとの警告





「全部httpsにできたし、紐付けもできたし、よっしゃ記事書くで~♪」とか思ったら矢先の出来事でした。

鍵マークがグレーのびっくりマークが○に囲われているではありませんか…。

原因不明すぎてショックすぎたのですが、さすが現代「ssl化 警告」とかで表示すると解決策がごんごん出てきます。

そこでまずしたことが、Chromeだと自分のブログページで[右クリック→検証→Console(出てきたウィンドウのタブ)]の確認でした。

画像だとこんな画面▼になります。

 


画面中に青い枠で囲った場所に問題の箇所(httpのままになっている箇所)が表示されます。

英語ではありますが、同じく青い下線を引いてあるところをクリックすると問題箇所の詳細を見ることができますので安心してください。

僕の場合はSNSボタンが原因でした。(よく見ると青下線URLにhatebuやFacebookが含まれていますね笑)

クリックしてみるとはてブやFacebookボタンの画像が表示されましたので、その画像ファイルがhttpのままだと分かった次第です。

でも問題はそのSNSボタンがどこにあるか全く分からなかったことです。

「SSL化 SNSボタン」とか「SNSボタン 設置場所」などを調べましたがそれらしき解決法はありませんでした…。

ですが、解決の糸口は[外観→テーマの編集]にありました。

初心者ならあんまりいじりたくない箇所ですが、右側のテーマファイルをよく見るとsns.phpとsns02.phpがあり、

調べたところ、Stinger3のテーマを使用しているとSNSボタンがデフォルトでsns.phpとsns02.phpに格納されていることがわかりました。

警告の原因になっているSNSボタンはここにあったわけです。

さらに調べると、これらはFFFTPから操作して削除できること。(念のためFFFTPを使っての削除手順のスクショも載せます)


サイトによって構成は違いますが、画像のように何とかstinger3のところまでたどりついたらsns.phpがあるはずです。

あとはこれを選択して右クリック→削除です。

これで見事に警告マークが消えました!!本当に感動!!!(泣)

 

まとめ





いろいろあって時間もかかったものの、ど素人の僕がSSL化まで独学でできるっていうのはすごい時代だなと思いました。

ただ、ノウハウ紹介の記事で初心者向け!と謳ってはいても、コードの入力とかに関してはイチから書いてくれていないことが多いので、

ど素人からすると躓きやすいポイントだなと思いました。

僕と同じく、超絶初心者のブロガーさんに役立てば幸いです。

あと、最後のSNSボタン削除のように、httpが残る場所やその対処方は色んなパターンがありそうです。

根気よく解決に向けて取り組むしかないかと思われます(汗) 検討を祈ります!

 

スポンサードリンク

関連記事

記事はありませんでした

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください




  • こんにちは、月島 心一(ツキシマ シンイチ)です。
    ▼このブログはこんなことを書いています☆
    ・医薬品のお仕事
    ・ビジネス書の書評
    ・ストリートダンス
    ・転職のお話…etc
    雑記ブログとしてゆるりと更新しています。
    気になることがあればお気軽にコメントください♪
    ⇒詳しい自己紹介はコチラをどうぞ。

PAGE TOP ↑