【WordPress / CSS】３カラムにカスタマイズするためのCSS【カスタマイズ】

３カラムにカスタマイズするためのCSS

/* 3カラム化のためのウィジェットエリア作成 */

function my_lightning_register_widget_area() {
	register_sidebar(
		array(
			'name'          => '追加サイドバー',
			'id'            => 'lightning-addtional-sidebar',
			'description'   => '３カラムレイアウトのみ表示',
			'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' );

 

/* 作成したウィジェットエリアの挿入 */

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' );

 

/* 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;
}

 

/* 余白調整 */

@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 以下の場合は１カラムレイアウト */

@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 以下のときは２カラムレイアウト */

@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;
	}
}

 

※参考サイト

その１
https://www.drill-lancer.com/wordpress_info/lightning-three-column-001

その２
https://www.drill-lancer.com/wordpress_info/lightning-three-column-002

その３
https://www.drill-lancer.com/wordpress_info/lightning-g3-three-column-unit-release