H2見出しデザインの一括変更-Volar2

SIRIUS2には（ver.1.03のアップデートで）＜見出しデザイン＞の一括変更機能が搭載されました。

 

この機能はとても便利なんですが、使い方によってはちょっととまどうことにもなりそうです。

当方でいろいろ試してみた結果、以下のような現象が見られるようです。

（※ベーステンプレートでの検証になります）

デフォルトの”H2見出し”だとグレーの（四角い）背景色が付きます。

 

 

ここでレイアウトを”1カラム”に変更してみると、左寄せでの配置でグレーの背景色もついたままでの表示になります。

 

ただし＜見出しデザイン＞の一括変更を適用してH2見出しに「スタイル18」などの中央寄せのスタイルを適用すれば中央寄せでの配置になります。

 

 

今度は”1カラム（ワイド）”にしてみます。

するとなぜか中央寄せでの配置に変わり、背景色も付かなくなります。

 

こちらも＜見出しデザイン＞の一括変更で「スタイル13」などの中央寄せのスタイルを適用すると同じように中央寄せでの配置になります。

 

 

ここでたとえばトップページのみ1カラム（ワイド）にしてプロっぽく見せようと思ったら、H2見出しは（SIRIUS2公式サイトのように）中央寄せの方が見栄えはよくなります。

 

ということで＜見出しスタイル＞一括変更でH2見出しに中央寄せのスタイルを選択してみます。

当然のことながら他の通常の2カラムページでもH2見出しが中央寄せで表示されます。

 

それでもよければ特に問題はないのですが、通常のページでは”ノーマルな”見出しを使いたいとか左寄せで表示した方がしっくりくるなんてご意見もあるでしょう。

 

でも1カラムページのみ中央寄せのレイアウトにして他の2カラムページでは通常の左寄せにするとか、1カラムと2カラムでデザインを変えようとしたら大幅なスタイルの変更が必要になります。

そこで【Volar2】では1カラム（”ワイド”含む）ページと通常の2カラムページで別々の見出しデザインを一括表示できる設定を加えてみました。

この機能はこちらで用意しているスタイル設定をテンプレート上で有効化する仕様になってます。

 

もちろん全ページ同じH2見出しでかまわなければ【Volar2】の機能は使う必要はありません。

 

そしてこちらが【Volar2】で用意したH2専用の見出しデザイン一覧です。

 

1カラムページで使えるH2見出しは仰々しいのは外してさりげない感じのものだけに絞ってます。

また中央寄せ固定のレイアウトになります。

（色はどんなサイトでも使い回しが可能なようにグレー系で固定）

 

 

2カラムページで使えるH2見出しはSIRIUS2に搭載されてる見出しデザインに近いものもあれば【Volar2】オリジナルデザインのものもあります。

こちらもどちらかと言えばシンプルなものに限定してます。

（色はどんなサイトでも使い回しが可能なようにグレー系で固定）

 

【Volar2】の”H2見出しデザイン一括変更”機能は専用スタイルシートの読込みというやり方で有効化します。

 

トップページには1カラム専用H2見出し用スタイルシート読込みコマンドが、トップページ以外には通常のH2見出し用スタイルシート読込みコマンドが予め書かれています。

（デフォルトではコメントアウトして無効化してあるので有効化するにはコメントアウトを解除します）

 

 

1カラム専用H2見出しは6種類、通常のH2見出しは11種類用意してあり、有効化したら末尾の番号を変えるだけで見出しデザインが瞬時に変わる仕様です。