Stinger5 カスタマイズ – トップページのメニューを変更
2017/05/29
目次
トップページのメニューを変更
Stinger5でトップページのメニューを変更してみたのでそのときのメモ。
プラグイン「jetpack」を使用してcssをカスタマイズ
参考にさせていただいたページは後で紹介するとして、
cssのカスタマイズで便利なのが、プラグインの「jetpack」なんだそうです。
知らなかったですな。。
で、今回のメニューのカスタマイズもこの「jetpack」を使っていました。
幸い自分も「jetpack」は入れているので、すんなりカスタマイズさせていただきました。
「jetpack」に関しては自分も記事を書いているのでこちらを参考にどうぞ。
メニューをカスタマイズしたい
Stinger5のメニューをカスタマイズしたいと思ってググっている方もたくさんいらっしゃるかと思います。
自分がカスタマイズしたのは下記のようなメニューにすることでした。
このカスタマイズをすると、スマホ用の「menu」を押して出てくるメニューも同じように変わります。
cssを追加記載してカスタマイズ
プラグイン「jetpack」を入れていると、Wordpressのメニューで、「外観」→「CSS編集」があります。
こちらの「CSS編集」を選択すると、下記画面になります。
この画面からCSSを編集すると、元々あったstyle.cssを上書きする形で構成されるそうです。
なるほど。
ここに書き込むことによって、元のファイルを変更せずとも設定が反映されるとのこと。
なるほど便利ですね。
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 カスタマイズ – ドット「・」問題を解消 処置をしたときにレイアウト崩れを起こします。
あいかわらず、カスタマイズしたことを忘れないようにするためのメモでした。