2020年9月24日 / 最終更新日時 : 2020年9月29日 koji Lightning

WordPressテーマLightningのカスタマイズ

Lightningカスタマイズ 完成イメージ


■ 完成見本

Lightningカスタマイズ完了

このページで学ぶこと（できること）

サイドメニューの追加CSSを使わずに、Simple Custom CSS and JS に書き込み

Lightningをカスタマイズする際のサイドメニューにある、追加CSSに書き込まず、Simple Custom CSS and JS プラグインをインストールし、そちらにCSSを書き込みます。
ライトニングの環境により、サイドメニューの追加CSSに、コメントアウトを書き込めない場合の対処法。コメントアウトを書かない場合は不要

ライトニングの左上の小さなロゴをブラウザいっぱいに配置

Lightningの小さなロゴマーク部分を大きくして、メイン画像または、ロゴマークとして大きく表示

ライトニングのヘッダーメニュー、グローバルメニューをカスタマイズ

Lightningのヘッダーメニューをブラウザいっぱいに広げて配置

ライトニングのヘッダーメニュー、グローバルメニューを2段にカスタマイズ

Lightningのヘッダーメニューを2段にカスタマイズ。例えば、英語表記のメニューに対する日本語をその下に小さめに表示

Lightningのサブメニューをカスタマイズ

Lightningのサブメニューの色（バックグランドカラー）のカスタマイズ

Lightningのグローバルメニューの下の影（シャドー ライン）を消す

Lightningのグローバルメニューの下の影（シャドー ライン）をカスタマイズして消去

Simple Custom CSS and JS をインストール

Simple Custom CSS and JS をインストール

使い勝手が良いので、最初からインストールすることをお勧めします！

Simple Custom CSS and JS をインストール
  1. 検索窓に”Simple Custom CSS and JS”入力し検索
  2. インストール後に有効化
  3. カスタムCSS&JSをクリック
  4. CSSコードの追加をクリック
  5. タイトルを入力
  6. CSSを書き込むか、コピペします
  7. 公開をクリック

Lightningのロゴマークの表示領域をブラウザいっぱいに広げる

ロゴマークやメイン画像をブラウザいっぱいに配置

メイン画像をブラウザいっぱいに配置して、インパクト&ヴィジュアルを強化！

Lightningのロゴマークの表示領域をブラウザいっぱいに広げる
  1. トップページからだと、上部メニューの「カスタマイズ」から、ダッシュボードからは、サイドメニューの「外観 → カスタマイズ」から
  2. 画像を選択してアップロード※アップロードする画像がブラウザサイズより小さい場合は、横いっぱいには表示されない。大きい場合は縮小されるので問題なし。推奨の画像幅はフルHD以上
  3. CSSコードを貼り付け（コピペ）
/* ヘッダー画像を横幅いっぱいに広げる */
.navbar-header {
	margin-left: calc(50% - 50vw) !important;
	width: 100vw !important;
}
/* 画像の上下の余白を調整
環境により数値を変えながら
上下の余白を無くします 
トップページ用とサブページ用 */
h1.navbar-brand,
p.navbar-brand {
	margin-bottom: -0.26em !important;
	margin-top: -0.6em !important;
}
.navbar-brand img {
	max-height: none;
	max-width: 100%;
}
.siteHeader_logo {
	margin: 0px !important;
	padding: 0px !important;
}

Lightningのヘッダーメニューをブラウザ幅に配置

グローバルメニューをブラウザ幅最大に配置

  1. CSSコードを貼り付け（コピペ）
/*
各要素のリセット
*/
#gMenu_outer {
	padding: initial !important;
	margin: initial !important;
	width: initial !important;
	height: initial !important;
	float: initial !important;
	content: initial !important;
}
/* メインメニューを横幅いっぱい */
#gMenu_outer,
#gMenu_outer ul {
	margin-left: calc(50% - 50vw) !important;
	width: 100vw !important;
}
#gMenu_outer li {
	width: 100% !important;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #FFF;
}
/*
メニューの文字色
*/
ul.gMenu li a {
	color: #EFFFBF;
	background-color: #008DC1;
	padding: 10px 0 8px 0 !important;
}
ul.gMenu li a:hover {
	color: tomato !important;
	background-color: #008DC1;
}

Lightningのヘッダーメニューを2段にカスタマイズ

Lightningのヘッダーメニューを2段にカスタマイズ

下のHTMLソースは、ヘッダーメニューを2段化にする、メニュー部分のページソースを抜粋したものです。
[menu-item-22]の部分は、下のメニューでいうと、「トップページ」にあたります
[menu-item-21]の部分は、下のメニューでいうと、「制作見本」にあたります
[menu-item-23]の部分は、下のメニューでいうと、「会社概要」にあたります
[menu-item-20]の部分は、下のメニューでいうと、「お問い合わせ」にあたります 

<div id="gMenu_outer" class="gMenu_outer">
<nav class="menu-%e3%83%a1%e3%82%a4%e3%83%b3%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc-container">
<ul id="menu-%e3%83%a1%e3%82%a4%e3%83%b3%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc" class="menu gMenu vk-menu-acc">
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-2 current_page_item"><a href="https://wp-f.com/"><strong class="gMenu_name">トップページ</strong></a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://wp-f.com/%e3%81%8a%e5%95%8f%e3%81%84%e5%90%88%e3%82%8f%e3%81%9b/"><strong class="gMenu_name">制作見本</strong></a></li>
<li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://wp-f.com/%e4%bc%9a%e7%a4%be%e6%a6%82%e8%a6%81/"><strong class="gMenu_name">会社概要</strong></a></li>
<li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home"><a href="https://wp-f.com/"><strong class="gMenu_name">お問い合わせ</strong></a></li>
</ul>
</nav>
</div>
  1. CSSコードを貼り付け（コピペ）

まず、トップページのメニューを2段化にします。
トップページは、上のソースで調べると[menu-item-22]なので、下のCSSソースの[#menu-item-22]がトップページにあたり、 [content: ‘top’; ]の部分の top が、メニューの2段目に表示される文字です。以下、同じように設定していきます。 

/* メインメニューを2段化 */
#menu-item-20 > a:after {
	content: 'inquiry';
	display: block;
}
#menu-item-21 > a:after {
	content: 'sample';
	display: block;
}
#menu-item-22 > a:after {
	content: 'top';
	display: block;
}
#menu-item-23 > a:after {
	content: 'company';
	display: block;
}

Lightningのサブメニューをカスタマイズ

Lightningのサブメニューの文字色・背景色と、マウスオーバー時の文字色・背景色をカスタマイズ

  1. CSSコードを貼り付け（コピペ）
/*
二次メニュー（サブメニュー）周り
*/
#gMenu_outer .sub-menu {
	width: 100% !important; 
	margin: 0px !important;
	padding: 0px !important;
	left: 0px !important;
}
/*
二次メニュー（サブメニュー）色設定
*/
#gMenu_outer .sub-menu a:hover {
	font-weight: bold;
	background-color: gold !important;
}
#gMenu_outer .sub-menu a {
 	padding: 1.0em !important;
	background-color: orange !important;
	font-weight: bold;
}

Lightningのグローバルメニューの下の影（シャドー ライン）を消す

Lightningのグローバルメニューの下の影（シャドー ライン）を消す

  1. CSSコードを貼り付け（コピペ）
/* ナビ下の影を消す */
header.siteHeader {
	border-bottom: 0px;
	box-shadow: 0px 0px 0px;
}

/* おまけ2つ */
/* サブタイトル の背景を消す
どの場面でも使えます
背景色を"無"に設定 */

.page-header {
	background-color: transparent;
}

/* マウスオーバー時にリンク画像を透過
リンク画像にカーソルを合わせると透過します
数値を変えれば透過度を変えられる*/

a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=50);
	-ms-filter: alpha( opacity=50 );
}
カテゴリー
Lightning
WordPress

前の記事

お名前.comのサーバにWordPressをインストール
2020年9月15日
アフィリエイト

次の記事

外部流出厳禁-WordPressを無料ではじめる方法
2020年10月4日