Lightningでは「見出し」を作成する方法が２パターンあります。
※ Lightningインストール時に推奨プラグインであるVKBLOCKSをインストールしている場合
- 「見出し」ブロックを使用する方法
- VKBLOCKSの「見出し」を使用する方法
この記事ではLightningの見出し作成について初心者向けに解説しています。
「見出し」ブロックでの作成
「見出し」はブロックツールの「見出し」から作成できます。
見出しって？
「見出し」についてよくわからない・・・って初心者の方はこちらの記事を参考にしてみてください。
テーマはAFFINGER6を利用して見出しについて説明していますが、初心者の方には参考になると思います。
→ AFFINGER６の見出し作成方法-初心者必見！見出しの基本
Lightning（ライトニング）の見出しでは次のようなスタイルを設定できます。
| デフォルト | 装飾無し |
| 背景塗り 灰色 | 二重線 上下線 黒 |
| 二重線 下線 黒 | 直線 上下 黒 |
| 直線 下線 黒 | 点線 下線 黒 |
| 左右線 | 括弧 黒 |
Lightning：見出しの表示例
Lightningの見出しは８種類のスタイルに変更することができます。
見出しレベルによって若干表示が違ってきます。
見出しレベルによる表示の違いを記載しておきますが、実際の見出し表示を確認したい方はLightningで作成したサンプルサイトを確認してみてください。
Lightning：見出し（デフォルト）
Lightning：見出し（装飾無し）
Lightning：見出し（背景塗り 灰色）
Lightning：見出し（二重線 上下線 黒）
Lightning：見出し（二重線 下線 黒）
Lightning：見出し（直線 上下 黒）
Lightning：見出し（直線 下線 黒）
Lightning：見出し（点線 下線 黒）
Lightning：見出し（左右線）
Lightning：見出し（括弧 黒）
Lightning：見出し（テキスト色・背景色）
見出しのテキスト色と背景色を変更することができます。
テキスト色を変更するとこんな感じです。
背景色を変更するとこんな感じです。
Lightning：見出し（タイポグラフィ設定）
タイポグラフィとは簡単に言えば、書かれた文字や文章を見やすくする技術のことです。
VKBLOCKS「見出し」での作成
Lightningインストール時に推奨されているVKBLOCKSプラグインをインストールしている場合は、VKBLOCKSの「見出し」ブロックも利用することができます。
VKBLOCKSを利用して見出しを作成するとこんな感じです。
VKBLOCKS「見出し」で出来ること
| ①：スタイル設定 | 「標準」と「装飾無し」の２つのスタイルから変更可能 |
| ②：余白設定 | 見出しとサブテキストの間の余白やブロック下の余白の設定 |
| ③：見出し設定 | 見出しのサイズやテキスト色を変更可能 |
| ④：アイコン | 見出しの前後にアイコンを設定可能 |
| ⑤：サブテキスト設定 | 見出し下にサブテキストを表示可能 |
①：スタイル設定
スタイル設定では「標準」と「装飾無し」の２種類から選択可能です。
②：余白設定
見出しとサブテキストの間の余白とブロック下の余白を設定できます。
③：見出し設定
見出しの文字サイズと文字色を変更できます。
見出しの色やサイズを変更するとこんな感じです。
④：アイコン
見出しの前後にアイコンを設定可能です。
見出しの前後にアイコンを設定するとこんな感じです。
サブテキスト設定
見出しの下にサブテキストを表示することができます。
見出しの下にサブテキストを表示するとこんな感じです。
Lightningでの見出し作成については以上になりますが、実際に見出しを作成してみるのがより分かりやすいと思います。