はてなブログのヘッダーをHTMLごと自由にカスタマイズする唯一の方法
「はてなブログのヘッダーだいたい皆同じ」
どうも、オークニです。
たとえばあなたが「ヘッダーなんて画像さえ違えばそれでオリジナリティの完成だ！」とお思いならば、この記事はさほど役に立たないだろう。
たとえばあなたが「たしかにヘッダー画像は変えたものの…なんか素人ブログ感が払拭できてないんだよなー」とお思いならば、これから読む内容が少しは役に立つかもしれない。
ちなみに、本記事ははてなブログのヘッダーをHTMLごと自由にカスタマイズするにはこの方法がベストなんじゃね？という考察であり、個別具体的なカスタマイズコードを貼ったりはしていない。
いわゆるオークニズムとして読んで頂ければ幸いである。
はてなブログのヘッダーがダサい理由
とりあえず、はてなブログのヘッダーあるあるというと、一枚画像ドーンみたいな。
あるいは、シンプルにタイトルやサブタイトルがテキストで添えられているパターン。
別にこれ自体は何らダサいとは思わない。
一枚画像ドーンも、テキストタイトルも、むしろそれが個人ブログらしさであり、昔から馴染みのあるルックスだと思う。
では、何がダサく感じるのか？
画一的なスタイル
つまり、みんな同じ形であるところにダサさが芽生える。
これは別にはてなブログに限ったことではない。無料ブログサービスである以上、運営が意図して統一させているところは必ずある。
そして、そんな中で少しでもスタイルを変えるために「テーマ」というものが存在する。
しかし、ここでひとつの問題に直面する。
はてなブログのヘッダーはHTMLがいじれない
はてなブログのテーマストアには、公式非公式問わずたくさんの素晴らしいテーマが存在する。
しかし、どれだけそんな素晴らしいテーマへ変更しようと、基本的に、いや絶対的にCSSに限った変更しかできない。
つまりHTMLは変わらない
私のブログの読者、少なからずはてなブログのカスタマイズへ関心がある人なら周知の事実だが、ここで改めて確認しておこう。
この画像は、はてなブログの一般的なHTMLブロックである。
そして、青いエリアがユーザーも自由にカスタマイズできるHTMLだ。
併せて、こちらの画像もご覧いただこう。
そう。ヘッダーエリアに関しては、「タイトル下」からしかHTMLをカスタマイズすることができない。
まさに、上記の画像にある赤いエリア、すなわち「ヘッダー」は、はてなブログにおいて”聖域”となっているのだ。
ただし、無理やりCSSをいじってヘッダーに装飾をすることはできる。
そうは言っても微々たるものだ。どれだけCSSをいじろうと限界があり、根本的なヘッダーの自由度は一切変わらない。
ここに、はてなブログのヘッダーが画一的でダサい原因が集約されている。
新規でヘッダーを作るしかない
さて、この記事の本題だ。
真の意味でヘッダーを自由にカスタマイズしたいのであれば、どれだけCSSをいじろうとHTMLがいじれない限りその目的は達成できない。
幸い”聖域”ことヘッダーの直下には、メインカラムとサイドバーに分離される寸前で「タイトル下」という、ほぼヘッダーみたいな”HTMLがいじれるエリア”が存在する。
これを使わない手はない
実際に、このエリアを使って擬似的にヘッダーとグローバルメニューを並列にさせたりしている有名ブログも多々ある。
ただそれだけでは甘い。
なぜなら、既存のヘッダーが残っている限り、そのヘッダーへのHTML的なカスタマイズはできないままだ。
ではどうするのか？
消すのだ。
display: none;
CSSには「display: none;」という便利な技がある。
これは、その要素を”ビジュアル的”に完全に抹消することができる。
そしてもちろん、ヘッダーのCSSはいじれる。
つまり、消せる。
であれば、元々のヘッダーに対してCSSで「display: none;」を適用し、ビジュアル的には完全に消し去ったのち、「タイトル下」にて新規でヘッダーを作り出せばいい。
これこそが、はてなブログのヘッダーをHTMLごと自由にカスタマイズする唯一の方法である。
ヘッダーを消すなんてけしからん問題
こんな荒々しい方法を書くと、確実にけしからんという声があがるだろう。
ブログに限らず、webページにおいてヘッダーというのはそのページにおける最重要ポイント。
これは、見た目の問題ではなく、ロボット的な意味でだ。
つまり、Googleがそのページを評価する上で、常識的に最初に通過するポイント、それがヘッダーである。
そんな重要なヘッダーをビジュアル的に削除して、新規で擬似ヘッダーを作り出す。そんなことをすればGoogleは混乱を招き、SEO的にも不利になりうるだろう。
ごもっともだ。
しかし残念なことに、この方法を2ヶ月ほどやり通している私のブログがSEO的に、Google的に不利な評価を受けている印象は全く無い。
そしてもっと残念なことに、実はこの方法は、はてなブログで最も影響力のあるカスタマイズでも採用されている方法だということ。
【決定版】はてなブログ・スマホデザイン最強カスタマイズ集
あなたはこのカスタマイズをご存知だろうか。
ブックマークが1,000超え
聞くまでもないだろう。はてなブロガーで少しでもカスタマイズに興味のある人間なら、誰もが一度は見たことのあるカリスマ的カスタマイズ記事である。
これは、あえてレスポンシブは採用せず、完全にスマホ独立型のカスタマイズであるが、その影響力たるや半端ない。
マジではてなブログのスマホデザインでは半分くらいの人間がこれを使っているんじゃないかって錯覚してしまうほど、よく見る。
では、それだけ影響力のあるこのカリスマカスタマイズがどのようにされているか。
/* ### はてなヘッダーの非表示 ### */
#globalheader-container {display:none;}
/* ### 余白調整 ### */
#container {padding-top:0px;}
/* ### デフォルトの丸いアイコン等の非表示 ### */
#header{ display:none;}
カスタマイズの最初の最初、冒頭でいきなり既存のヘッダーに関しての全てを抹消している。
にも関わらず、この記事がその件でけしからんなんて意見は聞いたことがない。
やはり、この方法が正義なのか。
強いて言うなら、この場合はスマホに限ったカスタマイズなので、けしからん度合いが弱いという擁護があるかもしれない。
しかし、それは大間違いだ
Googleはすでに4月からMFI（モバイルファーストインデックス）へ移行すると明言している。
Google、桜🌸の季節に多くのサイトをモバイルファーストインデックスに移行📲 | 海外SEO情報ブログ
要は、これからはPCよりもスマホの情報こそ最重要。ということだ。
もし、ヘッダーを消すなんてけしからんと言うのであれば、スマホデザイン最強カスタマイザーの人たちは全員アウト。
4月以降のMFI環境に、自らヘッダーを消しながら特攻することになる。
どれだけPCでは真っ当なコードを記述していたとしても、スマホでヘッダーを消しちゃっていれば、Google的にはそーゆーサイトとして見なされても仕方ない。
逆に言えば、それが良い判断材料になるかもしれない。
スマホデザイン最強カスタマイザーの人たちが、ヘッダーを消したままMFIに突っ込んで、それが後々Googleの評価的にマイナスになるのかどうか。
それを観察したうえで、本当にヘッダーを消してもけしからんのかどうかを判断できるかもしれない。
もちろん、私も同時進行で引き続きデフォルトヘッダーは消し続ける。
さいごに
たとえばこのブログ。ファーストビューではヘッダーが幅広なのに、スクロールした瞬間ウニュっと縮んでいるはずだ。
機能的にも、ユーザビリティ的にも、デザイン的にも気に入っている。そして何より、今風だ。オシャレなwebサイトではよく使われているヘッダーデザインの1つ。
しかしこの挙動、はてなブログで普通のカスタマイズで実装しようとするとほぼ不可能だ。
そう、ヘッダーを消さない限り。
その他にも、ヒーローヘッダーをパララックスさせながら且つスティッキーさせるなんてゆう、トリッキーなヘッダーであっても自由に実装できる。
See the Pen Neat Parallax Hero Effect by Dominic Magnifico (@magnificode) on CodePen.
別にこれが良いか悪いかについて述べているわけではない。参考にするもしないも個人の自由だし、個人の責任である。
もし需要があるのであれば、あらためて込み入った具体的なカスタマイズ記事を書くだろうし、そうでもなければこれ以上言及することもないだろう。
以上、はてなブログの画一的でダサいヘッダーをHTMLごと自由にカスタマイズするにはどうすればよいか？についてのオークニズムである。
