40代主婦がアフィリエイトで子供の学費と老後資金♡

BBAだよ!全員集合

作業記録

アフィンガーのテーマHappyDiaryがSSL化できない時は画像を確認!(坂口)

更新日:

こんばんは。アフィンガーを愛する主婦アフィリエイター坂口ジャスミンです。

前回の記事で私は今回アフィンガーのHappyDiaryをテーマにすることにしたのですが、ふと見るとブラウザのアドレスバーに鍵マークがついてない!!

↓鍵マークなし(SSL化できてません)

↓鍵マークあり(SSL化できてます)

 

そこでBBAメンに助けを求めました。

ステ子ちゃんから返事が来てざわつくBBAのやり取りも最後にのっけてるのでぜひご覧下さい(笑)

 

アフィリエイト初心者はSSL化でつまづきやすい!

今回可愛いテーマが配布されたアフィンガーでSSL化できず焦りまくった私。

初心者アフィリエイターさんは特にSSL化って何?分からない!!って思いますよね。

私は一応アフィリエイト初心者は脱出していますが、全く分かっていません。

今回使っているテーマはアフィンガーのHappyDiary。

 

エラーの確認をしたら、多分このドット部分の画像かなというところまでは分かったのですが、どうしたら良いかはさっぱり分からず・・・

ちなみにエラーは、該当ページで右クリック⇒検証で出てくるデベロッパーツールというアルファベットがいっぱい並んでる所で確認しました。

※F12でも出るそうです。はい。やっぱり初心者ですね(笑

これに△の中に「!」が入った所をクリックしてみると画像っぽいことがまで分かりました。

 

SSLエラーの原因は画像?

ジャスミン

これ、トップページがSSL化できてなくて調べてみたら、黄色ドットの背景画像が

http://wing-wp.com/sample-7/wp-content/uploads/2018/08/yellow_dot.jpg

こうなってるからかな?と思うんだけど(全然違ったらごめん)
これを直すにはどうしたら良いのーー?

ダージリン

この背景画像をダウンロードして、自分のとこにアップして、カスタマイズ画面から背景画像を設定とかどう?

ジャスミン

ちょっとまって!あと10回読むわ!!

ダージリン

アフィンガーのカスタマイズ画面だす

背景画像の設定

保存した画像をアップロードして、設定、どう?

ジャスミン

全部がドットになった!!

アッサム
CSSを開きます
アッサム

#st-headerbox {
background-image: url(ここに画像のURL) !important;
}

↑をコピペします。

ダージリン

さすが!ナイスフォロー!
画像のURLの探し方わかる?

ジャスミン

http://wing-wp.com/sample-7/wp-content/uploads/2018/08/yellow_dot.jpg

これじゃないの??

ダージリン

それじゃなくて、自分のメディアってとこからさっきアップした画像開くと、右側にこの画像のアドレスでるから
そっちを、コピー

ジャスミン

あ、了解!!

ダージリン

だめならアッサムにバトンタッチ
パソコンなくて画面も何もわからん、想像には限界があるww
(まだ車で移動中)

アッサム

へい!

#st-headerbox {
background-image: url(ここにジャスミンのURL入れてくれた) !important;
}

これ他にもつまづくひと絶対いそう…

ジャスミン

で、できてる?大丈夫?

アッサム

鍵かかってますー!
めでたしめでたし(*'ω'*)

セイロン

華麗なるサポート

アールグレイ

バッチリでーす!
ツイッターでちょっとでもつぶやけばステ子くるよー

 

という事で無事解決しました。

もし同じテーマを使っている方でSSL化されたサイトに出る鍵がマークがついていない場合はおためしください。

 

追記:HappyDiaryの補足ページ(http://wing-wp.com/sample-7/hosoku/)の「ヘッダー背景画像」の説明に

「スライドショーの下の背景画像はカスタマイザーの「ヘッダー画像」>ヘッダー画像エリアで設定しています。」と書かれていました。

背景画像をここで設定すればCSSの変更をしなくても大丈夫っぽいですね。

 

↓鍵マークなし(SSL化できてません)

↓鍵マークあり(SSL化できてます)

 

ジャスミン
鍵大事!

 

 

SSL(TLS)について簡単に補足

芹沢ダージリンです。ちょっと真面目な感じで補足しときます。読み飛ばしOKですw

今回の記事で、ジャスミンのサイトに暗号化されていない表示がでてしまったのは「サイト内にhttpではじまるデータが入っていた」からです。例えばリンク先や、サイト内に張り付けてある画像などが1個でもhttpではじまっていたらエラーになります。

調べる方法は、Google Chromeのデベロッパーツールを使うと便利ですが、ちょっと高度でここでは説明できないので、有益なサイトを紹介しておきますw

◆Webサイトの常時SSL化に失敗しないエラーチェックと対応方法 | 常時SSL Lab. by Zenlogicのファーストサーバ株式会社
https://zenlogic.jp/aossl/operation/web-check/

↑この記事のなかほど、「「Mixed Content」のエラーを解決しよう」の部分にチェック方法が書かれています。

★SSL/TLSについて

SSL(TLS)はインターネット上のデータを暗号化して通信する仕組みで、なりすまし、盗聴、改ざんを防止するためのものです。暗号化されていない通信はブラウザのアドレスバーにhttpではじまるアドレスが表示され、SSL(TLS)による安全な接続がされている通信はhttpsではじまるアドレスが表示されます。

画像:https://www.websecurity.symantec.com/content/dam/websitesecurity/theme/jp/images/ssl-basic-guide/image01-01-1021_2.png

※TLSはSSLの次世代規格で、現在はTLSによる暗号化が主流です。が、中身はTLSであっても長年親しまれたSSLという名称が一般的に使われてます

SSL化には、サーバーにSSL証明書というものが必要になります。SSL証明書は電子認証局に身元を証明する手続きをし、年間費用を払うことで取得できます。クレジットカードや個人情報を入力してもらうショッピングサイトなどには必須ですが、個人で取得するにはハードルが高く、個人情報を取得する必要がないことからも導入している人はほとんどいませんでした。

しかし最近ではレンタルサーバーで個人でも気軽にSSL化をできるようになりました(無料の共有SSLサービスを提供しているレンタルサーバーが多くあるため、個人でも簡単な設定で導入できる)。

SSL/TLSについては、こちらのサイトがわかりやすいです。

◆SSL/TLSのまとめ | DigiCert & Symantec
https://www.websecurity.symantec.com/ja/jp/theme/ssl-tls-basic-guide

アフィリエイトサイトや個人ブログをSSL化するメリットについては、ググってもらうと良いですが、主にGoogleから評価される、表示が速くなる、正確なアクセス情報がとれる、アドレスバーに警告が出ない、などと言われている感じです。

自分で取得したドメインをSSL化するには、レンタルサーバーのSSLについてのヘルプをご覧頂いたらよいかと思います!

画像はダウンロードして使おう★

こんにちは、高橋アッサムです。
SSLでエラーが出てるのに原因がわからなかったら、とりあえずF12を押してデベロッパツールを起動して、黄色い枠の「Mixed Content:」っていうのを見ればいいですよ。(google chromeの場合)
詳しくは↑の芹沢さんの補足を読んでください。(投げやり)

で、今回のエラーは
http://wing-wp.com/sample-7/wp-content/uploads/2018/08/yellow_dot.jpg
っていうのが原因だったんですけど、このURLみてください。あなたのサイトのURLじゃないですよね…?
どこのサイトのURLかというと、AFFINGERのサイトのURLです。

勘のいい人ならわかるかもしれませんが、このドット画像はあなたがAFFINGERのサイトから勝手に使ってるってことなんですよ…!!

それって良くないですよね!

…え?なんで良くないかって?

だってみんながAFFINGERのサイトから画像を勝手に使ったら、AFFINGERのサイトに負担がかかるじゃないですか…!
1人、2人ならいいかもしれませんが(いや、よくないけど)、1,000人が一斉にAFFINGERのサイトから画像を使ったらどうなりますか?
しかもそのなかに月100万PVのサイトとかあったら…?
AFFINGERのサイトが爆発してしまいます…!!!
(要するに、AFFINGERが使用しているサーバーに負荷がかかるということ。)

AFFINGERが使用しているサーバーに負荷がかかると、もしかしたらサーバー会社から「ちょっと!あんたのサイト、負荷かかりすぎなんだけど!!何してんの!!」ってステ子ちゃんが怒られるかもしれません。最悪、サーバー会社からステ子ちゃんが追い出されるということも…。

それだけじゃありません。
サーバーは他のユーザーと共有することが多いです。
同じサーバー内に負荷のかかる使い方をしているユーザーがいると、他のユーザーにも「あれ?なんかうちのサーバーが重いんだけど」って迷惑がかかります。

なので、画像は右クリックして保存して自分のサイトのアップしたものを使いましょう…!!
直リンだめ、絶対!!!

 

ステ子にドキドキの主婦アフィリエイター5人の様子

アールグレイ

バッチリでーす!
ツイッターでちょっとでもつぶやけばステ子くるよー

BBA一同ドキドキしてました。ステ子ちゃんがいつ来るのか。

8時34分にツイート後今か今かと待ち構えていると・・・2時間後。

セイロン

ステ子きた!

この合図で・・・

アールグレイ

見てくるっ

アッサム

ステ子、もう修正してくれたの?早くない?w

ジャスミン

わ、本当だ!!え、もう修正してくれてるの?

アッサム

ここからBBAがざわつきますw

アールグレイ

はやっwww
対応早いってホメよう

ジャスミン

ステ子すげー

アッサム

褒めてRTしました!!

セイロン

はや!!

アッサム

丁寧にお礼までもらってしまって、BBA感涙

ジャスミン

ステ子好き☆やっぱアフィンガーだよねー

ダージリン

うおーすごい!やっぱ向こうのミスだったんだね!

 

無事解決とともに、ステ子ちゃんの仕事の早さに一同驚愕したのでした。

本当に素早い対応ありがとうございました!!

(BBA一同)


車にMDチェンジャーがついていた世代です。2000年問題の時は社会人でした。

-作業記録

Copyright© BBAだよ!全員集合 , 2019 All Rights Reserved.