あべろぐぷらす

元SEが半農半Xな暮らしを目指して頑張る様子を福島から発信するブログ

なんかおかしい…。はてなの『ZENO-TEAL』だけど、気が付いたらデザインが崩れてしまっている件

f:id:abeshi01:20180120205253p:plain

こんにちは、あべし(@honjituno)です。なんかおかしいです…。このブログでは、今はてなのテーマ『ZENO-TEAL』を設定していますが、気が付いたらデザインが崩れてしまっていました。

 

原因が全く分からず、困っています。たぶん何かやってしまったんだろうな。あぁ…。

なんかおかしい…。はてなの『ZENO-TEAL』だけど、気が付いたらデザインが崩れてしまっている件

最初は少しだけ違和感を感じました。あらためてもう一度確認してみると、それは確信に変わりました。

 

あれ!!ブログのデザインが崩れている!!

 

以前、ブログをリニューアルしてテーマを『ZENO-TEAL』に変更したのですが、その時にはちゃんとしていたと思うんです。リニューアル時に書いたブログを見てみても、やっぱりデザインがしっかりしていますね。

www.abelog-plus.com

おそらくですが、テーマ側の原因ではないような気がしています。きっと自分やってしまった何かが今の状況を生み出している気がしてます。

 

ブログは毎日書けばいいし、デザインなので気にしなければいいのかもしれません。でも、なんか気持ち悪い笑!!

デザインが変わっている箇所をリストアップ!!

というわけで、どこら辺が崩れてしまっているのかリストアップしてみました。特に気になっている箇所を取り上げていきます!

ブログタイトル【h1タグ】のデザインが変

f:id:abeshi01:20180120195658p:plain

まずブログタイトルの箇所です。【h1タグ】のフォントサイズが小さくなっているうえに、文字色が水色になってしまっています。

 

デザインの公式サイトと見比べるとわかりますが、なんか違います。まずこれを何とかしたいと思いましたが、全然何とかなりませんでした…。

リンクの箇所の色が水色になってる

f:id:abeshi01:20180120195719p:plain

リンクになっている箇所の文字色が水色になってしまってます。上のブログタイトルの話と関連しているかもしれません。リンクだから水色になっているのかな??

 

【h2、h3タグ】のフォントサイズが小さい(※解決済み)

f:id:abeshi01:20180120195737p:plain

ここからは解決済みのものです。解決済みといっても、根本的に解決したわけではなく力業で何とかしている状態といった方がいいかもしれません。

 

どうやってフォントサイズを変更したかというと、CSSのカスタマイズで『!important』を適用しました。

 

これを指定すると、強制的にそのデザインを適用することができます。もしもどこかが変になってしまってるとしたら、その上からさらに『これでお願いします!』と上書きしているということですね。

 

つぎはぎ的な応急処置ですが、デザインは戻っているような気がするので、原因が判明するまではこれで行こうと思います。

サイドバーのフォントサイズも小さい(※解決済み)

f:id:abeshi01:20180120195754p:plain

サイドバーの個々のタイトルのフォントサイズも変わってしまっていました。これも先ほどと同様にCSSに『!important』を適用しました。力業です笑! 

 

もしかしたら、他にも変なところがあるかもしれませんが、以上です!

 

今回の騒動、何もかもが悪いというわけではありません。何か起こると原因を調べまくって、対策を考えるからです。

 

この事態に気が付いてからというものの、CSSで『!important』というのを覚えました。CSSの適用には優先順位があるというのも知りました。

 

問題が起こると、解決しようとして知らず知らずの内にレベルアップしているということですね。

 

そんなこともありますが、やはり原因がわからないところが気がかりです。アクセスした瞬間は正常に表示されている気がするのですが、すぐに別のなにかが読み込まれてしまっている様子…。

 

応急処置じゃなくて、根本的に解決したいです!解決できたら、ブログで続報をレポートします!引き続き頑張ります!それではー!