Lightningのモバイルメニューとページトップボタンをカスタマイズ！背景透過＆マークを変更する方法【コピペでOK！】

2020年5月4日2020年5月29日テーマ-Lightningのカスタマイズ＆設定

Lightningはデフォルトのテーマでも十分シンプルに綺麗なサイトが作れますが、モバイルメニューとページトップボタンがなんだか地味でカッコ悪い…と思ったことはありませんか？

初心者でも簡単に自分のサイトに合わせたデザインに変更できます！

モバイルメニューとページトップボタンのデザインを合わせて、プロっぽいビジネスサイトにしましょう。

他のbootstrap4ベースのテーマでも使えるかも？

モバイルメニューとページトップボタンのアイコンを無理やり変える方法も紹介しています。

サンプルサイト

モバイルメニューの色を背景透過に変えるカスタマイズ

CSSカスタマイズにコピペして、色を自分のサイトカラーに変更しましょう。

/* モバイルメニュー */
@media screen and (max-width: 992px){
.vk-mobile-nav-menu-btn {
	background:url('https://create-homepage.saya-to.com/wp-content/themes/lightning/inc/vk-mobile-nav/package/images/vk-menu-btn-white.svg') center 50% no-repeat rgba(255,103,152,.8);
	outline: 1px solid rgba(255,103,152,.8);
        border: 1px solid rgba(255,255,255,.8);
}
}

outlineは外枠のことで、borderが外側の枠です。ページトップボタンに合わせて加えてみました。不要な方はoutlineを削除してborderをお好みの色へ。

rgba(255,103,152,0.8)の部分でサイトカラー色を指定しています。最後の数字が背景透過率です。

#ff6798を背景透過色に変換するときは下記サイトからどうぞ。

RGBと16進数カラーコードの相互変換ツール – PEKO STEP

backgroundのURLで【vk-menu-btn-black.svg】→【vk-menu-btn-white-svg】に変えることでアイコンの色を変えています。

自分のサイトのモバイルメニューの要素を調べて、backgroundのURL部分をコピペした後でblack→whiteに変えます。

元々ライブラリに白バージョンの画像は用意されているのに、カスタマイズ箇所が見つからないのが不思議です。

サイトカラーに合わせて自動選択されているのかも？(適当)

その他にもデザインを変えたい場合は、上記のコードを書き換えたり加えたりして自分好みにしていきましょう。

モバイルメニューを丸型にするときは、内側の枠線は使えません。

モバイルメニューが隆起したように立体的に表示されます。

Lightningのモバイルメニューのアイコンを変える方法

サイトによってはモバイルメニューのアイコンを変えたくなることもありますよね。

CSSだけで無理やり変える方法がコチラ

/* モバイルメニュー */
@media screen and (max-width: 992px){
	.vk-mobile-nav-menu-btn {
		outline:1px solid #ff6798;
		border:none;
		background:transparent;
}
	.vk-mobile-nav-menu-btn:after{
		display:block;
		position:fixed;
		top:5px;
		left:8px;
		content:"\f518";
		font-family:"Font Awesome 5 Free";
		font-size:24px;
		font-weight:900;
		color:#fff;
		text-indent:0;
	}
	.admin-bar .vk-mobile-nav-menu-btn:after{
		top:calc(46px + 5px);
	}
	.vk-mobile-nav-menu-btn:before{
		position:fixed;
		top:6px;
		left:6px;
		content:"";
		width:32px;
		height:32px;
		background-color:rgba(255,103,152,0.8);
	}
	.admin-bar .vk-mobile-nav-menu-btn:before{
		top:calc(46px + 6px);
	}
}

background:transparentで元々のアイコンを削除し、outlineはページトップボタンとデザインを合わせるために加えています。

:afterの疑似要素でアイコンをFontAwesomeから指定しています。

top:5px left:8pxの部分はアイコンが中央に来るように良い感じに調整してください。

text-indent:0を入れないと文字が表示されないので注意。親要素の文字を表示させないようになっているので、これを入れないと疑似要素も文字だけ表示されない現象になります。

.admin-barとついたCSSは管理バーが表示されている場合の位置を調整するための指定です。こちらが正しくないと管理バーがあるときだけ表示が崩れるので、必ずcalc(46px + 疑似要素のtop:6px)と合わせてください。

※このカスタマイズをしていると、Lightningが更新してデザインが変わった際に表示が崩れる可能性があります。自分で調整できる方のみ使用してください。

Lightningでモバイルメニューのサイズを大きくする方法

最近では画面サイズも大きくなってきているので、モバイルメニューを大きくして目立たせたい場合もありますよね。

/*  */
/* モバイルメニュー */
/*  */
@media screen and (max-width: 992px){
	.siteHeader .container{
		display:flex;
		align-items:center;
		justify-content:center;
		height:70px;
	}
	.navbar-header{
		display:block;
		min-height:36px;
		max-height:50px;
		height:10vw;
		margin:0 auto;
		padding:0;
	}
	.navbar-brand.siteHeader_logo{
		height:100%;
	}
	.navbar-brand.siteHeader_logo,.navbar-brand.siteHeader_logo a,.navbar-brand.siteHeader_logo span{
		display:block;
		height:100%;
	}
	.navbar-brand img {
		width:auto;
		height:100%;
		max-height:100%;
}
	.vk-mobile-nav{
		padding-top:75px
	}
	.vk-mobile-nav-menu-btn {
		position: fixed;
		top: 8px;
		left: 10px;
		width: 54px;
		height: 54px;
		box-shadow:none;
		background-color:rgba(255,103,152,0.4);
		border-radius:0;
		border-color:#ff7898;
}
}

画面の大きさに合わせてスマホメニューの大きさも変わるようになっています。

そのときにヘッダー全体とのバランスが崩れないように、ヘッダーの高さやサイトロゴの位置を調整。

※他のカスタマイズをしていると上手く行かない可能性もあるので、試しに適用してみて様々な画面サイズで表示を確認してください。

※このカスタマイズをしていると、Lightningが更新してデザインが変わった際に表示が崩れる可能性があります。自分で調整できる方のみ使用してください。

ページトップへ戻るボタンの色やアイコンをカスタマイズ

ページトップへ戻るボタンを背景透過にしていい感じにする方法はこちら。

/* ページトップボタン */
.page_top_btn{
	background-color:rgba(255,103,152,0.8);
	outline-color:#ff6798;
}

メニューのカスタマイズ同様、背景透過ができるRGBを使うだけです。

Lightningのページトップボタンのアイコンを変えるカスタマイズ

ページトップボタンにもこだわりたい！矢印の形を変えたい方はこちら

/* ページトップボタン */
.page_top_btn{
	outline-color:#ff6798;
	background-color:transparent;
}
.page_top_btn:after{
	position:fixed;
	bottom:calc(3% + 36px);
	right:calc(2% + 31px);
	width:0;
	height:0;
	content:"\f062";
	font-family:"Font Awesome 5 Free";
	font-weight:900;
	font-size:24px;
	color:#fff;
	text-align:center;
}
.page_top_btn:before{
	position:fixed;
	bottom:calc(3%);
	right:calc(2%);
	width:40px;
	height:38px;
	content:"";
	color:#fff;
	text-align:center;
	background-color:rgba(255,103,152,0.8);
	border:1px solid #fff;
}

メニューのアイコンカスタマイズと同じで、FontAwesomeでアイコンを選んで張りつけてます。

ページトップボタンの元々のアイコンをbackground-color:transarentで消し、疑似要素でページトップボタンの背景を作り直しています。

bottom:calc(3% + 36px); right:calc(2% + 31px); の部分はページトップボタンの位置%＋アイコンのための調整pxになっているので、アイコンが中央に来るようにpxの方を良い感じに調整してください。