読者です 読者をやめる 読者になる 読者になる

LIFEPORT

人生に良い悪いはない。来た道進む先が違うだけ。英語とロックが僕の人生

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

はてなブログ はてなブログ-カスタマイズ

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

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

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

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

dokuwohaku.hateblo.jp

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

のだが

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

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

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

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


本題の前に一度確認です

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

CSS書き間違えチェック

  • 表記を間違っていないか

  • 全角スペースが入っていないか

  • 何かを不意に消してしまっていないか

  • 書く場所を間違っていないか

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

2. 想像と違う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

お前はだれだ

3.インポート元の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は一生あんなチョコバーみたいな状態です

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

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

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

インポート元の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

良かった・・・

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

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

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

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

blog.nakajix.jp

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

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

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

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

広告を非表示にする