はてなブログのレイアウトが崩れてしまった！CSS（スタイルシート）の修正方法

実際に僕が経験したことで、一瞬ひやりとしましたが、なんとか元に戻せましたので、その方法を記載しておきます。

どういう不具合が生じたか？ 

僕がやらかしたのは、ある特定の部分のみレイアウトを変更しようとし「display: inline」を「display:block」に変更した際におこりました。表示方法を「横並び」から「たて並び」に変えるという設定です。

ある特定の部分のみにこれを実行したつもりが、ブログ全体のレイアウトに影響してしまい、ブログ全体が全てたて並びになってしまったのです。

慌てて状態を戻しましたが、なぜだかレイアウトは元に戻らずにたて並びのままです。どうしたらいいのだろう？

直近でバックアップ（＝エクスポート）をとっていたので、それで元に戻そうかと思いましたが、いくらかの差分は生じます。その差分を再度修正するのも面倒。ちなみにバックアップの方法は以下の通りです。

はてなブログのバックアップ手順

1. 管理画面のメニューから「設定」－「詳細設定」を選択します
2. 「エクスポート」の「記事のバックアップと製本サービス」をクリックします
3. 「エクスポートしなおす」をクリックします
4. 「ダウンロードする」をクリックします

手順3の「エクスポートしなおす」を実行することで、表示されている作成日時が今日の日付に変わります。

僕のブログは2018年1月時点で550記事程度です。ダウンロードされたテキストファイルは2.8MB程度。ダウンロード時間は数秒で終わります。

カスタマイズするときにはこれをやっておいたら安心でしょうか。

崩れたレイアウトの修正方法

CSSの設定に原因があるので、これをいったんクリアし、再度CSSの設定をすれば元に戻ると思います（多分）

1. 管理画面のメニューから「デザイン」を選択します
2. 「カスタマイズ」を選択します
3. デザインCSSの内容でインストールされているデザインテーマ以外の内容を全て切り取ります（※１）
4. 切り取った内容をGoogleドキュメントやWordなどに保存します（メモ帳でもいいですが改行コードが入らないので、なにかと不便です）
5. 管理画面で「変更を保存」します
6. デザインCSSに手順4で切り取った内容を再度貼り付けます
7. 管理画面で「変更を保存します」

（※1）デザインテーマはこんな感じでインストールされていると思います。これを残します。残さないと、「このフィールドを入力してください。」というメッセージが表示されて保存できません。

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

インストールしているデザインテーマのURLがhttpsになっていない場合は再インストールが必要になると思います。  

まとめ

これで復旧できたでしょうか？ 僕の場合はこれで解決しました。この方法を試されるときは各自の責任にて作業を実施してください。無事、解決することを祈ります。