この記事は最終更新日から1年以上が経過しています
- 投稿日：2024/05/01
- 更新日：2024/05/01
SWELLでHP制作！の管理人まちださんからリクエストをいただきました。
WordPressテーマSWELLで「2カラムデザインにしつつ、左側に固定メニュー」を表示するカスタマイズを実装してみました。
PCなどで閲覧時には、上記画像の通り左側に固定メニューが表示される仕様です。
カスタマイズ方法
カスタマイズ > ヘッダー
ヘッダーのレイアウト(PC)をヘッダーナビの下に変更
サイドバー
左サイドバーがあるので右サイドバーはすべてOFFにします。
追加CSS
@media (min-width: 1100px) { #body_wrap #header { position: fixed; width: 300px; height: 100%; padding: 10px; left: 0; top: 0; } #body_wrap #header .c-gnav { flex-direction: column; text-align: left; }}@media (min-width: 1100px) { #body_wrap #header { position: fixed; width: 300px; height: 100%; padding: 10px; left: 0; top: 0; } #body_wrap #content.l-content { margin-left: 300px; max-width:none; } #body_wrap #breadcrumb, #body_wrap #footer, #body_wrap #before_footer_widget { margin-left: 300px; } #body_wrap #header .c-gnav { flex-direction: column; text-align: left; }}@media (min-width: 1100px) { #body_wrap #header { position: fixed; width: 300px; height: 100%; padding: 10px; left: 0; top: 0; } #body_wrap.home #main_visual, #body_wrap.home #post_slider { margin-left: 300px; } .p-mainVisual { width: auto; } #body_wrap #content.l-content { margin-left: 300px; max-width:none; } #body_wrap #breadcrumb, #body_wrap #footer, #body_wrap #before_footer_widget { margin-left: 300px; } #body_wrap #header .c-gnav { flex-direction: column; text-align: left; }}
続きは、リベシティにログインしてからお読みください
