<ブロック設定>というのは主に1カラム(ワイド)のトップページやランディングページ向けに、ページの横幅いっぱいに背景色を指定できる機能です。
設定画面はとてもシンプル。
編集画面右下の「ブロック設定」をクリックすると開きます。
いくつかサンプル画面を通してその違いを見ていきます。
ここからはトップページでの設定を例にご説明します。
使用テンプレートは「ベーステンプレート」。
まずは”使ってもあまり意味のない”2カラムページでの<ブロック設定>。
どんな具合か試しに見てみます。
用意したのはこちらのサンプル。
通常のテキストとカラー枠・装飾枠(ヒント)で囲まれたテキストを織り交ぜてます。
最初に<ブロック設定>で背景色だけを設定してみます。
結果は記事コンテンツエリアだけが設定した背景色で塗りつぶされました。
筆者
予想通り。
ちなみにH2見出しの背景はデフォルト設定がそのまま適用されてるためグレーになってます。
似たようなレイアウトデザインに『スタイル』というのがあります。
試しに編集画面左下にある『スタイル』から「カラー背景」を選択したのがこちら。
記事コンテンツエリアは設定済みの背景色で塗りつぶされますが、記事タイトルに入力したH2見出しは適用範囲外になります。
今度は”通常の”1カラムページでやってみました…といってもサイドメニューが消えただけで基本的には2カラム時と変わりはないです。
(横幅だけです、変わるのは)
筆者
こちらも<ブロック設定>の恩恵はあまり感じられません。
最後はおススメの1カラム(ワイド)です。
ページレイアウトを「1カラム(ワイド)」に変更すると<ブロック設定>の『記事のワイド化』機能が有効になるのでそこをONに切り替えておきます。
この設定で表示させてみるとブラウザ幅いっぱい(フルワイド)に背景色が敷かれるようになります。
雰囲気がこれまでとだいぶ違いますね。
筆者
1カラム(ワイド)の時だけなぜかH2見出しの背景(グレー)が消えます。
仕様なのか調整ミスなのか。
さてここから他の機能も見ていきます。
<ブロック設定>には『ブロックの背景色』設定のほかに『ブロックの文字色』というのもあります。
今回ここを赤系の色に設定してみます。
その結果がこちら。
記事編集内のテキストが赤色に変わりました。
しかしながらH3見出し『H3タイトル(記事本文内)』は赤色に変わったものの、記事本文内のH2見出し『記事タイトル(記事本文内)』は黒色のままです。
続いて残りの『記事タイトルの文字色』に青系のカラーを設定してみます。
その結果がこちら。
編集画面の”記事タイトル”内に入力したH2見出し『H2タイトル(「記事タイトル」内)』が設定通り青色に変化しました。
ということで1ヵ所だけ調整ミス?らしき症状が見受けられます。
今度は『見出しデザイン設定』機能を使ってH2見出し(記事タイトル)を”枠線のみ”に、H3見出しを”左線”にしてみます。(線色は共に青系です)
その結果がこちら。
2ヵ所のH2見出しは共に左寄せ&先に設定しておいた赤色のテキストカラーに変わってます。
とまあ、この統一感のなさはどう理解すべきなのか…。
筆者
1カラム(ワイド)に設定したエントリーページでも挙動は同じです。
この仕様はアップデートで変更になる(?)
最後に背景色を暗めの色に設定してみます。
上のキャプチャ画像でわかるように背景色が濃くなれば、元が黒のテキストはかなり見づらくなります。
その一方で装飾系ボックス内のテキストは背景に明るい色が設定してあるので見え方は変わらずクリア。
それではということで、テキストの色を見やすくするべく『ブロックの文字色』を白にしてみます。
その結果がこちら。
通常のテキストは白に変わって見やすくなったんですが、装飾系ボックス内のテキストまで白に変わってしまって今度はこっちが見づらくなってしまいました。
どうやら『ブロックの文字色』は記事内のすべてのテキストを設定した色に変えてしまう仕様のようです。
(ここでも記事コンテンツ内の”H2見出し”は黒のままで変わらずww)
筆者
ブロック設定の『記事タイトルの文字色』も白に設定すれば1個目のH2見出しだけは白色に変わります。
ということで(現状では)背景色に暗い色を設定する場合は”プレーンなテキストだけのコンテンツ”にするか、もしくは暗い背景色は諦めるしかないようです。
【Volar2】には暗い背景色の時にテキストカラーを自動的に白に変換するダークモードを搭載してます。
(画面全体が暗転する一般的な”ダークモード”とは違います)
やり方は記事内のダークモードにしたいエリアの先頭と後尾に専用のモジュールを貼り付けるだけ。
(2ヵ所というのがちょっと面倒なんですけどしょうがない)
結果、下のキャプチャ画像のように通常のテキストのみが白で表示されます。
(”調整漏れ”があるかもしれませんがアプデで対応します)