趣味を楽しむDIYな暮らし

手作りのくふうを活かした日常生活ブログ

GoogleChromeに切り替えたらはてなブログでヘッダー上部のメニューバーが表示された❗

f:id:sikinomori117:20191205055504p:plain

こんにちは ご訪問ありがとうございます。

 

12月6日 訂正更新

 

この記事に書かれている不具合内容につき、はてなサポート窓口にも相談して適切なアドバイスを頂きました。

 

Microsoft Edgeではてなブログを開けばグローバルメニューのヘッダーが表示されることが判りました。

 

 

以下は以前の内容のままです。

記事の内容は?

 

今回の記事は、結論を先に言ってしまうとインターネットエクスプローラーでのブログ表示をGoogleChromeに切り替えたら表示されなくなったヘッダー上部メニューバーが現れたと言う内容です。

 

誰に読んで欲しい?

 

はてなブログを始めたばかりの方や、テーマストアから新たにデザインテーマを選んでグログをカスタマイズしようと思っている方

 

グログをカスタマイズした後に今まで表示されていたヘッダー上部のメニューバーが表示されなくて困っている方

 

何故か?

 

ブログをカスタマイズする作業って、思ったよりも大変だと思います。しかも、CSS等の詳しい使い方が理解出来ていない私のような場合には、先輩ブロガーさんが書かれた記事を参考にさせて頂きながらの作業になるので、トラブルが発生した時は応用が効きません。

 

そこで、今回私が実際に体験した不具合について詳しくお伝えすることで、同じようなことで困っている方の参考になればと思い、備忘録的ではありますが、書いて行く事に致します。

 

それでは、この記事を書くに至った背景から、試行錯誤した内容を、PC 画像を見ながら時系列で詳しく見ていきたいと思います。

 

目次

 

 

 

 

ヘッダー画像の余白を解消時点から?

 

ブログ開設からデザインテーマを決め、グローバルナビゲーションを設置して何とかブログらしい形を作って来ましたが、PC画面上で見た場合にヘッダー画像の左右に余白が出来ていかにも未完成のように見えて仕方ありませんでした。

 

そこで記事を参考にさせて頂きながら、何度もテストを繰り返しようやく余白を無くす事が出来た時は、思わずヤッター!綺麗に余白を無くせたと喜びました。

 

ところが、暫くして異常に気が付きました。

 

正常に表示されているヘッダー上部のツールバー

f:id:sikinomori117:20191205051911p:plain

ヘッダー上部メニューバーが消えてしまっている

f:id:sikinomori117:20191205052240p:plain

あれっ!おかしい?何時も表示されているヘッダー上部のメニューバーが表示されなくなっています。

 

しかも、特定のページだけはメニューバーが表示されるのにその他のページでは表示されない。

 

ヘッダー上部のメニューバーが表示されない時は、サイドバーの注目記事も消えてしまっています。

 

不具合状況を調査

 

➀パソコン上で見るヘーダー上部のメニューバーが表示されない。

 

➁スマホでは全ての画面で正常に表示され問題ない。

 

不具合を見付けた初期段階から、スマホでは正常に表示しているのにパソコンで見るとおかしい事は判っていました。

 

今まで正常に表示されていたと言う既成事実が頭から離れない状況で不具合の追跡調査を始めた事が、解決するまでに長時間を要した原因になっていたかも知れません。

 

ダッシュボード等を含むメニューバーが表示されないと、記事の編集が出来なくなり、インターネットからはてなブログのダッシュボードを探しては編集作業を繰り返していました。

 

➂変化点はCSS の追記・元戻し

 

ブログ開設からずっとインターネットエクスプローラーで表示させていたブログなので、この時点でブラウザに関しては何の疑いを持っていませんでした。

 

この変化点に至った原因がヘッダー画像のカスタマイズなので、追加したCSSを元に戻してみる事にしました。

 

CSSを元に戻してもヘッダー上部メニューバーは表示されないままです。

 

 

➃デザインテーマを再インストール

 

初めて触ったCSSなので、何かの操作ミスが有ったのかも知れないと思い、テーマストアからインストールしたデザインテーマBrooklynを再インストールしてみました。

 

デザインテーマもCSSも元戻ししたのに何故か不具合状況は変りません?

 

何故?ヘッダー上部のメニューバーが表示されない?

 

この時点で、私のブログ作業が一時的に停止状態に陥りました。 

 

時間は刻刻と過ぎて、疲れて一晩眠りました。

 

➄別のブログで使っているCSSと比較

 

再インストールしたにも関わらず、不具合が解消されないのは何故かを考え、別のブログにもBrooklynをインストールして何か違いがあるかを確認していました。

 

⑥インストールする前のプレビューで違いを発見!

 

 新たにインストールする前のBrooklynをプレービューするとヘッダー上部にはちゃんとメニューバーが表示されています。

f:id:sikinomori117:20191205053001p:plain

再インストール前のプレビューでヘッダー上部のツールバーは表示されていません。

f:id:sikinomori117:20191205053217p:plain

 

※再インストールする前段階で、既に表示していないことを発見!

 

これでは、ブログに表示されなくて当たり前だ。

 

不具合発見から既に26時間以上経過していた、少し疲れ気味だがもう少しだ!

 

※再インストール前のプレビューでヘッダー上部のメニューバーが何故表示されなくなるのかの原因追及は今回差し控えて、不具合復旧に専念することにします。

 

 

スマホで良くてPCがダメ?に立ち返る

 

・PCとスマホはレスポンシブ設定してあるので、スマホで見た場合にはPC版に切り替えても正常にヘーダー上部ツールバー表示されていることから考えてみました。

 

・スマホのブラウザはGooglechrome・PCはインターネットエクスプローラ!

 

・もしかしたら、Googlechromeにログインしてはてなブログを表示させればいいのか?

 

ようやく出口が見えた

 

整理して修正作業に入る

 

➀パソコンではてなブログを表示させるブラウザをGooglechromeに変更

 

➁デザインカスタマイズのCSSはヘッダー画像の余白を無くしたコードに戻し

 

➂動作確認 一時下書きに戻していた記事をUPし直し

 

➃備忘録としてこの記事に落とし込み

 

関連記事 

 

www.mominokihausu.com

 

 まとめ

 

今回判ったこと

 

インターネットエクスプローラーで表示しなくて、Googlechromeだと表示する根本的な仕組み、システム上の違い等の専門的なことは?ですが、ヘッダー上部のメニューバーが表示出来るようなったことは事実として記録しておこうと思います。

 

➀テーマストアからデザインをインストールする前にはプレビュー画面に必要な項目が表示されているかを確認する。

 

➁スマホで正常に動作表示している場合は、スマホとPCのブラウザは一致しているかを確認

 

➂インターネットエクスプローラーでも正常に動作していたので、固定観念にとらわれない変更も必要。

 

➃CSS変更時は、必ずバックアップをとり、印刷しておく位の慎重さが必要

 

問題が発生した場合はあくまでも自己責任で対応が必要になることを痛感しました。

 

ここまでご精読ありがとうございました。