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カスタマイズは無料サポート対象外となりますので、
必ずバックアップを取った上で自己責任でお願いします!
CSSの記述方法は時代で変わるので、上手くいかない場合はGoogleで最新情報を確認で!

ホームページからの集客できてますか?

ワードプレステーマ「Minimal WP」
Minimal WPのWordPressテンプレートは、月間45万PV超のブログ運営のノウハウを詰め込んだミニマルデザインテンプレート。HTML不要で初心者でも簡単におしゃれなホームページが作れます!ブログ・自社メディアを始めるなら今がチャンスです!
by
関連記事