Lightning3カラム化計画 その1 ~実践編~
早速ですが、このブログでは、3カラムレイアウトを実装しています。
なぜかというと、私は3カラムレイアウトに慣れきってしまって今更2カラムレイアウトには戻れないからです。
また、最近、3カラムレイアウトを実現するためのフックを仕込んでもらいました。
なので、それを活用しない手はないということで今回の記事を書くことにしました。
今回行う作業について
今回は下記工程で作業を行います。
作業工程その1:テーマを最新版に更新
今回は2020年5月か6月頃にごねにごねて追加してもらったアクションフックを使用しているので、それ以前のバージョンだとうまく行かない可能性があります。古いバージョンの Lightning Pro をお使いの方でこの記事に興味がある方はこの際更新してしまいましょう。
作業工程その2:ウィジェットエリアの作成
まず、ウィジェットエリアを作ります。
この工程は子テーマの functions.php かプラグインの PHP に下記コードをコピー&ペーストすれば完了です。
function my_lightning_register_widget_area() {
register_sidebar(
array(
'name' => '追加サイドバー',
'id' => 'lightning-addtional-sidebar',
'description' => '3カラムレイアウトのみ表示',
'before_widget' => '<aside class="widget %2$s" id="%1$s">',
'after_widget' => '</aside>',
'before_title' => '<h1 class="widget-title subSection-title">',
'after_title' => '</h1>',
)
);
}
add_action( 'init', 'my_lightning_register_widget_area' );
詳しくは register_sidebar を御覧ください。
作業工程その3:作成したウィジェットエリアを挿入
先程作成したウィジェットエリアを挿入します。
今回は3カラムレイアウトを実現するという目的があるため挿入位置は lightning_additional_section となります。
この工程も子テーマの functions.php かプラグインの PHP に下記コードをコピー&ペーストすれば完了です。
function my_lightning_add_sidebar() {
echo '<div class="col subSection addSection addSection-col-three baseSection addSection-base-on">';
if ( is_active_sidebar( 'lightning-addtional-sidebar' ) ) {
dynamic_sidebar( 'lightning-addtional-sidebar' );
}
echo '</div>';
}
add_action( 'lightning_additional_section', 'my_lightning_add_sidebar' );
2行目の addSection-base-on の部分はセクションベースが不要ならつけなくても OK です、
作業工程その4:CSSでレイアウトを調整
3カラムレイアウトは深く考えるとかなり複雑になります。
というわけで全部書こうとすればキリがないので今回はこのサイトで採用している CSS のコードを掲載します。
このサイトでは下記設計思想のもとで作られています。
上記を満たすコードは下記のようになります。
.container,
.siteHeadContainer.container .navbar-header,
.gMenu_outer nav,
.header_scrolled .gMenu_outer nav {
padding-left: 0;
padding-right: 0;
}
.siteContent > .container > .row,
.siteContent.siteContent-base-on > .container > .row {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-left: 0;
margin-right: 0;
}
.sideSection,
.mainSection,
.addSection {
flex-basis: auto;
float: none;
margin-left: 0;
margin-right: 0;
}
@media (min-width: 1200px) {
.addSection-base-on {
padding: 2.4rem 2rem;
}
}
@media (min-width: 992px) {
.addSection-base-on {
padding: 2.4rem 1.7rem;
}
}
@media (min-width: 768px) {
.addSection-base-on {
padding: 2rem;
}
}
@media (min-width: 576px) {
.addSection-base-on {
padding: 1.7rem;
}
}
.addSection-base-on {
background-color: #fff;
padding: 1.4rem;
}
.siteHeader .headerTop .container {
padding-left: 0;
padding-right: 0;
}
@media ( max-width: 1079px) {
.headerTop {
display: block;
}
.headerTop .headerTop_description {
text-align: center;
}
.headerTop nav {
display: none;
}
.headerTop .headerTop_contactBtn {
display: none;
}
}
@media ( max-width: 1079px) {
body.device-pc .vk-mobile-nav-menu-btn {
display: block;
}
.siteHeader_logo {
font-size: 1.6rem;
float: inherit;
text-align: center;
display: block;
margin: 0 auto;
padding: 0 45px;
}
.siteHeader_logo.navbar-brand {
float: none;
height: auto;
}
.navbar-header {
float: none;
}
.siteHeadContainer.container .navbar-header {
padding: 0;
}
.gMenu_outer {
display: none;
}
}
@media ( max-width: 1079px) {
.container,
.siteHeadContainer.container .navbar-header,
.gMenu_outer nav,
.header_scrolled .gMenu_outer nav {
width: calc( 100% - 40px);
max-width: calc( 100% - 40px);
}
.mainSection,
.sideSection,
.addSection {
width: 100%;
max-width: 100%;
}
.addSection {
display: none;
}
}
@media ( min-width: 1080px) and ( max-width: 1439px) {
.container,
.siteHeadContainer.container .navbar-header,
.gMenu_outer nav,
.header_scrolled .gMenu_outer nav {
width: 1040px;
max-width: 1040px;
}
.mainSection {
width: 680px;
max-width: 680px;
margin-right: 40px;
order: 0;
}
.sideSection {
width: 320px;
max-width: 320px;
order: 1;
}
.addSection {
display: none;
}
}
@media ( min-width: 1440px) and ( max-width: 9999px) {
.container,
.siteHeadContainer.container .navbar-header,
.gMenu_outer nav,
.header_scrolled .gMenu_outer nav {
width: 1400px;
max-width: 1400px;
}
.mainSection {
width: 680px;
max-width: 680px;
margin-left: 40px;
margin-right: 40px;
order: 1;
}
.sideSection {
width: 320px;
max-width: 320px;
order: 2;
}
.addSection {
width: 320px;
max-width: 320px;
order: 0;
display: block;
}
}
解説なようなもの
.container,
.siteHeadContainer.container .navbar-header,
.gMenu_outer nav,
.header_scrolled .gMenu_outer nav {
padding-left: 0;
padding-right: 0;
}
.siteContent > .container > .row,
.siteContent.siteContent-base-on > .container > .row {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-left: 0;
margin-right: 0;
}
.sideSection,
.mainSection,
.addSection {
flex-basis: auto;
float: none;
margin-left: 0;
margin-right: 0;
}
この部分ではレイアウトを Float ベースから Flexbox ベースに切り替えています。
あとは Bootstrap 等諸々の使用に合わせて余白等を調整しています。
@media (min-width: 1200px) {
.addSection-base-on {
padding: 2.4rem 2rem;
}
}
@media (min-width: 992px) {
.addSection-base-on {
padding: 2.4rem 1.7rem;
}
}
@media (min-width: 768px) {
.addSection-base-on {
padding: 2rem;
}
}
@media (min-width: 576px) {
.addSection-base-on {
padding: 1.7rem;
}
}
.addSection-base-on {
background-color: #fff;
padding: 1.4rem;
}
この部分で追加したサイドバーにセクションベースを適用しています。
.siteHeader .headerTop .container {
padding-left: 0;
padding-right: 0;
}
@media ( max-width: 1079px) {
.headerTop {
display: block;
}
.headerTop .headerTop_description {
text-align: center;
}
.headerTop nav {
display: none;
}
.headerTop .headerTop_contactBtn {
display: none;
}
}
モバイル時でもキャッチコピーだけでもを表示させたいのでそのためのコードを記述しています。
@media ( max-width: 1079px) {
body.device-pc .vk-mobile-nav-menu-btn {
display: block;
}
.siteHeader_logo {
font-size: 1.6rem;
float: inherit;
text-align: center;
display: block;
margin: 0 auto;
padding: 0 45px;
}
.siteHeader_logo.navbar-brand {
float: none;
height: auto;
}
.navbar-header {
float: none;
}
.siteHeadContainer.container .navbar-header {
padding: 0;
}
.gMenu_outer {
display: none;
}
}
メディアクエリを書き換えているのでヘッダー部分にも調整を入れています。
@media ( max-width: 1079px) {
.container,
.siteHeadContainer.container .navbar-header,
.gMenu_outer nav,
.header_scrolled .gMenu_outer nav {
width: calc( 100% - 40px);
max-width: calc( 100% - 40px);
}
.mainSection,
.sideSection,
.addSection {
width: 100%;
max-width: 100%;
}
.addSection {
display: none;
}
}
ウィンドウ幅が 1079px 以下の場合は1カラムレイアウトになるようにしています。
メインのサイドバーはメインカラムの下に配置し、追加したサイドバーは表示しないようにしています。
.siteHeadContainer.container .navbar-header,
.gMenu_outer nav
上記の部分は Lightning Fort / Pale / Variety でコンテナ幅を変えてもヘッダーの幅が変わらないので一緒に変えています。
それ以外のスキンでは不要なので削除してください。.container の後ろのカンマも不要です。
@media ( min-width: 1080px) and ( max-width: 1439px) {
.container,
.siteHeadContainer.container .navbar-header,
.gMenu_outer nav,
.header_scrolled .gMenu_outer nav {
width: 1040px;
max-width: 1040px;
}
.mainSection {
width: 680px;
max-width: 680px;
margin-right: 40px;
order: 0;
}
.sideSection {
width: 320px;
max-width: 320px;
order: 1;
}
.addSection {
display: none;
}
}
ウィンドウの幅が 1080px 以上 1439px 以下のときは2カラムレイアウトになります。
サイドバーが左側に表示され、その右にコンテンツエリアが表示されます。
Flexbox レイアウトを採用している場合、 order を使うことで簡単に要素の順番を入れ替える事ができます。
@media ( min-width: 1440px) and ( max-width: 9999px) {
.container,
.siteHeadContainer.container .navbar-header,
.gMenu_outer nav,
.header_scrolled .gMenu_outer nav {
width: 1400px;
max-width: 1400px;
}
.mainSection {
width: 680px;
max-width: 680px;
margin-left: 40px;
margin-right: 40px;
order: 1;
}
.sideSection {
width: 320px;
max-width: 320px;
order: 2;
}
.addSection {
width: 320px;
max-width: 320px;
order: 0;
display: block;
}
}
ウィンドウ幅が 1440px 以上の場合は3カラムレイアウトを生成します。
他の CSS のメディアクエリによる干渉を回避するため max-width: 9999px も条件に追加しています。
まとめ
今回のまとめは下記のようになります。
そんなところです。
次回予告
さすがに自力で実装するのは結構だるかったのでこの際プラグイン化してみました。
というわけで、次回はそのプラグインについて紹介していきたいと思います。
投稿者プロフィール
最新の投稿
Lightning2023年12月20日Lightning G3 Three Column Unit をアップデートした話
Lightning2021年12月15日Lightning G3 のスキンを自作してみた話
Lightning2021年12月10日Lightning Three Column Unit を G3 対応した話
Lightning2020年12月18日Lightning3カラム化計画 その2 ~プラグイン編~