wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

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

      2017/11/01

こんにちは、管理人@SS_mshpです。

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

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

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

サーバーでの設定は前回(ワードプレス時)
https://sounds-stella.jp/music-creation/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化に対応することができました。これをやっておくと、

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

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

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

【カテゴリ】 - webサイト制作 【タグ】 -

  関連記事

【PHPでWPカスタマイズ】プラグイン不使用で、テーマに関連記事表示機能を実装しPV・滞在時間を上げる

今回は、サイトをしっかり見てもらうために、『WordPressサイトに、 …

PHP・shuffleやarrayを使った、画像ランダム表示方法~メインビジュアルやバナー・テキストにも利用可能

今回は、以前お取引先のスクールの担当者さまと、『サイトのメインビジュアル …

wordpress構成ファイルのxmlrpc.phpを無効化する方法【実は攻撃されやすい】

今回は、wordpressの構成ファイルで、ちょっとクセのある『xmlr …

【別に止めなくてOK】wordpressサイトなどに、アメブロ・fc2など無料ブログの更新情報を表示して連携する方法

今回は、『無料ブログにすべきかwordpressにすべきか』という疑問に …

【マテリアルデザインCSSフレームワーク】Materializeで、カッコいいビジネスサイト(静的HTML)を作る

今回は、フレームワークを使ったサイト制作を行ってみます。 利用するのは『 …

【wordpressカスタマイズ】llorix_oneなどビジネストップ1カラムテーマで、カスタマイザーで入らない動画・オーディオを入れる

今回は、人気の海外ディベロッパーのwordpressテーマで、動画やオー …

【WPカスタマイズ】子テーマさえ入れとけば大丈夫?なわけねーだろ!(親テーマに手を入れる・ファイルコピー適応させる羽目になる事例)

今回は、推奨されてるWPの子テーマについてですが、『結局親テーマいじる羽 …

【セキュリティ・脆弱性対策2018】wordpressでサイバー攻撃されやすいファイルってどんなのがあるの?

今回は、wordpress利用者にも気になる『サイバー攻撃』についてです …

ワードプレスでデータベースにたまる余計なデータって何があるの?事例と対処方法

今回は、ワードプレスのサイトでよくある『データベースにたまる余計なデータ …

【WPカスタムフィールドはこう使う】カップ焼きそばレビュー記事に、カスタムフィールドで評価スコアを(CSSつけ方もあり)

今回はwordpressの機能『カスタムフィールド』で、より具体的に利用 …

【PHPで条件分岐】wordpressのサイトで、ページごと(固定・記事・カテゴリ・複数ページ)に、表示される内容を変えたいっ!

今回は、wordpressのサイトで使われるPHPプログラムの条件分岐で …

wordpressの仕組み~ヘッダーに入ってくるCSSは、どのように出力されるか(wp_headにcustomize_cssをadd_action)

今回は、自分のフリー曲素材サイトのチューニングをしてて、wordpres …