701
回編集
差分
ページの作成:「僕のWordPressサイトのテーマはSTINGER3を使っているんだけど、こいつのメニューってサブメニューを追加すると見た目が壊れちゃ…」
僕のWordPressサイトのテーマはSTINGER3を使っているんだけど、こいつのメニューってサブメニューを追加すると見た目が壊れちゃうんだよ。<br/>
インターネットを調べてたら、STINGER3のメニューをドロップダウンにする方法が見つかったので適用してみたよ。
== メニューの設定変更 ==
WordPressの設定でメニューに名前を付けられると思うけど、それを「navmenu」に変更するよ。
*ダッシュボードの左メニューから「外観」→「メニュー」を選択するよ。<br/>
*「メニューの名前」の項目を「navmenu」に変更するよ。<br/>
*「メニューを保存」ボタンをクリックするよ。<br/>
これでメニューの設定は完了だよ。
== テーマの編集 ==
ドロップダウン化するためにテーマのCSSを編集するよ。
*ダッシュボードの左メニューから「外観」→「テーマ編集」を選択するよ。<br/>
*画面右上の「編集するテーマを選択」から「stinger3verYYYYMMDD」を選択するよ。<br/>上記の「YYYYMMDD」はたぶん発行された年月日だよ。<br>
*画面左側の一覧から「スタイルシート(style.css)」を選択するよ<br/>
*表示されたソースの中から以下の部分を検索するよ。<br/>
<source lang="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;
}
</source>
*上記の部分の後ろに以下を追記してね。<br/>
<source lang="css">
/*追記*/
#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;
}
</source>
*追記したら「ファイルを更新」ボタンをクリックしてね。<br/>メニューがドロップダウンになっていたら成功だよ。
== 参考サイト ==
[http://creatorheart.com/web/wordpress/stinger3_dropdownmenu/ 【※重要なお知らせあり】【WordPress】Stinger3をドロップダウンメニューに対応させてみました。（stinger3ver20131217対応）【Stinger3】]<br/>
[http://creatorheart.com/web/wordpress/stinger3_dropdownmenu_kaiketsu/ 【ご報告】【WordPress】Stinger3をドロップダウンメニューに対応させてみました。（stinger3ver20131217対応）【Stinger3】 記事の一部修正【改善】]
[[Category::WordPress]]
インターネットを調べてたら、STINGER3のメニューをドロップダウンにする方法が見つかったので適用してみたよ。
== メニューの設定変更 ==
WordPressの設定でメニューに名前を付けられると思うけど、それを「navmenu」に変更するよ。
*ダッシュボードの左メニューから「外観」→「メニュー」を選択するよ。<br/>
*「メニューの名前」の項目を「navmenu」に変更するよ。<br/>
*「メニューを保存」ボタンをクリックするよ。<br/>
これでメニューの設定は完了だよ。
== テーマの編集 ==
ドロップダウン化するためにテーマのCSSを編集するよ。
*ダッシュボードの左メニューから「外観」→「テーマ編集」を選択するよ。<br/>
*画面右上の「編集するテーマを選択」から「stinger3verYYYYMMDD」を選択するよ。<br/>上記の「YYYYMMDD」はたぶん発行された年月日だよ。<br>
*画面左側の一覧から「スタイルシート(style.css)」を選択するよ<br/>
*表示されたソースの中から以下の部分を検索するよ。<br/>
<source lang="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;
}
</source>
*上記の部分の後ろに以下を追記してね。<br/>
<source lang="css">
/*追記*/
#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;
}
</source>
*追記したら「ファイルを更新」ボタンをクリックしてね。<br/>メニューがドロップダウンになっていたら成功だよ。
== 参考サイト ==
[http://creatorheart.com/web/wordpress/stinger3_dropdownmenu/ 【※重要なお知らせあり】【WordPress】Stinger3をドロップダウンメニューに対応させてみました。（stinger3ver20131217対応）【Stinger3】]<br/>
[http://creatorheart.com/web/wordpress/stinger3_dropdownmenu_kaiketsu/ 【ご報告】【WordPress】Stinger3をドロップダウンメニューに対応させてみました。（stinger3ver20131217対応）【Stinger3】 記事の一部修正【改善】]
[[Category::WordPress]]