WordPressテーマ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”入力し検索
- インストール後に有効化
- カスタムCSS&JSをクリック
- CSSコードの追加をクリック
- タイトルを入力
- CSSを書き込むか、コピペします
- 公開をクリック
Lightningのロゴマークの表示領域をブラウザいっぱいに広げる
ロゴマークやメイン画像をブラウザいっぱいに配置
メイン画像をブラウザいっぱいに配置して、インパクト&ヴィジュアルを強化！
- トップページからだと、上部メニューの「カスタマイズ」から、ダッシュボードからは、サイドメニューの「外観 → カスタマイズ」から
- 画像を選択してアップロード※アップロードする画像がブラウザサイズより小さい場合は、横いっぱいには表示されない。大きい場合は縮小されるので問題なし。推奨の画像幅はフルHD以上
- 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のヘッダーメニューをブラウザ幅に配置
グローバルメニューをブラウザ幅最大に配置
- 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>- 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のサブメニューの文字色・背景色と、マウスオーバー時の文字色・背景色をカスタマイズ
- 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のグローバルメニューの下の影（シャドー ライン）を消す
- 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 );
}
