ブロック設定

＜ブロック設定＞というのは主に1カラム（ワイド）のトップページやランディングページ向けに、ページの横幅いっぱいに背景色を指定できる機能です。

 

設定画面はとてもシンプル。

編集画面右下の「ブロック設定」をクリックすると開きます。

 

 

いくつかサンプル画面を通してその違いを見ていきます。

まずは”使ってもあまり意味のない”2カラムページでの＜ブロック設定＞。

どんな具合か試しに見てみます。

 

用意したのはこちらのサンプル。

通常のテキストとカラー枠・装飾枠（ヒント）で囲まれたテキストを織り交ぜてます。

 

 

最初に＜ブロック設定＞で背景色だけを設定してみます。

結果は記事コンテンツエリアだけが設定した背景色で塗りつぶされました。

 

 

 

1カラム（通常）

今度は”通常の”1カラムページでやってみました…といってもサイドメニューが消えただけで基本的には2カラム時と変わりはないです。

（横幅だけです、変わるのは）

 

 

1カラム（ワイド）

最後はおススメの1カラム（ワイド）です。

 

ページレイアウトを「1カラム（ワイド）」に変更すると＜ブロック設定＞の『記事のワイド化』機能が有効になるのでそこをONに切り替えておきます。

 

 

この設定で表示させてみるとブラウザ幅いっぱい（フルワイド）に背景色が敷かれるようになります。

雰囲気がこれまでとだいぶ違いますね。

 

 

 

さてここから他の機能も見ていきます。

＜ブロック設定＞には『ブロックの背景色』設定のほかに『ブロックの文字色』というのもあります。

 

今回ここを赤系の色に設定してみます。

その結果がこちら。

 

 

記事編集内のテキストが赤色に変わりました。

しかしながらH3見出し『H3タイトル（記事本文内）』は赤色に変わったものの、記事本文内のH2見出し『記事タイトル（記事本文内）』は黒色のままです。

 

続いて残りの『記事タイトルの文字色』に青系のカラーを設定してみます。

その結果がこちら。

 

 

編集画面の”記事タイトル”内に入力したH2見出し『H2タイトル（「記事タイトル」内）』が設定通り青色に変化しました。

 

ということで1ヵ所だけ調整ミス？らしき症状が見受けられます。

 

今度は『見出しデザイン設定』機能を使ってH2見出し（記事タイトル）を”枠線のみ”に、H3見出しを”左線”にしてみます。（線色は共に青系です）

 

 

その結果がこちら。

 

 

2ヵ所のH2見出しは共に左寄せ＆先に設定しておいた赤色のテキストカラーに変わってます。

とまあ、この統一感のなさはどう理解すべきなのか…。

最後に背景色を暗めの色に設定してみます。

 

 

上のキャプチャ画像でわかるように背景色が濃くなれば、元が黒のテキストはかなり見づらくなります。

その一方で装飾系ボックス内のテキストは背景に明るい色が設定してあるので見え方は変わらずクリア。

 

それではということで、テキストの色を見やすくするべく『ブロックの文字色』を白にしてみます。

その結果がこちら。

 

 

通常のテキストは白に変わって見やすくなったんですが、装飾系ボックス内のテキストまで白に変わってしまって今度はこっちが見づらくなってしまいました。

 

どうやら『ブロックの文字色』は記事内のすべてのテキストを設定した色に変えてしまう仕様のようです。

（ここでも記事コンテンツ内の”H2見出し”は黒のままで変わらずww）

 

ということで（現状では）背景色に暗い色を設定する場合は”プレーンなテキストだけのコンテンツ”にするか、もしくは暗い背景色は諦めるしかないようです。