【はてなブログ】HTTPSに移行で、対応していないテーマを自身で修正する方法【虫眼鏡が混在コンテンツ】

原因が虫眼鏡アイコンの画像の場合は、多くの場合は自身で解決することが可能だと思います。

方法 その１

サイドバーにある検索モジュールを外す。根本解決ではないが、検索をあきらめれば解決です。

参考：はてなブログのSSL化　サイドバーの検索モジュールを削除したら やっと「保護された通信」になった - hosoboso

この方は、Google検索をサイドバーにつけたようです。

方法 その２

<style>
.search-module-button {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3Cstyle%3E.a%7Bfill:none;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Esearch%3C/title%3E%3Cpath d='M16.7,15l-3.4-3.3h-.1a5.4,5.4,0,0,0,.9-3.1,5.6,5.6,0,1,0-5.6,5.6,5.4,5.4,0,0,0,3.1-.9.1.1,0,0,0,.1.1L15,16.7a1.1,1.1,0,0,0,.8.3,1.6,1.6,0,0,0,.9-.3,1.4,1.4,0,0,0,0-1.7M8.5,12.3A3.8,3.8,0,0,1,4.8,8.5,3.8,3.8,0,0,1,8.5,4.7a3.9,3.9,0,0,1,3.8,3.8,3.8,3.8,0,0,1-3.8,3.8'/%3E%3Crect class='a' width='20' height='20'/%3E%3C/svg%3E") no-repeat center!important;
 background-size: 20px 20px;
}
</style>

設定＝＞詳細設定の下の方の「headに要素を追加」の部分に上記を追加してみてください。

これでうまくいけば解決です。

CSSで、!importantで画像アイコン部分を上書きする

「方法 その２」で「DUDE」「Naked」あたりは解決できたと思います。常用してないので、ちょっと見ただけですが・・。他のテーマも原因が同じならこの方法で解決できるかと思います。

追記：「Blank」もOKでした。

→→方法その2の「headに要素を追加」をしたらうまくいきました。ありがとうございました。すごいなー感激です。
はてなブログのSSL化　サイドバーの検索モジュールを削除したら やっと「保護された通信」になった - hosoboso

方法 その３

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

設定＝＞詳細設定の下の方の「headに要素を追加」の部分に上記を追加です。
そうすると、httpの虫眼鏡アイコンが、httpsの虫眼鏡アイコンにすり替えて読み込まれるので解決できます。

http://blog.hatena.ne.jp/images/theme/search.png
https://blog.hatena.ne.jp/images/theme/search.png

この方法初めて知ったのですが、「DUDE」「Naked」でも、問題なさそうですね。

参考：
・ブログを HTTPS にした - 平常運転

Content-Security-Policy: upgrade-insecure-requests という仕組みを使うと、混在するコンテンツが存在している場合でもHTTPSで強制的に読み込ませることが可能です。
つまり、混在するコンテンツエラーを回避することができます。
"Content-Security-Policy: upgrade-insecure-requests"でHTTPSページの混在コンテンツを解消する方法 | 海外SEO情報ブログ

「方法 その２」の参考資料

ご自身でデザインCSSを書いている方・テーマ制作者の方
デザインCSSやテーマ内の画像を、以下のいずれかの方法でHTTPSで指定し直すことをおすすめします。

代替画像を用意し、はてなフォトライフにアップロードする
虫眼鏡アイコンの代替となる画像を用意し、はてなフォトライフにアップロードした上で、CSS内でURLを指定してください。テーマで使う画像のホスティングには、はてなフォトライフの利用を推奨*1しています。

Boilerplateテーマ最新版のソースコードをダウンロードし、アイコン部分を差し替える
【よくある質問】HTTPS配信時の混在コンテンツ（Mixed Content）対応について - はてなブログ ヘルプ

＞Boilerplateテーマ最新版のソースコードをダウンロードし、アイコン部分を差し替える

今回、上記の部分で必要な個所だけ抜き出して、「!important」をつけて、現状のCSSを上書きします。「!important」は必要ないかもしれませんが、あると読み込み順序とか位置に関係なく、上書きされるのでつけてます。