メインメニューを開く

STINGER3のメニューをドロップダウンできるようにする

2019年7月22日 (月) 13:59時点におけるRin-scrooge (トーク | 投稿記録)による版 (ページの作成:「僕のWordPressサイトのテーマは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;
}
  • 追記したら「ファイルを更新」ボタンをクリックしてね。
    メニューがドロップダウンになっていたら成功だよ。

参考サイト