Lightning G3 Pro ページヘッダーサブテキストの改行コントロール
ワードプレスの人気テーマLightningの有料版といえるLightning G3 Pro Unitでは、投稿や固定ページのページヘッダーの中に、ページタイトルとサブテキストを配置できる仕様となっています。
最近、とある案件でこのサブテキストを使う必要があったのですが、改行コントロールができなくて困りました。そこでデフォルトのサブテキスト機能は使わず、別の方法で回避したので紹介しておきます。
うまく改行コントロールすることで、スマホ、PCを問わず表示の不自然さがなくなり、フォントサイズも読みやすくやや大きめに設定できるようになりました。
今回の検証バージョンは以下の通り、いずれも2023年3月12日現在の最新バージョンです。
ワードプレス・・・version6.1.1
Lightning・・・version15.6.0
Lightning G3 Pro Unit・・・version0.23.4
VK Blocks Pro・・・version1.52.0.0
本記事執筆時のバージョンでは、デフォルトで準備されたサブテキスト入力欄に<br>タグを挿入しても改行できませんでしたが、ベクトルさんのフォーラムで依頼したところ、さっそくご対応頂きました。
Lightning :version15.7.0
Lightning G3 Pro Unit:version0.24.0
からは、<br>タグ挿入で改行コントロールできます。
ただし、サブテキストのフォントサイズやスマホ・PCなどデバイスごとに改行コントロールしたい場合、CSSによるカスタマイズは必要となります。CSSなしでサブテキストをカスタマイズしたい場合は、本記事の手法が参考になります。
以降、Lightning バージョン15.7.0、G3 Pro Unitバージョン0.24.0より前のバージョン向けとしてお読みください。
ページヘッダーのサブテキストとは
Lightning G3 Proでは、投稿や固定ページのタイトル部に背景画像や背景色を設定することができます。これがページヘッダーです。デフォルトではページヘッダーのすぐ下にパンくずリストが表示されます。
サブテキストは、このページヘッダー内のタイトル下に補足テキストを表示するものです。
ちょっとした補足であったり、ページタイトルの英語表記をつけるなど、便利な機能です。
ページヘッダーサブテキストの設定方法
ページヘッダーのサブテキストは、ブロックエディターを開けると本文入力欄の下に設けられています。
ここにテキストを入力して公開または更新すれば、ページ上に表示されます。
サブテキストの改行コントロール問題
しかし、このページヘッダーの入力欄ですが、プレーンなテキストのみを受け付ける仕様となっているため、改行コントロールができません。
例えば、上記の画像であげたサブテキストをスマホ表示してみると、スペースの問題で以下のように自動改行されてしまいます。
不自然な場所で自動改行されるので、ページの1stビューとしては微妙ですよね。
試しに<br>タグをテキスト途中に挿入して改行コントロールを試みましたが、そのまま<br>という表示でページ表示されてしまいました。
HTML内にタグを挿入できないので、CSSでの改行コントロールもできません。ベクトルさんのフォーラムでも質問してみましたが現状の仕様ではできないようで、機能追加の検討項目としてあげて頂いています。
サブテキストの改行コントロール問題を解決する
そこで、デフォルトのサブテキストを利用することは諦めて、別の方法で解決してみました。以下の手順です。
- ブロックエディター編集画面で、ページヘッダーとパンくずリストを表示消去。
サイトコンテンツの上下余白も無しに設定する - 本文入力欄一番上にOuterブロックを全幅配置で挿入。背景画像も設定する。
- ②の中に、次のブロックを挿入してテキストを入力。テキストは中央揃えとしておく。
見出しブロックH1・・・ページタイトル
段落ブロック・・・サブテキスト - Outerブロックの下にパンくずリストブロックを挿入。その下に適宜スペーサーブロックで余白を設定する。
①ページヘッダーとパンくすリストを表示消去。上下余白をなしに設定
ブロックエディターのサイドパネルで設定します。これでデフォルトのページヘッダーとパンくずリストは使用しないこととなります。余白については、ヘッダー下にできる余分な余白を削除するのが目的です。
②③④新しくページヘッダーを作成しその下にパンくずとスペーサーを設置
デフォルトのページヘッダーの代わりに、本文欄にページヘッダーを作成します。以下のような構成です。
一番上にあるページタイトル(赤字)は、この固定ページそのもののタイトルです。
サブテキストとなる段落ブロックで、Lightningの提供する改行コントロールを使います。上の画像では、[br-xs]を挿入したところでスマホ表示での改行となります。
以上をweb表示してみると以下の通り、スマホでうまく改行コントロールできています。
うまく改行することで不自然さがなくなり、サブテキストのフォントサイズもやや大きめに設定できるようになりました。
ブロックエディターで上下余白なしとすることで、ヘッダーとページヘッダーの間に余分な余白も削除できています。
また、デフォルトのパンくずリストを残すとヘッダーとページヘッダーの間にパンくずが表示されてしまいますが、今回はデフォルトは非表示化し、Outerブロックの下にパンくずブロックを配置することで回避しました。
まとめ
今回はLightnig G3 Proのサブテキスト機能を使わず、改行コントロールが可能なサブテキストを設定する方法を紹介しました。
改行コントロール機能はデフォルトにはないものの、ページヘッダーやパンくずの非表示化して新規にOuterブロックでページヘッダー作成とパンくずブロックの活用など、Lightning G3 ProやVKブロックProが同梱されるベクトルパスポートの提供する機能の範囲で可能となります。
ページを新規作成する度に毎回この設定をするのが面倒という場合は、パターン登録する、または、この固定ページを雛形として保存しておいて新規作成時に使用する、など方法はいろいろ考えられます。