【TIPS】Lightning

WordPressテーマ「Lightning」のカスタマイズ(追加CSS)に関するメモ

①トップ/ヘッダー

メニュー文字をノーマル

.gMenu>li .gMenu_name {
	font-weight: normal;
}

メニュー下線の色変更

.gMenu > li::before {
	border-bottom-color:#fff;
}

メニュー中央

.gMenu_outer {
	margin: 0 auto 10px;
	float:none;
}

ヘッダーロゴとメニューを中央

2021年6月 確認

.site-header--layout--nav-float .site-header-container {
	display: flex;
  flex-direction: row;
  flex-wrap: wrap;
	justify-content: center;
}

.site-header--layout--nav-float .site-header-logo img {
	margin:0 auto;
}

2021年6月 以前

@media (min-width: 992px) {

	.container.siteHeadContainer {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.navbar-header {
		width: 100%;
		order: 0;
		float: none;
	}

	.siteHeader_logo {
		float: none;
		width: 100%;

	}

	.siteHeader_logo img {
		margin: 0 auto;
	}

	.gMenu_outer {
		width: 100%;
		order: 1;
		float: none;
	}

	ul.gMenu {
		float: none;
		display: flex;
		justify-content: center;
	}
}

ロゴの縦サイズ

.site-header-logo  img {
	max-height: 120px;
}

スクロール時のヘッダー(メニュー上部)固定

.gMenu_outer {
	margin-top: 70px;
}

ヘッダー固定解除

@media (min-width: 768px) {
  .header_scrolled .gMenu_outer {
    display: none;
  }
}

ヘッダー右上に電話番号や画像

functions.phpに以下


/* ロゴの横に表示するパーツ */
function my_lightning_header_logo_after() {
echo <<<EOM
<div class="logo-after">
<img src="http://xxx.jpg">
</div>
EOM;
}
add_action('lightning_header_logo_after', 'my_lightning_header_logo_after');

cssに以下

/* ロゴ右側のブロック */
.logo-after {
    display: block;
    width: 200px;
    float: right;
}
 
.logo-after img {
    max-height: 60px;
}
 
/* ヘッダー幅を100%に */
.navbar-header {
    width: 100%;
}
 
@media (max-width: 991px) {
    .logo-after {
        width: 100%;
        margin-top: 10px;
        margin-bottom: 10px;
        text-align: center;
    }
}
 
/* 新バージョン対応 */
@media (min-width: 1200px) {
    .gMenu_outer,
    .gMenu,
    .gMenu > li {
        width: 100%;
    }
}
 
@media (max-width: 1199.98px) {
    .siteHeader_logo {
        width: unset;
    }
}

②見出し

見出しの装飾解除

.subSection-title, h3 {
	border-bottom: 0;
}

.subSection-title:after, h3:after {
	border-bottom: 0;
}

③フッター

コピーライト非表示

2021年6月 確認

.site-footer-copyright p:nth-child(2) {
	display:none;
}

2021年6月 以前

footer .copySection p:nth-child(2) {
    display:none !important;
}

フッターの背景色

.section.siteFooter{
	background:#000000;
	color:#ffffff;
}

フッター文字色

.widget_nav_menu ul li a {
	color:#fff;
}