こんにちは ご訪問ありがとうございます。
今回の記事は、ヘッダー左右の余白を無くすためにデザインＣＳＳにコードを貼った後に発生したと思われる原因不明の不具合が最近になって、ＰＣが頻繁にフリーズする事が今回の不規則なトラブルを誘発していたと原因と推察した内容です。
それでは、この記事を書くに至った背景から、試行錯誤した内容を、PC 画像を見ながら時系列で詳しく見ていきたいと思います。
目次
ヘッダー画像の余白を解消時点から？
余白を無くす記事を参考にさせていただき自分のブログも何とか余白を無くすことに成功しました。
ところが、その操作をしたことを境に記事によってヘッダー上部のツールバーが表示されない場合があることに気が付きました。
正常に表示されているヘッダー上部のツールバー
不具合が発生するページではヘッダー上部メニューバーが消えています
あれっ！おかしい？何時も表示されているヘッダー上部のメニューバーが表示されなくなっています。
しかも、特定のページだけはメニューバーが表示されるのにその他のページでは表示されない。
ヘッダー上部のメニューバーが表示されない時は、サイドバーの注目記事も消えてしまっています。
不具合状況を調査
➀パソコン上で見るヘーダー上部のメニューバーが表示されない。
➁スマホでは全ての画面で正常に表示され問題ない。
不具合を見付けた初期段階から、スマホでは正常に表示しているのにパソコンで見るとおかしい事は判っていました。
今まで正常に表示されていたと言う既成事実が頭から離れない状況で不具合の追跡調査を始めた事が、解決するまでに長時間を要した原因になっていたかも知れません。
ダッシュボード等を含むメニューバーが表示されないと、記事の編集が出来なくなり、ｲﾝﾀｰﾈｯﾄからはてなブログのダッシュボードを探しては編集作業をすることになってしまいました。
➂変化点はCSS の追記・元戻し
ブログ開設からずっとｲﾝﾀｰﾈｯﾄｴｸｽﾌﾟﾛｰﾗｰで表示させていたブログなので、この時点でブラウザに関しては何の疑いを持っていませんでした。
そこで追記したＣＳＳを元戻ししてみましたが、状況は変わりません。
➃デザインテーマを再インストール
初めて触ったCSSなので、何かの操作ﾐｽが有ったのかも知れないと思い、テーマストアからインストールしたデザインテーマBrooklynを再インストールしてみました。
デザインテーマもCSSも元戻ししたのに何故か不具合状況は変りません？
何故？ヘッダー上部のメニューバーが表示されない？
この時点で、私のブログ作業が一時的に停止状態に陥りました。
時間は刻刻と過ぎて、疲れて一晩眠りました。
➄別のブログで使っているＣＳＳと比較
再インストールしたにも関わらず、不具合が解消されないのは何故かを考え、別のブログにもBrooklynをインストールして何か違いがあるかを確認してみました。
⑥インストールする前のプレビューで違いを発見！
新たにインストールする前のBrooklynをプレービューするとヘッダー上部にはちゃんとメニューバーが表示されています。
再インストール前のプレビューでヘッダー上部のツールバーは表示されていません。
※再インストールする前段階で、既に表示していないことを発見！
これでは、ブログに表示されなくて当たり前だ。
不具合発見から既に２６時間以上経過していた、少し疲れ気味だがもう少しだ！
※再インストール前のプレビューでヘッダー上部のメニューバーが何故表示されなくなるのかの原因追及は今回差し控えて、不具合復旧に専念することにしました。
スマホで良くてＰＣがダメ？に立ち返る
ＰＣとスマホはレスポンシブ設定してあるので、スマホで見た場合にはＰＣ版に切り替えても正常にヘーダー上部ツールバー表示されていることから考えてみました。
スマホのブラウザはGooglechrome・ＰＣはインターネットエクスプローラ！
もしかしたら、Googlechromeにログインしてはてなブログを表示させればいいのか？
ようやく出口が見えた
整理して修正作業に入る
➀パソコンではてなブログを表示させるブラウザをGooglechromeに変更
➁デザインカスタマイズのＣＳＳはヘッダー画像の余白を無くしたコードに戻し
➂動作確認 一時下書きに戻していた記事をＵＰし直し
➃備忘録としてこの記事に落とし込み
ヘッダー画像をブログ立ち上げ時の画像に元戻し
この記事を書いた時点でGoogleChromeに切り替え、ＩＥでは編集作業を行こなっていなかったんですが、ＰＣ交換に先立ち準備作業をやっている時に、ヘッダー画像はやはり初めの方か良かったと思いＣＳＳのコード内の画像ＵＲＬの入れ替えを行いました。
その後、試しにＩＥではてなブログを開き、記事の表示具合を確認していたら何とヘッダーのツールバーが毎回表示されているではありませんか！
たまたま今日は表示されていすが、極めて不規則な現象はＰＣ劣化を示す兆候だったのかも知れないと思う様になりました。
関連記事
まとめ
今回判ったこと
インターネットエクスプローラーで表示しなくて、Googlechromeだと表示する根本的な仕組み、システム上の違い等の専門的なことは？ですが、ヘッダー上部のメニューバーが表示出来るようなったことは事実として記録しておこうと思います。
➀テーマストアからデザインをインストールする前にはプレビュー画面に必要な項目が表示されているかを確認する。
➁スマホで正常に動作表示している場合は、スマホとＰＣのブラウザは一致しているかを確認
➂インターネットエクスプローラーでも正常に動作していたので、固定観念にとらわれない変更も必要。
➃ＣＳＳ変更時は、必ずバックアップをとり、印刷しておく位の慎重さが必要
ここまでご精読ありがとうございました。