Lightningのバージョンアップでずれる

忘れないように自分用記事。

弊社のサイトはWordpressを使って作成しています。Wordpressはテーマというスキンを使うことによってサイトの基礎を構築してくれます。弊社はLightningというテーマをベースに、カスタム用にLightningの「子テーマ」を用意してそれでCSSをいじったりしています。CSSをカスタムするとサイトのデザインを変えることができるのですが、子テーマを準備しないで親テーマのCSSをカスタムするとテーマのバージョンアップの度にカスタムした部分がぶっ飛びます。弊社のサイト、地味に見えて結構細かい所をいじっています笑

で、このLightningというテーマはバージョンアップがちょいちょいなされるのですが、今回Lightningのバージョンが6から7に変わった時にPCで閲覧した時、サイトのデザインが別モノになってしまっていたのです。具体的にはヘッダーロゴ（株式会社オズファーレのロゴとタイトル）とグローバルメニュー（会社概要とか）が今まではロゴが左、メニューが右の、1段で収まっているデザインだったのにグローバルメニューが１段下がって2段表示になりかなり空白の目立つスタイルになっていました。他にも記事のタイトルがセンターになっていたり1行の文字表示数が変わっていたり。具体的には見てもらえばわかると思うので、画像を貼ります。

従来のデザイン

バージョンアップで変わったデザイン

Lightningはシンプルでまとまっているデザインが気に入って使わせて頂いてるのですが、なーんかこう白い部分が多くなっちゃってまとまってない気がする新デザイン。センター寄せの記事タイトルも弊社のサイトには合ってない気がします。PC以外の、タブレットなんかで見る分には良さそうだけど…

そういうわけで前のデザインに戻せないのかなぁと検索するも目立った記事や具体的な解決案は見つからず…これ、もしかして更新の際に注意事項として書いてあったのかなぁと思いつつ、Wordpress内をいろいろいじくって気づきました。

外観＞カスタマイズ＞Lightningデザイン設定

で、この画面になるのですが、Lightningのバージョンアップ後、デザインスキンがOrigin2(Bootstrap4)に変わっていたんです。ここを元のOrigin(Bootstrap3)に変更すれば以前のデザインに戻ります。

なんてことのない作業で元に戻るので良かったですが、突然変わってしまったのであせったおよでした。そんなわたしのように焦った人のために共有用として残しておきます。まぁ、おそらくちゃんとバージョンアップ前の説明を読んでいればわかることだと思いますが、急だと焦るんですよね…

ちなみにOrigin2のデザインスキンにすると画面を下にスクロールした時に上部にグローバルメニューがおっかけ表示されて便利っちゃ便利ですけど、わたしはシンプルデザインの方を選びます笑

ついでですが、この記事から写真をクリック（タップ）するとぴょんと飛び出るようにプラグインをいれました。「Easy FancyBox」というプラグインを導入しただけなんですけど、写真がぴょんぴょん飛び出すのが面白いです笑。プラグインで自由にカスタムできるのはWordpressのすごいいいところですよねぇ。このEasy FancyBoxはかなりおすすめです。これも自分用メモです笑