ブロック設定-SIRIUS2

ブロック設定

SIRIUS2の1カラムLP向け<ブロック設定>についての詳細ページ。

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

 

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

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

 

キャプチャ画像

 

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


設定-2カラム

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

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

 

その前にサンプルの編集画面をご覧下さい。

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

 

キャプチャ画像

 

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

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

 

キャプチャ画像

 

サイト管理人

筆者

 

予想通りの雰囲気。

 

似たようなレイアウトデザインに『スタイル』というのがあります。

編集画面左下にある『スタイル』から試しに「カラー背景」を選択したのがこちら。

 

キャプチャ画像

記事コンテンツエリアは設定済みの背景色で塗りつぶされてますが、記事タイトルに入力したH2見出しは適用範囲外になります。

設定-1カラム

1カラム(通常)

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

(横幅等は変わりますよ)

 

キャプチャ画像

 

サイト管理人

筆者

 

こちらも<ブロック設定>の恩恵はあまり感じられませんね。

 

1カラム(ワイド)

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

 

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

 

キャプチャ画像

 

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

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

 

キャプチャ画像

 

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

テキストカラーの設定はやや複雑

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

 

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

その結果がこちら。

 

キャプチャ画像

 

記事編集内のH2見出し「記事タイトル(文中)」”以外”のテキストが赤に変わりました。

(ん?なんかおかしい?)

 

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

その結果がこちら。

 

キャプチャ画像

 

編集画面の”記事タイトル”内に入力したH2見出しだけが青色に変化しました。

(これは正常ですね)

 

実は(ここには表示されてませんが)記事コンテンツ内の”H3見出し”は『ブロックの文字色』で設定した色がちゃんと反映されます。

記事コンテンツ内の”H2見出し”だけが反映されないんです。

 

サイト管理人

筆者

 

「ユーザー指定スタイル」に何も入れない状態で検証しても同じなので…たぶん調整ミスではないかと思うんです。

この仕様はアップデートで変更になる(?)

 

さらにもう一つ。

ここまではトップページでの実証結果でした。

 

同じ設定で1カラム(ワイド)にしたエントリーページでチェックしてみたところ…『記事タイトルの文字色』に設定した青も反映されないという現象が起きてしまいます。

 

キャプチャ画像

 

なんかいろいろバグって(?)ます。

背景色を暗い色にすると...

とりあえず話を進めます。

今度は背景色を暗めの色に設定してみます。

 

キャプチャ画像

 

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

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

 

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

その結果がこちら。

 

キャプチャ画像

 

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

 

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

(記事コンテンツ内の”H2見出し”が黒のままなのは前述のバグ?仕様のせい)

 

サイト管理人

筆者

 

一番上の記事タイトルに入力したh2見出しは『記事タイトルの文字色』が未設定なので変わりなしです。

(設定しても現状では変わりませんけど)

 

ということで(仕様が正しければ)背景色に暗い色を設定した場合はプレーンなテキストだけのコンテンツにするか、もしくは暗い背景色は諦めるしかないようです。

 

【Volar2】での設定

【Volar2】には暗い背景色の時にテキストカラーを自動的に白に変換するダークモードを搭載してます。

(画面全体が暗転する一般的な”ダークモード”とは違います)

やり方は記事内のダークモードにしたいエリアの先頭と後尾に専用のモジュールを貼り付けるだけ。

(2ヵ所というのがちょっと面倒なんですけどしょうがない)

 

キャプチャ画像

 

結果、下のキャプチャ画像のように通常のテキストのみが白で表示されます。

(”調整漏れ”があるかもしれませんがアプデで対応します)

 

キャプチャ画像

コメントフォーム(β版)

    ※コメントはこちらからどうぞ

    このフォームを作成するにあたって参考にしたサイト情報はこちらに載せてます