Vaster2の関連記事機能でhttpsが有効化されないときの対処法【Blogger】

bloggerでhttps化

当ブログは少し前から、blogger側の設定でHTTPS リダイレクトの機能をオンにしています。

ブログの管理画面から設定→基本を選択し、HTTPSリダイレクトの項目ではいを選択するとできます。
これをすることにより、ブログ上のページURLすべてが常時SSL化(暗号通信)され、閲覧者さんへの安全で保護されたページであることの証明にもなり、Google検索でのインデックスも多少有利になるようです。
あと多少ページの表示速度が速くなるとも言われてますね。


安全で保護された通信にはhttpsと緑色で表示され、URLの横にこの緑色の鍵マークがでます。

これが表示されていれば安全な接続であることを示します。

そして最近このブログのテンプレートをVaster2に変更したのですが、なぜかこの鍵マークが表示されないことが多々発生しました。

おそらくこれでも問題なくSSL化されてると思うんですが、見てる側からすればちょっとびっくりしますよね。


下の画像はスマホ閲覧時ですが、PCから見るとさらにⓘマークが表示されます。

トップページでは鍵マークが表示されてるのに、個別の記事ページではこのような状態になることが多かったです。

対処法

調べていくと、どうもこの関連記事の機能で、カメラと写真の画像が表示されるときに発生していることがわかりました。

このカメラ画像は、記事に画像がないときに代替で表示される画像です。

HTMLでどこを編集したらいいのかもよく分からないので、今回は画像のない記事すべてに画像を入れていき、関連記事にカメラ画像を表示させないようにするという地道な作業をして対処。

関連記事に、このカメラ画像を表示させないようにして、無事すべてのページで鍵アイコンを表示させることができました。

追記:もしかしたら画像をいちいち入れなくてもこの方法で解決するかもしれません。

【Vaster2】このページは承認されていないソースからのスクリプトを読み込もうとしています」とでるエラーの対処法


補足

Vaster2をつかって、ブログ上でこの便利な関連記事機能を表示させるには、ブログ管理画面からサイトフィードを設定しましょう。

管理画面から設定→その他を選択

この設定で、フィードの許可を「完全」か「追記の区切り」までを選択すれば、記事の下に関連記事が表示されます。


「追記の区切り」を選択した場合は、区切り線よりも上に画像を入れておかないと記事の画像が関連記事に表示されず、上記のカメラ画像が表示されてしまうので、記事を編集する際は必ず区切り線より上に画像を入れましょう。

記事編集ページのメニューバーにある、紙が破れたようなアイコンが区切り線です。


フィードを完全にした場合、区切り線を入れても入れなくても記事に画像さえを入れておけば、関連記事に表示されると思います。

しかし、フィードを「完全」にしてしまうと記事の全文をRSSフィードにて配信してしまうということなので、feedlyなどでブログの全文をサイトにアクセスしなくても読めてしまいます。

ブログにアドセンス広告などを貼り、広告収入を得たいといった場合は避けた方がいいでしょう。

また、自動的に記事全文をコピーして無断で転載されるといったリスクも発生します。

文章を追記の区切り線で区切って、抜粋のみを配信するようにした方が全文転載のリスクを多少減らすことができます。