Lightning 7.0 / Lightning Pro 2.0 での仕様について

次期メジャーバージョンでの仕様について順次記載していきます。

開発中のバージョンは 無料版は GitHub から、Pro版は Slack の #_開発状況と日報など チャンネルからダウンロードできます。
※開発中のバージョンのため動作・表示保証はまったくしていません。

メインカラムレイアウト用クラスの指定について

Gridシステムでのclass指定の廃止

Lightning は Bootstrap の利用を想定しているため、メインカラム(.mainSection)とサイドバー(.sideSection)のレイアウトを col-md-8 や col-md-4 などの グリッド用クラスで制御していましたが、Bootstrap4版スキンでは、以下の理由により.mainSectionと.sideSecctionのレイアウト指定のclass名がBootstrapのグリッド指定用classではなくなります。

そもそも12分割のサイズではない

12分割で 8 : 4 では .mainSection と .sideSection の間が狭すぎますが、従来のBootstrap3版のように col-md-3 col-md-offset-1 では col-md-offset-1 分の余白はさすがに広すぎるので結局幅をcssで上書きする事になる。

.col-md-8 指定ではブレイクポイントの変更に対応できない

従来 col-md-8 指定したとして、開発者側の仕様変更あるいはユーザーがカスタマイズで後からブレイクポイント変更したいとなったら場合に、col-lg-8 にクラス名を変更するのか、それとも col-md- のブレイクポイントをCSSで上書きという事になる。

テーマの出力するclass名が .col-md-8 指定じゃなくなる可能性 及び .col-md-8 にデザインカスタマイズするユーザーが発生してしまう

前者の場合、ユーザーが .mainSection ではなく .mainSection.col-md-8 などに対してCSSカスタマイズの記述をすると、テーマ側が吐き出すclass名がcol-lg-8 などに変更されるとカスタマイズされたCSSが適用されなくなる。

.col-md-8 というクラス名がついているのに md じゃないブレイクポイントになる可能性

.col-md-8 というクラス名がテーマ側で出力されているけれど、人によっては lg や sm のポイントで切り替えたいかもしれない。その時に class名がmdなのにlgのポイントで切り替わるようなCSSを上書き記述するというのは不自然である。

独自にテンプレートファイルを増やした時のクラスの指定方法

以下のルールになります。

通常

標準のテンプレートファイルは以下のように なっています。

<div class="<?php lightning_the_class_name( 'mainSection' ); ?>" id="main" role="main">
<div class="<?php lightning_the_class_name( 'sideSection' ); ?>">

lightning_the_class_name() 関数を使う事で、Bootstrap3版のスキンとBootstrap4版のスキンで異なるclass名を出力しています。

上記のソースコードは通常下記のHTMLを出力します。

<div class="col mainSection mainSection-col-two"></div>
<div class="col sideSection sideSection-col-two subSection"></div>
1カラム
<div class="col mainSection mainSection-col-one"></div>
<div class="col sideSection sideSection-col-one subSection"></div>
左カラム
<div class="col mainSection mainSection-col-two mainSection-pos-right"></div>
<div class="col sideSection sideSection-col-two sideSection-pos-left subSection"></div>

Lightningの情報をお届けします

設定ガイド

プラグインやウィジェットの使い方がわからない場合、まずは設定ガイドのページをご確認ください。