メニューを小さくし、ページヘッダーを非表示にする

問題点

Lightning proの不満点として、メニューなどのサイズをカスタマイズできないということか。
目立たせたくないメニューがやたらとでかい。デフォでは大きく、自分でカスタマイズ(サイズ変更や色など)できればよいのだがそういう数的な調整をできない。そういう項目がない。
なので前回お世話になったデベロッパーツールとCSSでカスタマイズしてみた。

作業記録

メニューのカスタマイズ

div#gMenu_outer.gMenu_outer{
	max-height: 30px;
}
strong.gMenu_name{
  margin: -8px 0px;
}

div#gMenu_outer.gMenu_outerのmax-heightでメニューのバカでかさを抑制。
メニューの縦幅だけを調整しても文字の位置が変わらない為、メニューの真ん中の位置に文字を持ってくる必要がある。
それをstrong.gMenu_nameのmarginでやっている。

ページヘッダー画像の非表示

加えてやっかいだったのはLightning proにある、ページヘッダーという機能。
メニューの下に、ページそれぞれに画像を設定できるというものなのだが、必要ない場合を考えていないのかオンオフできない・・・。
画像に加えてメニューの「WordPress」をクリックするとWordPress、「MySQL」をクリックするとMySQLと表示される。
今自分がどこにいるかなんて、その下にあるパンくずリストで分かるだろ!と言いたい。
しかもこれも画像を表示させること前提なのかやたらと縦幅がある。
こういう機能があるのはいいんだ。ただカスタマイズできるようにしとけよと言いたい。
一応、文字位置を左、中央、右に変えたり、テキスト余白を変更したりなど、僅かなカスタマイズはできるのだがオフにできない。
仕方ないのでこちらもCSSをいじって非表示にしてみた。

div.section.page-header{
  max-height: 0px;
}
div.page-header_pageTitle{
  font-size:0px;
}
h1.page-header_pageTitle:first-child{
	font-size: 0px;
}

画像が表示されるエリアはdiv.section.page-headerのmax-heightを0pxにすることであっさり消えてくれた。
問題は文字が残ってしまったこと。
div.page-header_pageTitleだけだと一部ページの文字が残ってしまったのでh1.page-header_pageTitle:first-childを何とか探し当て、ようやく鬱陶しい文字が消えてくれた。

デベロッパーツールのおかげで何とか目的達成。
こんだけCSSいじらないと自分好みにならないのか。
このテーマ、私に向いていないのかなぁ。

次の記事

パラメータチューニング