見出しスタイル（見出しデザイン）

各見出し（H2,h3...）にオリジナルの装飾を施せる＜見出しスタイル＞機能が新しく搭載されました。

設定画面

＜見出しスタイル＞は装飾を付けたいテキストを選択した後、記事装飾メニュー最上段の【見出し】→【見出しスタイル】から選択します。

 

 

①プレビュー

プレビューエリア。

設定変更するとリアルタイムで反映されます。

②スタイル

ここで好きなスタイルを選択します。

 

 

用意されてるスタイル一覧がこちら。

 

③カラー

ここで見出しの背景色やボーダー色を選択できます。

全部で15色用意されてます。

 

 

ちなみに”レッド”を選択するとこんな感じになります。

 

④形

角丸と円形（半径が大き目の角丸）が用意されてます。

 

こちらが角丸のサンプル。

 

⑤見出しタグ

どの見出しにするかの選択項目。

見出しタグではない「DIV」タグも用意されてます。

 

⑥単色

背景色やボーダー色を淡い色合いに変えられます。

 

⑦ボーダー

スタイルによってはボーダーの形状を変えられます。

 

 

①アイコン

見出し前にアイコンを付けられます。

こちらはSIRIUS2に付属のアイコンを付けてみたサンプル。

 

②文字サイズ

文字サイズを変更したいときはここで調整できます。

実は最初にこの機能のことを知った時、H2見出しなら全ページのH2見出しスタイルを一括変更できる機能だと思ってたんです。

 

でも実際にはページ内で個別の見出しスタイルを変える機能でした。

 

ページ内限定ですから記事タイトルに入力したH2見出しを変えることはできません。

 

ということは記事タイトルのH2見出しとページ内に設置したH2見出しの装飾（スタイル）が同じH2見出しなのに違ってくることもありえます。

（もちろん”記事タイトルのH2見出しには何も書かない”というのであればこの問題は発生しません）

 

さらにはたとえばページ内でH3見出しに何らかの＜見出しスタイル＞を適用させた場合、他のページでも同じスタイルを付けてやらないと見出しの統一感が失われます。

かといって毎回その作業をやるのは現実的ではないでしょう。

 

そうなると通常のエントリーページ内ではちょっと使いにくいかなあという印象があります。

 

H2やH3といった見出しというのは統一した装飾で表示されてないとサイト訪問者は戸惑うものです。

無意識に”このデザインのテキストは大項目でこのデザインのテキストは中項目だな”と認識してますから。

 

じゃあこの機能はどんな時に使えるのかといえば、おそらくトップページや通常のエントリーページとは異なるランディングページ（LP）などで他とはページイメージを変えたい時なんかに使える機能なんだろうと思います。

 

でもそこだけでしか使えないのはちょっともったいないです。

せっかくいろんなパターンが用意されてるんですから。

 

とうことで【Volar2】では見出しスタイルを全ページ共通の統一見出しスタイルとしても使えるようカスタマイズしてみました。

 

SIRIUS2アップデート（ver.1.03）にて見出しデザイン機能が一括で変更できるようになりました。

 

この機能を使えばすべてのH2（H3,h4...）見出しを設定したデザインで統一表示させることができます。

 

変更のやり方

【デザイン】タブ→【見出しデザイン】で設定画面を開きます。

 

 

こちらが設定画面で、左側には各見出しの指定欄が、右側にはプレビュー画面があります。

（設定を変更するとプレビュー画面に即反映されます）

 

例えばH2見出しを変更したいなら青丸で囲ったH2見出し「変更」ボタンをクリックします。

 

 

見出しスタイル変更画面になるのでこれまでご説明してきたやり方を参考に好きなデザインを指定していきます。

サンプルとして下の設定で「OK」をクリックしてみます。

 

 

H2見出しが指定したデザインで登録されました。
プレビュー画面にも変更が反映されてます。

 

これですべてのH2見出しが変更したデザインで表示されるようになります。

 

 

こんな感じで他の見出しも同様に変更できます。

 

 

 

 

設定をパターン登録

たとえば「H2見出しを別のデザインに変えてみたいけど毎回細かくカスタマイズするのが面倒くさい」なんて時は設定をパターン登録しておくと変更がとてもラクになります。

 

こんな感じですね。

 

これをスタイルを変えるたびにあちこちポチポチやっていくのはとても面倒です。

こういう時は設定を「パターン登録」しちゃいましょう。

 

「設定をパターン登録」をクリックするとパターン名の登録画面になるのでわかりやすい名称で登録しておきます。

 

 

こうしておけばたとえば下のようなデザインを別の登録したデザインに変更したい場合、「パターン設定の読み込み」をクリックして出てきた選択画面から変更したい登録名をクリックすれば瞬時に登録したデザインで置き換わります。