オタクの戯言

隠れオタクが思うがままに書き連ねていく、とりとめのないブログです

はてなブログでデザインのプレビューが正しく表示されない原因と解決方法

スポンサーリンク

はじめに


当ブログにお越しいただき恐悦至極にございます。あにおです。


f:id:aniota-alvarado:20190513004915p:plain


はてなブログをカスタマイズする際[ダッシュボード]→[デザイン]→[カスタマイズ]と進むことが多いのですが、ある時期から表示がおかしくなりました。

変更するとこうなるよ!というプレビューが下の画像のように崩れた状態で表示されるのです。

f:id:aniota-alvarado:20190511192407p:plain

ずっと放置していましたがどうにも気持ちが悪いので、今回はこの現象を直す方法を調べてまとめておきたいと思います。


それでは、最後までお付き合いいただければ幸いです。

プレビューが正しく表示されない原因

まず結論から述べると、原因は使用しているデザインテーマの内容(デザインCSS)が更新されたことによる不具合のようでした。

内容が更新されたのに更新前のデザインテーマをそのまま使用していると、更新された部分と噛み合わなくなってプレビューが崩れてしまうのでしょう。

そこで私が使用している「CONTENTS」のサイトに飛んで調べてみたのですが、再インストールしてくださいといったようなアナウンスは見当たらず・・・。

もっとも、製作者様のブログを遡ると内容を更新しましたという記事があったので、そういうお知らせがあったあとに同様の不具合が生じた場合はまずこの可能性を疑って良いと思います。

プレビューが正しく表示されない場合の解決方法

ではどうすべきかについて、下記のサイト様が詳しく解説して下さっていました。

簡単に説明すると、テーマストアから自分が現在使用しているテーマを再びインストールすればいいだけです。

ただし、再インストールすると現在設定されているテーマ、デザインCSS、背景画像が破棄されてしまいます。特にデザインCSSは今までのカスタマイズがすべて水の泡となってしまうので、必ずバックアップをとっておくようにしましょう。


再インストールして色々と調整した結果こんな感じで直りました。

f:id:aniota-alvarado:20190513005110p:plain


ちなみに、更新する前のCONTENTSのデザインCSSがこちらです。

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

そして更新後のデザインCSSがこちら。

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

"http~の部分が変更になっていたみたいです。私は再インストールしてしまいましたが、変更になっている部分だけを書き換えれば解決するかもしれません。

どちらにせよしつこいようですがバックアップを忘れないようお気を付けください。

おわりに

以前調べた時は同じ症状になっている人が見つからず、そのまま放置してしまっていました。

ずっと気になっていたのですが独自ドメイン移行をきっかけに、今回ようやく重い腰を上げたところ解決方法が判明したので良かったです。

同じテーマを使用していて同様の症状になっているのであれば、是非一度試してみてください。


長くなってしまいましたが、最後まで読んでいただきありがとうございました。

それでは、またのお越しをお待ちしております。

Copyright © 2016-2019 オタクの戯言 All rights reserved.