ワードプレスじゃない通常サイトをSSL(暗号化通信)化するときの、htmlソース編集方法

      2021/02/16   1532文字

今回はプラグインで一発SSL化ができるワードプレスではなく、通常のwebサイトをSSL(暗号化通信)してみた話題です。

正しく表示させ、かつ保護された接続を保持するには、内部リンクやCSS・外部リンクを正しく設定することが必須です。
(間違えるとcssやjavascriptが効かずに変な表示になったり、セキュリティ警告が出たりする)さっそく概要を見ていきましょう。

基本・内部リンクが絶対パス・相対パスのときの対応の違い

サーバーでの設定は前回(ワードプレス時)
/archives/3989
に書いたので省きますが、プラグインで書き換えができないので、多少の作業が発生することになります。まずは内部リンクから。

絶対パスになっている時の対応

『http://○○/image/○○』みたいな形で、内部の画像やCSS・javascriptを指定している場合は、『https://○○/image/○○』というように書きなおしてやらないと、正しく表示しません。数ページならどうにかなりますが、数十~数百ページ全部書き直すのは現実的ではありません(笑)

相対パスになっている時の対応

内部の画像やCSS・javascriptの場所を動かしていないのであれば、相対パスでそのまま表示します。

外部リンクが、SSL化に影響する点

単純なテキストリンク(http)だと警告は出ない

管理人が自分の持ってるサイトで、実験してみました。
例えばブログランク・お友達や取引先の相互リンクなどで、外部リンクをサイトに貼ることがあるかもしれません。その場合、『アンカータグに文章挟んだだけの、単純テキストリンク』ですと、『https内にhttpの部分があっても、警告が出ない』ようです(SSL接続が保持されている安全な状態)。

画像・スクリプトなどを含む外部リンクは、https内にhttp混在注意

SSLで通信したにもかかわらず、ブラウザが『完全に保護されていません』と警告を出した事例です。見てみると、『画像がhttp(SSLではない領域)から読み込まれる』という形になっています。スクリプトなども同様です。たとえ悪意のあるものでなくても、『ブラウザ警告』の時点で、閲覧を躊躇するユーザーが発生することが予測できます。

忘れずに、.htaccessでリダイレクトをかけよう

あとは、忘れずに『httpでアクセスしてきた人が、安全なhttpsでページを見れる』ように、httpsのページに移動させないといけません。これはサーバーの.htaccessファイルで設定しました。

RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://○○○○(指定したドメイン)/$1 [R=301,L]

というように書いて、SSL化したページに自動で移動できるようにしました。

あとがき

上記のような感じで、通常のhtml打って作ったようなページも、SSL化に対応することができました。これをやっておくと、

インターネット業界全体的な流れである『ブラウザで警告が出ますよ~』という状況になっても大丈夫です。

ユーザー離脱を防ぐためにも、ぜひご検討ください。

WordPressサイト制作&リニューアル・機能開発サービス | アトリエSS


【カテゴリ】 - webサイト制作関連, お役立ちツール・SNS etc
【タグ】 -

  関連記事

【おすすめWordPressテーマ】Maxwell~シンプル・洗練されたブログメディア向きテーマ・スライダーやレイアウト変更も簡単
ワードプレスじゃない通常サイトをSSL(暗号化通信)化するときの、htmlソース編集方法
【WordPressテーマ改造】カスタマイザープレビューが表示されなくなった件の対応(ファンクション名変更・twenty seventeen)
ランキングサイト:ブログ村で、複数のブログをひとつのアカウントで管理する方法
pinterest(ピンタレスト)オリジナル画像やイラストなどをアップしたり消したりする方法
googleアドセンス広告で、競合他社の広告を自社サイトに表示させない方法
wordpressの仕組み~ヘッダーに入ってくるCSSは、どのように出力されるか(wp_headにcustomize_cssをadd_action)
【WordPress2019公式テーマ】Twenty Nineteenってどう?→文字デカすぎ&PCも1カラムは難点・ブロックエディタとの親和性はok
WPカスタムフィールドを使って、soundcloudみたいに記事一覧でオーディオ再生できるサイトを作る方法
【サイトスマホ対応】fc2ぶろぐで、スマホ表示時の検索タグって使えないの?回答→レスポンシブを使えばokです。
【公式】TVがなくても情報収集しよう~インターネットで視聴できるテレビ・ラジオ・動画まとめ
【WP/contact form 7】$_POST変数の中身で判定して、『メール送信ありがとうページ』に遷移させる方法