無料版「Lightning」は、無料とは思えないほどの高機能なWordPressテーマですが、有料版と違ってヘッダーメニュー周辺のレイアウトを変更できません。

今回、比較的 簡単なCSSを使ってレイアウトのカスタマイズが出来たので備忘録としてメモしておきます。

テーマLightningに興味のある方は参考にしてみてください。

ロゴとメニューの配置を変える

無料版 Lightningのヘッダーはサイトロゴとヘッダーナビのブロックが、CSSフレックスボックス(display:flex)で横並びになっています。

ここのフレックスボックスを(display: block; を使って)解除して、縦積みにします。

ダッシュボード ⇒ カスタマイズ ⇒ 追加 CSS に以下のCSS記述します。

div#site-header-container {
   display: block;
 }

ヘッダーロゴとナビメニューが縦に積まれ2段で表示されました。↓

ナビメニューをセンター(中央)に配置します。

ダッシュボード ⇒ カスタマイズ ⇒ 追加 CSS に以下のCSS記述します。

.global-nav--layout--float-right {
margin-left: auto;
margin-right: auto;
width: 30em;
}

ナビメニューがセンター(中央)に配置されました。↓

サイトロゴをセンター(中央)に配置します

ダッシュボード ⇒ カスタマイズ ⇒ 追加 CSS に以下のCSS記述します。

.site-header--layout--nav-float .site-header-logo {
    margin-left: auto;
    margin-right: auto;
    width: 10em;
}

サイトロゴがセンター(中央)に配置されました。

CSSのまとめ

/* サイトロゴとヘッダーナビを縦に積む */
div#site-header-container {
   display: block;
 }

/* ヘッダーナビをセンターに */
.global-nav--layout--float-right {
    margin-left: auto;
    margin-right: auto;
    width: 30em;
}

/* サイトロゴをセンターに */
.site-header--layout--nav-float .site-header-logo {
    margin-left: auto;
    margin-right: auto;
    width: 10em;
}

参考サイト:無料テーマLightningでヘッダーレイアウトを調整する方法 (web-children.com)

補足

ロゴやナビを中央に配置する際に text-align のようなプロパティが効かなかったのでこんな感じにしてみました。 widthプロパティの値を変えると位置や大きさが変わります。

また、開発元の(株)ベクトルさんのスタッフブログに

CSSでプチカスタマイズ!Lightning標準デザインのロゴとヘッダーメニューを中央に配置する(PC版のみ)方法

という投稿を見つけましたが、情報が古く(2017年12月6日)そのままでは反映されませんでした?G2用のコードみたいです。

他にも「【CSSカスタマイズ】Lightning でヘッダーナビゲーションにアイコンをつけたデザインパターン紹介 」と言う記事も面白そうでしたが「G3 Pro Unit」向けだったので今回は試していません、、、

まとめ

今回、無料版Lightningを使ってヘッダーブロックの位置を修正してみました。

あまりCSSのカスタマイズに時間をかけられない場合は、有料版 G3 Pro Unit を使用する事をお薦めします。

有料版のプラグイン「G3 Pro Unit」を追加すれば様々なヘッダーレイアウトが可能となり、飛躍的にデザインの自由度がアップします!

WordPressのヘッダーまわりのレイアウトデザインは、テーマによって決まっていて変更することが難しいことが多いと思います?

この辺がWordPressの難しいところかもしれません、、

備忘録でした

Lightning G3 Pro Pack(アップデート期間1年)

ちなみに自分が普段使用しているのは Proパックで、旧G2のLightningProとG3ProUnitがライセンスがセットになっています。
1年~5年の有料ライセンスですが1ライセンスで複数のサイトに無制限にインストール出来ます。超高機能でBlockの種類も多く、常に最新のWordPressに対応して頻繁にアップデートされています。ただ、以前から LightningPro(G2)を使用している場合は、あまり必要ではないかもしれません?ライセンス期限が切れても更新が止まるだけでそのまま使用できます。