【はてなブログ】管理画面のデザインビューが崩れてしまったときの対処法【HTTPS化】

こんにちは。

あなたはもうブログをHTTPSへ移行しましたか。

Googleでは2017年初頭からSSLサーバー証明書（以下SSL証明書）を導入していない（HTTPS化していない）サイトに対して、Chromeのアドレスバーによる警告表示を段階的に強化してきました。

そして2018年7月リリース予定のChrome 68からは、SSL証明書を導入していない全てのサイトで「保護されていません」と警告が表示されるようになります。

その期限が目前に迫った2018年6月11日。ついにはてなブログでも独自ドメインで運用しているブログがHTTPSで配信できるようになりました。（はてなが提供しているドメインを使用したブログについては2018年4月より移行可能になっています。）

独自ドメインで運用していた方には待ちに待ったHTTPS化。なかには待ちきれずにWordPressに移転したブロガーさん達もいますが、とにかく７月に間に合って良かったですよね。

そんなはてなブログのHTTPS配信への移行ですが、とくに問題なくスムーズにいく方もいればトラブルに見舞われる方もいらっしゃるような気がします。そのため、いざHTTPSに切り替えよう、と思っても

「一度HTTPS配信を有効にすると、元に戻せません。」

という注意喚起を見て躊躇してしまうこともあるような気がします。

かくいう私はとくに大きなトラブルなくHTTPSに移行することができましたが、それでもいくつかすぐに上手くいかないこともありました。

今回は、その中の１つ、はてなブログの「管理画面のデザインビューが崩れてしまったときの対処法」をご紹介します。

管理画面のデザインビューが崩れてしまったときの対処法

はてなブログをHTTPS配信に移行し、Chromeのアドレスバーにも無事「保護ざれた通信」と表示されるようになりました。

それなのに管理画面のデザインビューが崩れてしまっている。＿|￣|○

せっかくHTTPS化できたのに、なんだかモヤモヤしてしまう、こんな事態に遭遇してしまった時は、はてなブログの「デザインテーマのデザインCSS」が更新されている可能性があります。

「デザインテーマのデザインCSS」は以下に記載されています。

管理画面　＞　デザイン　＞　カスタマイズ　＞　｛｝デザインCSS

「｛｝デザインCSS」の一番上に記載されているのが「デザインテーマのデザインCSS」です。

例えば、私の使用しているデザインテーマ「Brooklyn」では、次のように記載されていました。

/* <system section="theme" selected="6653586347155924442"> */
@import url("https://hatenablog.com/theme/6653586347155924442.css");
/* </system> */

この部分の記述を更新することで、管理画面のデザインビューの崩れを解消することができます。

はてなブログの「デザインテーマのデザインCSS」を更新する

「デザインテーマのデザインCSS」の記述は、テーマストアからデザインテーマを再インストールすれば更新することができます。

テーマ ストア – はてなブログ

※注意

デザインテーマを再インストールしたり、別のテーマに変更すると「｛｝デザインCSS」に記載されているCSSがクリアされてしまいます。事前に必ずコピーしておき、テーマ再インストール（変更）後、改めて記載し直してください。

デザインテーマ「Brooklyn」を再インストールすると「デザインテーマのデザインCSS」の記述が次のように更新されていました。

/* <system section="theme" selected="6653586347155924442"> */
@import "https://blog.hatena.ne.jp/-/theme/6653586347155924442.css";
/* </system> */

更新前のものと比較してみると、２行目の@importの部分が更新されていたようです。

更新後は「デザインテーマのデザインCSS」より下に記載されていたCSSを元に戻せばすべて元通り。これで管理画面のデザインビューの崩れも無事、解消されました。

管理画面のデザインビューが崩れてしまったときの対処法のご紹介は以上です。