Facebook
RSS Feed
Jan 25, 2016

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

ハンバーガーメニュー

パソコンビュー時はグーバルメニューが非表示で、
右上のハンバーガーメニューをクリックするとメニューが開閉して表示されるタイプの
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で最新情報を確認で!

Posted in WordPress初心者講座Comments Closed 

関連記事

今月の人気のワードプレステンプレートBEST 3

WordPressテーマ(スマホ対応レスポンシブデザイン)「Slauson」
公式サイト/マガジン/ビジネス・企業
WordPressテーマ(スマホ対応レスポンシブデザイン)White Studio
ビジネス・企業/コーポレートサイト/公式サイト
WordPressテーマ(スマホ対応レスポンシブデザイン)「Pantomime」
ギャラリー・ポートフォリオ / 公式サイト