何とも呑気な私は、去年の秋にようやく必須作業だと知りながらも…私にとっては難題な故に半年も放置していた https化（SSL化）を春の陽気とともについに成し遂げたのです！
ばんざ～い！！
httpsへの切り替えを知った時の記事は以下⇩
結論から言うと、混在コンテンツエラーにはなりませんでした。。。
URLの左側にあった≪セキュリティ保護なし≫という表示はなくなり、全記事ざーっと見たのですが、どのページにもしっかりと鍵マークがついています。
心配していた、 http のままのかかりつけ眼科のURLを貼り付けているページも混在コンテンツエラーにならず鍵マークが付いています。そのURLをクリックすると、ちゃんと横浜相鉄ビル眼科のHPに飛び、横浜相鉄ビル眼科のURLの左側に≪セキュリティ保護なし≫はついたままですが閲覧はできます。他にも http のままのURLを貼っているページもありますがエラーにはなっておらず、クリックするとやはり同じように飛んでURLの左側に≪セキュリティ保護なし≫とついたままですが閲覧はできます。
なぜ？…私の混在コンテンツエラーの理解が間違っていたのかしら？
混在コンテンツエラーとは、https化後にそのページ内のどこかにhttpがあると「httpという危険なコンテンツが混ざってますよ！」ということで、私のブログのそのページのURLに≪セキュリティ保護なし≫の類のものが表示され、その文面中のhttpのものは真っ白になって表示されないか、表示されていたとしてもURLをクリックしてもエラーになって開けなくなるのでは？と心配していたのですが…そうはなりませんでした。
そんなこんなで、混在コンテンツエラーになったらちゃんと修正できるのかが怖くてなかなか手を付けられず、いろいろ調べているとその対処方法だとかで 『開発者ツール＞検証＞console』というのを開いてみると何だかぎょうさんエラーのような警告表示が出てきてもう…！理解不能のあまり、しかめっ面のまま固まるしかなく、気が重くなるばかりでした。。。
結局、バックアップを取って、公開しない同じブログを作り確認してから実行しました。と言ってもバックアップを取るのも初めてで、ダウンロードしたのをどうやって新しいブログに戻すのかも分からなくて、調べて調べて…でした。
そのやり方は、
１．設定＞詳細設定＞エクスポート記事のバックアップと詳細設定＞ダウンロード で自分のPCにブログの中身をダウンロード。エクスプローラーの中のダウンロードに見た目はHTMLの形で入ります。
２．ダッシュボード＞新しくブログを作る より自分だけに公開を選択し手順に添って新しいブログを作ります。ダッシュボード＞インポートのブログデータをアップロードのファイルデータを選択をクリックするとエクスプローラーが開くので、ダウンロードの中のバックアップ記事を選んで開けば完了です。
但し、ヘッダやフッタなどに追加で貼ったHTMLやテーマ（私はMinimalismなのですがブログの見た目を決めるものです）は一緒にダウンロードされないので、HTMLは公開している元ブログからコピペする必要があります。テーマはデフォルトで作られるのでデザイン＞デザインテーマから変更できますが、私は現在のデフォルトのデザインが気に入りそのままで試してみました。
で、この現在のデフォルトが2019.1～出ているSmoothなのですが、これが私のブログにとっても合っていてテーマを変えようか散々迷うほど素敵で私の好みなのです°˖✧
背景は変更しています。部分的に明朝体が入っていて、全体のバランスが品よくまとまっています⇩
⇧ スクショの貼り付けは画質が良くないので伝わりにくいのですが、PCで見ると背景の色もシルバーと薄紫の間のような色でとてもキレイなのです°˖✧
今のはあまりにも真っ白で、PCではただただ白さが広がっているのですが、羊雲なんだから、雲の中にいるんだからあえて真っ白なの！と納得していた私の心は大きく揺さぶられました。
但し、このようにタイトルが明朝体で出るのはPC上だけで、背景の柄がタイトルバックにある違いはあるものの私のスマホ＝アンドロイドでは表示上は現在のMinimalismとほぼ同じなのです。調べると、アンドロイドはそもそも明朝体自体を持ち合わせていないのでゴシック体に代替表示されるようなのです。では、iPhoneなら？と、試しに息子のiPhoneで見てみると、iPhoneではちゃんとPC同様に明朝体で表示されていました！
他には、ナビゲーションメニューバーの表示がＭinimalismのHTMLではうまくいきませんでした。タイトルの下でバーにならず縦に出てしまいます。⇩
⇧ このように出るのは、CSSで表示の仕方を入れていないからだというのを見つけ、それらしいコードをコピペしたりしましたが変わりませんでした。
これができないのでトップ画面が記事一覧にならず、ユーザーとしては操作性が悪くなります。このSmoothでナビゲーションメニューバーを出している人もいるので、散々調べたのですがやり方が分からず断念。私のブログはカテゴリーが２つしかないから、ナビゲーションメニューバーなしでもいいような気もするのでそのうちSmoothに変更するかもしれませんが。
さて、話をhttps化に戻しますと、
現在は、はてなでブログを作るとURLが自動でhttpsで作られるので、バックアップをダウンロードした時点でまずホームがエラーかどうか分かるのですが、ダウンロードしてみると…鍵マークはちゃんと付いていました。その後、ヘッダやフッタなどに追加で貼ったHTMLも同じように全てコピペすると…鍵マークは付いていましたが、先ほど言ったナビゲーションメニューバーが上手く表示されなかったのと『上に戻るボタン』（右下の隅に張り付いている小さい矢印）が表示されているのにクリックしても動かないという不具合が出ました。追加で貼ったHTML内の自分のブログのURLを新しいブログのURLに変更し、http⇒httpsにしたら『上に戻るボタン』はちゃんと動くようになりましたが、ナビゲーションメニューバーは修正できなかったのでその部分のHTMLは削除しました。
このようにして非公開ブログで試してみて、これならきっと大丈夫！と思い、本日ようやくえぃやっと切り替えたのです。切り替えは簡単、クリック一つです。
結果、どのページにもしっかり鍵マークが付いていましたが『上に戻るボタン』だけ同じように動かなかったので、そこのHTMLのhttp⇒httpsにしたらちゃんと動くようになりました。修正したのはそこだけです。
あ！もしかしたら、混在コンテンツエラーとは、文面ではなく追加で貼ったりしたHTML内にhttpがあると正しく動作しなかったり正しく表示されなかったりする、ということなのかしら！？
因みに、ブログをhttps化する前に文面に貼り付けていたhttps化されていないURLにsを付けてクリックしてみたら、飛んだ先で当然の如くエラーメッセージが出てページは表示されませんでした。そんなURLはないよ！ってことでしょう。でも逆にhttpのままの私のURLをクリックするとちゃんとhttpsになった私のURLにアクセス出来るのです！
混在コンテンツエラーが怖くて踏み出せないでいるお方、
もし不具合が出ても、HTMLを追加で貼っている場所、デザイン＞カスタマイズ＞のヘッダかフッタかデザインCSSか、設定＞詳細設定＞の中のheadに要素を追加か読者になるボタンの中の http⇒https にしたらきっと大丈夫 ♡
それでもダメだったらそこを削除するしかないけれど…参考になればと思います ♡
あーこれで一つ、気が楽になったっ ♫
追記：ブログタイトルの『羊雲』をデフォルトSmoothのような明朝体にしたくて調べまくって試すも試すも上手くいきません。余白とのバランスなのでしょうが、スマホだとゴシップでも気にならないけど、パソコンだと明朝体の方が俄然いいっ°˖✧
せめてもの気晴らしに…メニューバーに薄～く色を付けてみました。。。
追記２：2021/3/30 文中随所により詳しく加筆致しました。そして、メニューバーの左上に長らく張り付いていた謎の”１”の消去に成功しました！
⇩ ４年以上も謎の”１”が張り付いていた以前のブログ画面。
今回の http化作業でHTMLを何度も張ったり消したりして、Smoothでメニューバーが上手くいかない画面を追加で貼り付けたりしているうちに…気が付きました。位置からしてここしかない！と思いメニューバーのTHMLの一番最初の１を消したら、ブログ上からもなくなりました！！でも…２～７はSmoothでのエラー画面上には出ているし、HTMLにも残っているのに、なぜかこちらのMinimalismブログには出て来ないのです。ちゃんとHTMLを勉強しないと分かりません。
あと、なんとなく以前より字が小さくなったような？字を大きくするコードが利いてないのかも？？スマホだと大きめの字は改行が増えるので返って読みにくいけれど、PCだとすごく小さく感じるので、そこが難しいところなのですが…。
