南大阪・泉州地域でのホームページ構築・システム開発

お問い合わせ
お問い合わせ

WordPressのテーマ「Lightning」カスタマイズのあれこれ

Yukinobu Asakawa

本記事は広告が含まれる場合があります。

個人的にも使用頻度の多い、WordPressの公式テーマ「Lightning」。Bootstrapベース+「VK All in One Expansion Unit」でカスタマイズしやすく、企業や店舗のコーポレートサイト制作に非常に相性の良いテーマです。
コーディングによるカスタマイズが殆ど必要ないくらい高機能ですが、実際にサイト制作していると、どうしても痒いところに手が届かないこともありますので、備忘録的にカスタマイズの手順をまとめてみます。

カスタマイズを行う際には、必ずバックアップを行い、ローカル環境などの開発・検証用のWordPressを用意してからにしましょう。

1.ロゴを原寸サイズのまま表示したい

Lightningのロゴ画像の推奨サイズ は、 280×60pxとなっています。大きめのロゴ画像を挿入すると、縮小されてしまいます。元々横長のロゴ画像であれば特に問題ないかもしれませんが、高さがあるロゴ画像の場合などは縮小されてしまい、バランスが悪くなります。そういった場合には以下のCSSを追加することで、原寸のままロゴを挿入することが可能です。

前提条件:
WordPress4.7以降
Lightning ver3.0.0以降

カスタマイザーの追加CSSに記載すれば、元画像どおりのサイズで表示されます。

/*ロゴ画像を元画像どおりのサイズで表示*/
.navbar-brand img {
max-height: none !important;
}

 

なお、子テーマをインストールして、その中にあるstyle.cssに上記のコードを追加するという方法でも構いません。子テーマのインストール・設定については以下の記事が詳しく記載されています。

WordPressで子テーマを作成してカスタマイズする方法
https://webst8.com/blog/wordpress-child-themes/

2.コピーライトを消したい

Lightningはインストールすると、以下のコピーライトが自動的に挿入されます。

モックアップサイトや個人のブログであれば、このままでも特に問題はないかもしれませんが、コーポレートサイトのような商用サイト制作の場合には、「Powered by WordPress with Lightning Theme & VK All in One Expansion Unit by Vektor,Inc. technology.」の部分を削除（消したい）という要望が多いように思います。

PHPファイルから該当部分を削除するという方法でも出来ますが、テーマのアップデートがあった場合には上書きされてしまいますので、ここは有料にはなりますが、以下のプラグインを導入することをお勧めします。一度購入すると、複数サイトで利用してもライセンスポリシー上はOKのようです。

コピーライトカスタマイザーの購入はこちら

※2018/8/1追記：記事を見返した時に説明不足と感じましたので追記します。この方法以外でもCSSカスタマイズすることで非表示にすることはできますが、テーマ開発者の方に敬意を表し、この記事では紹介しないことにします。

3.グローバルメニューのフォントサイズを大きくしたい

Lightningのデフォルトのグローバルメニューではメニューの文字が小さいというご意見を伺うこともあります。デフォルトでは14px。この場合にも追加でカスタマイザーの追加CSSに以下のようなコードを追加することで文字を大きくすることが可能です。

/* グローバルメニューのフォントサイズ */
ul.gMenu li{
font-size: 18px;
}
/* グローバルメニュー2行目のフォントサイズ */
.gMenu_description {
font-size: 14px;
line-height: 120%;
}

 

 

4.画面スクロール時のヘッダー固定を解除・ヘッダーの高さ自動調整機能をオフにする

Lightningのデフォルト機能では、ヘッダー部分がスクロール時に画面上部に固定されるのが特徴です。この機能はサイトロゴやグローバルメニュー（Header Navigation）が常に表示されるため便利な機能だと個人的には思いますが、この機能は不要というご意見も一定程度あるようです。その場合には、子テーマのfunctions.phpに記述すればヘッダー固定を解除することができます。

/* 固定ヘッダーを解除 */
add_filter( 'lightning_headfix_enable', 'lightning_headfix_disabel');
function lightning_headfix_disabel(){
    return false;
}

なお、ヘッダーの高さ調整をオフにしたい場合、やはり同様に子テーマのfunctions.phpに以下のコードを記述します。

/*ヘッダーの高さ調整をオフにする*/
add_filter( 'lightning_header_height_changer_enable', 'lightning_header_height_changer_disabel');
function lightning_header_height_changer_disabel(){
    return false;
}

 

参考サイト
https://lightning.nagoya/ja/archives/remove-header-fixed

 

5.ヘッダーの色を変更したい

Lightningのデフォルトのヘッダーは白色で、カスタマイザーから色を自由に変更することは現時点ではできません。しかし、ヘッダー左側に挿入するロゴ画像と同色にしたいなどの要望もあります。
その場合には、追加CSSあるいは子テーマのstyle.cssに以下のコードを記述します。

/*ヘッダーの部分の色をロゴカラーと同色に変更*/
.siteHeader {
background-color: #fbe9d5;
}

 

赤字の部分がカラーコードになります。この部分にご自身が変更したいカラーコードを入れればOKです。

Before

After

まとめ

Lightningの場合、元々の標準機能が高機能でかなりの部分がノンコーディングでデザインの微調整が可能ですが、どうしてもという場合にはCSSを追加したり、PHPプログラムを追加することで、さらに自由度が高まります。
なお、繰り返しになりますが、カスタマイズを行う際には必ずバックアップを取ってから行いましょう。

もし宜しければ、以下の記事も併せてご参考にしてみてください。

 

WordPressのテーマ「Lightning」カスタマイズのあれこれ 〜ヘッダーカスタマイズ編〜

 

お問い合わせはこちらから

南大阪を中心に活動しているシステムエンジニアです。これまでの経験から、ビジネス課題について一緒になって考え、課題解決のためにサポートさせていただきます。些細なご相談でも構いません。当方に期待することやご相談内容についてお聞かせください。初回のご相談はオンラインで無償対応いたします。

連絡先：050-5050-2860
お問い合わせはこちらから
PAGE TOP