ピエールの日記 by pierre 長尾和美

ピエールです。SamuraiTraditional(サムトラ)、たけしを(逸見泰典とのユニット)でギターやってます♪思いつきをブログに! ^^v by pierre

Stinger5 カスタマイズ – トップページのメニューを変更

      2017/05/29

トップページのメニューを変更

Stinger5でトップページのメニューを変更してみたのでそのときのメモ。

プラグイン「jetpack」を使用してcssをカスタマイズ

参考にさせていただいたページは後で紹介するとして、

cssのカスタマイズで便利なのが、プラグインの「jetpack」なんだそうです。

知らなかったですな。。

で、今回のメニューのカスタマイズもこの「jetpack」を使っていました。

幸い自分も「jetpack」は入れているので、すんなりカスタマイズさせていただきました。

「jetpack」に関しては自分も記事を書いているのでこちらを参考にどうぞ。

プラグイン – jetpackを使うときの注意点

プラグイン – jetpackを使うときの注意点 その2

プラグイン – jetpackを使うときの注意点 その3

メニューをカスタマイズしたい

Stinger5のメニューをカスタマイズしたいと思ってググっている方もたくさんいらっしゃるかと思います。

自分がカスタマイズしたのは下記のようなメニューにすることでした。

このカスタマイズをすると、スマホ用の「menu」を押して出てくるメニューも同じように変わります。

image3928

cssを追加記載してカスタマイズ

プラグイン「jetpack」を入れていると、Wordpressのメニューで、「外観」→「CSS編集」があります。

image3939

こちらの「CSS編集」を選択すると、下記画面になります。

この画面からCSSを編集すると、元々あったstyle.cssを上書きする形で構成されるそうです。

なるほど。

image3950

ここに書き込むことによって、元のファイルを変更せずとも設定が反映されるとのこと。

なるほど便利ですね。

cssの内容

記載するコードは下記。

まるっとコピーすればできあがります。


/* テーブルの枠線を消す */
#main .post table {
	border: none;
}

/* オンマウスの動き */
a:hover {
	position: relative;
	top: 2px;
	left: 2px;
}

/* メニューをドロップダウンリストに変更 */
/* widthとheightでボタンの大きさを自由に調整します */
.menu li {
	float: left;
	width: 100px;
	height: 40px;
	padding: 0;
}

/* 通常時のボタンの色はこちらのbackgroudで変更 */
.menu li a {
	text-align: center;
	display: block;
	padding: 10px 0;
	height: 60%;
	width: 100%;
	background: #ff47c1;
	color: white !important;
}

/* オンマウス時のボタンの色はこちらのbackgroudで変更 */
.menu li:hover > a {
	background: #ffd1f1;
}

.menu li ul li {
	overflow: hidden;
	height: 0;
	padding: 0;
}

/* プルダウン時のメニューの色はこちらのbackgroudで変更 */
.menu li ul li a {
	background: #ffd1f1;
	padding: 10px 0;
}

.menu li:hover ul li {
	overflow: visible;
	height: 30px;
	z-index: 1;
}



まとめ

今回参考にさせていただいたのはこちらのサイト。

お勉強になります。

ありがとうございました。

 Stinger5 のカスタマイズ メニューをグローバルメニューに変更

2017/05/29 参考にさせていただいたサイトのリンク切れを解消

こちらのサイトと違う部分は


/* 通常時のボタンの色はこちらのbackgroudで変更 */
.menu li a {
	text-align: center;
	display: block;
	padding: 10px 0;
	height: 60%;
	width: 100%;
	background: #ff47c1;
	color: white !important;
}

こちらに height を追加しました。

これをしておかないと、こちらの Stinger5 カスタマイズ – ドット「・」問題を解消 処置をしたときにレイアウト崩れを起こします。

あいかわらず、カスタマイズしたことを忘れないようにするためのメモでした。

 - wordpress