読者です 読者をやめる 読者になる 読者になる

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

CSS プログラミング
広告

どうも、ゴトーだ。

f:id:hogehoge223:20170208081817j:plain

このブログではレスポンシブデザインに対応したイカしたテーマである「Innocent」というものを使っている。
デザインはクールだし、シンプルで使い勝手が良くて大変気に入っているのだが、一つバグがあって困っていたのでそれを修正してみた。

そのバグとは「Google Chromeで編集ボタンが効かない」ということなのだが、同じ症状で悩んでいる方がいれば、以下の方法を試してみて欲しい。

Innocentとは

f:id:hogehoge223:20161117132055j:plain

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

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

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

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

f:id:hogehoge223:20161117133120p:plain

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

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

f:id:hogehoge223:20161117133317p:plain

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

f:id:hogehoge223:20161117133457p:plain

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

f:id:hogehoge223:20161117133642p:plain

すると…

f:id:hogehoge223:20161117133652p:plain

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

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

修正方法

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

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

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

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

f:id:hogehoge223:20161117134332p:plain

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

f:id:hogehoge223:20161117134129p:plain

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

f:id:hogehoge223:20161117134256p:plain

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

最後に

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

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

追記

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