1. HOME
  2. ブログ
  3. TIPS
  4. 【TIPS】Lightning

BLOG

ブログ

TIPS

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

②見出し

見出しの装飾解除

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

参考動画

関連記事