STINGER3のメニューをドロップダウンできるようにする
僕のWordPressサイトのテーマはSTINGER3を使っているんだけど、こいつのメニューってサブメニューを追加すると見た目が壊れちゃうんだよ。
インターネットを調べてたら、STINGER3のメニューをドロップダウンにする方法が見つかったので適用してみたよ。
メニューの設定変更
WordPressの設定でメニューに名前を付けられると思うけど、それを「navmenu」に変更するよ。
- ダッシュボードの左メニューから「外観」→「メニュー」を選択するよ。
- 「メニューの名前」の項目を「navmenu」に変更するよ。
- 「メニューを保存」ボタンをクリックするよ。
これでメニューの設定は完了だよ。
テーマの編集
ドロップダウン化するためにテーマのCSSを編集するよ。
- ダッシュボードの左メニューから「外観」→「テーマ編集」を選択するよ。
- 画面右上の「編集するテーマを選択」から「stinger3verYYYYMMDD」を選択するよ。
上記の「YYYYMMDD」はたぶん発行された年月日だよ。 - 画面左側の一覧から「スタイルシート(style.css)」を選択するよ
- 表示されたソースの中から以下の部分を検索するよ。
/*---------------------
ナビゲーション
-----------------------*/
#navi-in li {
position: relative;
float: left;
font-size: 13px;
padding-left: 10px;
display: inline;
padding-right: 10px;
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #CCC;
padding-top: 5px;
padding-bottom: 5px;
}
#navi-in li li {
float: left;
font-size: 13px;
padding-left: 10px;
display: inline;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
border: none;
}
#navi-in li a {
float: left;
color: #333;
text-decoration: none;
}
.menu-navigation-container {
overflow: hidden;
}
#navi-in li a:hover {
text-decoration: underline;
}
- 上記の部分の後ろに以下を追記してね。
/*追記*/
#menu-navmenu li{
position: relative;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
#menu-navmenu li a{
display: block;
margin: 0;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
#menu-navmenu li ul{
list-style: none;
position: absolute;
top: 100%;
left: 0;
width: 250%;
margin: 0;
padding: 0;
z-index: 1;
}
#menu-navmenu li ul li{
overflow: hidden;
height:0;
margin: 0;
padding: 0;
}
#menu-navmenu li ul li a{
text-align:left;
}
#menu-navmenu li:hover ul li{
overflow: visible;
width: 100%;
height: auto;
margin: 0;
padding-top: 5px;
padding-bottom: 5px;
background: #f8f8f8;
border:1px #ccc dotted;
z-index: 0;
}
- 追記したら「ファイルを更新」ボタンをクリックしてね。
メニューがドロップダウンになっていたら成功だよ。