はてなブログのイカしたテーマの「Innocent」の編集ボタンが効かないバグを修正

Innocentとは

Blank をベースに更なる改良を加えたはてなブログテーマ「Innocent」をテーマストアにて公開しました。フォントの色やサイズ、余白を調整しよりレスポンシブに進化しました。

• はてなブログテーマ「Innocent」を公開しました – MoonNote

Innocentはシックでモダンなイカしたテーマだ。
このブログでは導入していないが、ヘッダーの下にナビゲーションも入れられたりする。

Chromeで編集ボタンが効かない！

はてなブログでは管理者権限を持っていると、閲覧している記事の編集ボタンがこのように表示される。

これを押すとその記事の編集メニューがすぐに立ち上がって簡単に編集できるのだが…なぜかChromeだけ動作しない！
Firefoxでは動作するからJavaScriptかCSSがおかしいのでは…と考えて調べてみる。

Chromeの「要素を検証」で見ると「javascript: void」という記述が！
最近JavaScriptを勉強し始めたばかりの俺にはさっぱりわからん、ということでJavaScriptは諦めてCSS説に賭けてみる。

aタグのところにフォーカスしてみると…なんかちょっと怪しい。

普通ちゃんと要素が存在すると青色のハイライトがかかるのだが、かかっていないということはCSSがおかしいんじゃないかと思い始める。
そんでCSSをいじってみる。

すると…

ちゃんと認識された！
マウスポインターを合わせてみてもちゃんと反応するし、クリックできる！

ということで原因はGoogle Chromeだと編集ボタンの存在が認識されていなくてクリックできないことだと判明した。

修正方法

既存のCSSのスタイルに以下のものを付け足せば良い。

.entry-header-menu a {
display: block;
height: 100%;
width: 100%;
}

これをはてなブログのデザイン編集画面から反映させれば良いのだが、以下の手順を参考にするといいだろう。

まずはヘッダーのメニューから「デザイン」を選択する。

そうしたらスパナのアイコンをクリックして、表示されたメニューのうち「デザインCSS」を選択。

こんな感じで「末尾に」上のスタイルを追加する。既存のスタイルはいじらずにそのまま付け足そう。

これで完了だ！
設定を保存すれば、わざわざ記事管理ページにいかなくても、その場で簡単に記事が編集できるようになる。

最後に

一つ断らせてもらうとInnocentを貶める意図は一切ないし、むしろこのイカしたテーマは大変気に入っている。
ただ記事をその場で修正できないことに困っていて、それを修正する方法を見つけて共有したかったので、記事にさせてもらった

作者の方には素晴らしいテーマを作っていただいたことに感謝したい。

追記

この投稿のあと、すぐに作者の方からコメントがあり修正したとの報告が入った。
これでInnocentは完璧なテーマになったはずなので、ぜひテーマ選びに困っている皆は使ってみて欲しい。