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

WordPress のテーマ Lightning はなかなか魅力的なテーマだと思います。そこで、当サイトをLightning に移行しカスタマイズすることにしました。

Lightning のカスタマイズについては、Lightning の公式ページの他に、西沢直木氏他の投稿があります。

Lightningのヘッダーのカスタマイズ

Lightningのフッターのカスタマイズ(ウィジェットの列数変更など)

次のブログでもカスタマイズ方法が紹介されています。

Lightning の改造

さらに、Lightning は、カスタマイズしやすいように作られていて、このような設定ガイドも公開されています。

Lightning 設定ガイド

しかし、これらのカスタマイズではできないこともあって、私なりにやってみました。

 

Lightning のの子テーマの作り方

Litning 公式ページの「設定ガイド」を開くと、次の子テーマ用のサンプルが用意されてダウンロードできるようになっています。

次のファイルがダウンロードされるので、子テーマのフォルダに収めます。

特徴的なのは、style.css に @import url(); の指定がないことです。Lightning は元の style.css をインポートせずに使うようになっています。

 

Lightning のスタイルシートは特殊なところにある

通常テーマのスタイルシートはテーマフォルダの直下に style.css として存在します。ところが Lightning のこの style.css を開いてみると、このように何も書かれていません。

これでは、CSS を変更したくてもどのように変更していいかわかりません。

それではどこにあるかというと、特殊なところにあります。サイトのソースを表示してみると、

このように、テーマの下に design_skin/origin/css/style.css と記述されています。これを開いてみると細かな CSS が書かれています。ここから変更したいCSS 部分を子テーマの style.css にコピーして変更することにします。

<<追記>>

この記事を書いた2017年6月の時点では、上の場所にこのテーマの完全な style.css がありました。しかし、現在の style.css の中身は空っぽです。他に移動したようです。

子テーマにCSSを追加するには、やはりインスペクターでCSSを検索して書き込むしかないようです。

インスペクターはブラウザーに用意されていて、調べたい部分を右クリックして表示されるメニューで、

Google Chrome ならば「検証」
Safari ならば「要素を調査」
Internet Explorer ならば「要素の検査」

をそれぞれクリックすると、対象の HTML と CSS が表示されます。いずれも、F12 を押した時に表示される、デベロッパー・ツールと同じものです。

この使い方については、西沢直木氏の下記ページを参照するのがよいでしょう。

BizVektorのCSSの直し方

 BizVektor に限らず、どのテーマでも応用できるものです。

カスタマイズ例:ページタイトルの調整

Lightning のページタイトルは特殊で、なかなか良いのですがこのサイトにはバランスが良くありません。フォントも縦幅も大きすぎると思います。

 

Chrome のWebデベロッパーツールで該当するのは page-header クラスで指定されていることがわかりますので、先ほどのスタイルシートを探しますと、次の定義が見つかります。

この部分を子テーマの style.css にコピーして、 font-size や lne-height などいろいろ試して調整してみます。結局このように font-size を下げれば良いバランスになりました。

Lightning の見出しも特殊な設定をしていますので、h1~h6 を探して変更することができます。

お知らせ

会員数150万人突破!日本最大級のクラウドソーシングサービス「クラウドワークス」メールアドレスのみの簡単登録で今から在宅ワークを始められます。


Follow me!


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください