こんにちは、やましです。
今日はイラストではなく、CSS初心者がはてなブログのレイアウトを改善すべくグローバルメニューを設置してみたお話です。
グローバルメニューの名前すら知らなかったせいで「ブログ メニューバー」とかで検索してました…
よくたどり着いたものだ。
【目次】
グローバルメニューとは？
ずばり、
記事の上に出てくるピンクのこいつです。
見たことある方もいらっしゃると思いますが、ブログやサイトに設置されてると記事が探しやすいですよね。
あと、なんか格好良い…。
ですが、はてなブログのテーマ変更だけでは、これはつけられないのです。
CSS編集という、なんかとっても難しそうな作業がいるのです。
今回、簡単に設置する手順を教えてくれるブログを見つけましたので、紹介します。
参考にしたブログ
はてなブログにグローバルメニューを設置する方法（コピペOK！） | でざなり (dezanari.com)
こちらのサイトに今回はお世話になりました。
他にもいろいろ手順を説明しているブログはありました。
ですが、CSS初心者には難しかったです。
CSSジェネレーターとやらのサイトに行って、自分でレイアウト選んで（この時点で選べてるのか分からない）、CSSコピーして～ってのがもう合ってるのかどうか貼り付けてみるまで分からなくて、
しゃらくせぇ！！ ってなりました（初心者のくせに短気）
いや、わかりやすいのですよ。
でも私の知識では時間もかかるし、イラスト描く時間が無くなるーと泣いてました😭
ところがこちらのサイトさんはですね、
〇〇にしたいならこのCSS、▽▽にしたいならこのCSSコピペしてね、とめっちゃ分かりやすい…！！！
しかも言うてもそこまで拘りたいわけではなかったんです。
一般的に見るアレで良かった。
で、その「一般的に見るアレ」はほぼ全てこのサイトさんで網羅できると思います。
私がしたことといえば、このサイトさんからコピペして、色の情報を変えたくらいです。
私と同じような方は、ご自分がやりたいアレが、このサイトさんで扱われているか一度確認するのおすすめです。
ネットの海に飲まれる前に…！
初心者への注意点
ここからは私がやらかした失敗です。
分かっている方はこんな失敗しないと思うので、初心者向けです。
確定していない事実もあるのですが、一応書いておきます。
テーマ変更→閲覧数（PV）が下がる？？
ブログのテーマによっては、グローバルメニューが変になってしまいます。
なのでテーマを変更すると思います。
私も例に漏れず、何も考えずに変更したら意外な落とし穴がありました。
なんと、閲覧数が半分以下に落ち込みました…！！
1月13日の夜にテーマを変更しました。
いきなり閲覧数が落ちて、頭の中は？でいっぱいです。
1月14日に新規記事を投稿したのにコレだったのではさすがにおかしいと思いました。
こんないい加減なブログですが、やはり見てくれる人が減ると寂しい😭
- 更新していないのはいつものこと（おい）
- 炎上したわけでもない（炎上したら逆に閲覧数増えますしね）
思い当たることと言えば、グローバルメニューを設置したことです。
最初はグローバルメニューを設置すると閲覧数が減るのかと思いましたが、
調べてみるとどうやらテーマ変更の方が問題だったようです。
はてなブログではあまり同じ事象は見当たらなかったのですが、WordPressだとテーマ変更で閲覧数に変動があるという記事を見つけたので、おそらく同じようなことが起きたのかなと推測しています。
確定ではないですが、もしテーマ変更される際は、留意しておいても良いかもです。
閲覧数減少の対処法と現状なんかは、またの機会に書こうと思います。
スマホ画面には反映されない（無料版の場合）
こちらは無料はてなブログの方の場合です。
pro版でないとスマホ版のデザイン変更は制限がかかります。
今回のデザインもそこに引っかかります。
なのでスマホ版でグローバルメニュー設置しようと思うと、有料版への加入が必要になるようです。
やはりお金払っている方は強い（当たり前）
失敗すると謎の現象が起こる
CSSはいろいろな設定ができる反面、よくわからない文字の羅列です。
なので、初心者は容易に変更しちゃだめなところを変更しちゃいます。
で、その結果がこちら↓
お判りいただけるだろうか…
おや…スクロールバーの様子が……？
グローバルメニューから下が無い！！！！！！
ヘッダから下（記事）がお亡くなりになりました……
これぞスクロールバーが仕事しない状態です。
これについては、グローバルメニュー設置時ではなく、調子に乗ってその後いろいろCSSをじった時に起こってしまった悲劇です。
なので、紹介したサイトのせいでは一切ないです。
今だにどこを触ったせいでこんなことになったのか不明です😂
他のところを触っていたらもっと違う謎現象が起こっていたと思います。
ともかく、CSSを変更する時にはこういう失敗も起こり得るので、初心者の方は十分注意してくださいね。
ではまたー！
よろしければポチッと押してください！
