2016-01-25

レスポンシブWordPressテンプレート(Love Letter・My Song)のハンバーガーメニューをクリックして表示されるメニューをPC時も常に表示させておくカスタマイズ方法

ハンバーガーメニュー

パソコンビュー時はグーバルメニューが非表示で、
右上のハンバーガーメニューをクリックするとメニューが開閉して表示されるタイプの
WordPressテーマ(My SongLove Letter)があります。

これ、ランディングページやミニマルサイトの時はこのデザインが良かったけど、
サイトの規模が大きくなったり、コンテンツが増えたり、普通のサイトを作りたくなったりで、
パソコン表示時に常にメニューを表示しておきたい!
ってなった時のカスタマイズ方法をご紹介します。

理屈はCSSのdisplay: none;で非表示にしてるだけなので、それを外せばOK。簡単です。

テーマ My songの場合

1)トップナビゲーション欄の#navからdisplay: none;を削除。

◎ダッシュボード>外観>テーマ編集>スタイルシート

#nav {
display: none;
width: 960px;
margin: 0 auto 50px auto;
z-index: 9999;
padding: 0;
text-align: center;
border-top: 0px solid #dedede;
border-bottom: 0px solid #dedede;
}

#nav {
width: 960px;
margin: 0 auto 50px auto;
z-index: 9999;
padding: 0;
text-align: center;
border-top: 0px solid #dedede;
border-bottom: 0px solid #dedede;
}

2)トップナビゲーション欄の.toggleにdisplay: none;を追加。

.toggle {
float: right; position: absolute; top: 10px; right: 10px; z-index: 10000;
}

.toggle {
display: none;
float: right; position: absolute; top: 10px; right: 10px; z-index: 10000;
}

テーマ Love Letterの場合

◎ダッシュボード>外観>テーマ編集>スタイルシート

1)レスポンシブ欄「PC 画面の横幅が960px以上」に#nav { display: block; }と.toggle { display: none; }を追加。

@media only screen and (min-width: 960px) {
iframe { width:100%; height:100%; max-width:960px;}
}

@media only screen and (min-width: 960px) {
iframe { width:100%; height:100%; max-width:960px;}
#nav { display: block; }
.toggle { display: none; }

}

以上です。簡単ですね。

*HTML/CSSの変更を伴うテーマ編集に関しては、無料サポート外となります。
不具合が生じてもサポートできませんので、自己責任で編集作業を行ってください。
必ず必ず必ずバックアップを取って作業することをオススメします!

おすすめWordPressテーマ10選
by