はてなブログのデザインCSSが変更しても反映されない時の対応方法

進撃のブログ運営
[ad04]

CSSでつまずくとお腹が痛くなります

はてなブログのカスタマイズは暫く手を出さない予定だったのですが

たまに毒を吐く(id:dokuwohaku)さんのブログ記事にたどり着き

dokuwohaku.hateblo.jp

急遽h2タグを追加しようと思った

のだが

じゃないところでつまずいてしまいました

まさに思いもよらない落とし穴・・

f:id:ayame253:20170309185621j:plain
出典:a guy still meets the world

よくあるCSSが反映されない原因

 

本題の前に一度確認です

以下のような誤りがないかチェックしてみてください

CSS書き間違えチェック

  • 表記を間違っていないか
  • 全角スペースが入っていないか
  • 何かを不意に消してしまっていないか
  • 書く場所を間違っていないか

これらをチェックしてもなお変わらなかった時の対応方法を今回はまとめます

[ad03]

想像と違うCSSが適用された時のショックは大きい

 

僕がはてなブログの見出しのカスタマイズで参考にしたのは以下のブログです

shiromatakumi.hatenablog.com

www.nxworld.net

今回はこちらのデザインにしようと思いました

f:id:ayame253:20170310114957j:plain

そしていつものように「デザイン」→「デザインCSS」へ

f:id:ayame253:20170310115422j:plain

変更したのはh3をh2に変えたことと色を変えただけ

表記の誤りなし。よし。問題なし

「変更を保存する」をして、

テストページを作って

f:id:ayame253:20170310115923j:plain

よしプレビューを表示

f:id:ayame253:20170310120328j:plain

お前はだれだ

[ad01]

インポート元のCSSを修正して対応する

 

原因はすぐにわかりました

f:id:ayame253:20170310120730j:plain

「自分が加えたCSS」

「見に覚えのないCSS」が重複していてあんなことになっていました

この「見に覚えのないCSS」も「デザインCSS」の中にあります

f:id:ayame253:20170310121925j:plain

ブログテーマをインストールしている方はデザインCSSの一番最初にこのような記載があるはずです

こちらから「.css」のURLをコピーしてブラウザで新しく開いてください

するとこのような画面が表示されるはずです

f:id:ayame253:20170310121238j:plain

ここで「Ctrl + F」で該当のタグを探してみると
(今回の僕で言うと.entry-content h2です)

f:id:ayame253:20170310121340j:plain

このタグを直さない限り僕のh2は一生あんなチョコバーみたいな状態です

これで原因はわかりました

しかしこの表記をこの場で直すことは出来ません

僕が講じた対応方法は以下のとおりです

[ad02]

インポート元のCSS変更方法

 

インポート元のCSS変更方法

①インポート元のCSSを全てコピー

②メモ帳などに貼り付け

③重複していたタグを差し替え

④その他の重複タグも同様に変えておく

⑤メモ帳を全てコピー

⑥はてなブログの「デザインCSS」へ貼り付け

⑦変更を保存する

 

先ほどのh2タグは以下のように変更しました

f:id:ayame253:20170310152655j:plain

差し替えが完了したらデザインCSSへまるごと貼り付けます

f:id:ayame253:20170310152734j:plain

これで全てのCSSを「デザインCSS」へ書いていることになります

貼り付けが完了したら修正は完了です

f:id:ayame253:20170310152950j:plain

再度テストページを確認します

次はきっとうまくいく!

f:id:ayame253:20170310154510j:plain

良かった・・・

はてなブログのCSS編集をDropboxで高速化する方法も

今のところ不便さを感じていないので僕は移行しておりませんが

DropboxやGoogle driveへ移行すると高速化が見込めるという情報もありました

以下のなかじ (id:nakaji999)さんの「なか日記」ブログで紹介されています

blog.nakajix.jp

ひょっとしたらこちらのほうが良いのかもしれないので

はてなブログに慣れていらっしゃる方は試みてください

他にもインポート元のCSSを変更する方法はあるかもしれないのですが
ひとまずはこの方法で進めていこうと思います

最後まで読んで頂いてありがとうございました

[ad07]