見出しスタイル(見出しデザイン)-SIRIUS2

見出しスタイル(見出しデザイン)

SIRIUS2の<見出し用装飾スタイル>についての詳細ページ。

アイキャッチ画像

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


設定画面の見方

設定画面

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

 

キャプチャ画像

 

見出しの設定

キャプチャ画像

①プレビュー

プレビューエリア。

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

②スタイル

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

 

キャプチャ画像

 

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

 

キャプチャ画像

③カラー

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

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

 

キャプチャ画像

 

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

 

キャプチャ画像

④形

角丸円形(半径が大き目の角丸)が用意されてます。

 

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

 

キャプチャ画像

⑤見出しタグ

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

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

 

キャプチャ画像

⑥単色

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

 

キャプチャ画像

⑦ボーダー

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

 

キャプチャ画像

 

詳細設定

キャプチャ画像

①アイコン

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

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

 

キャプチャ画像

②文字サイズ

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

見出しスタイルの共通化

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

 

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

 

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

 

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

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

 

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

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

 

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

 

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

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

 

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

 

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

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

 

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

 

追記:2022.8.25

SIRIUS2のアップデートで「見出しデザイン」の”一括変更(共通化)”が可能になりました。

 

詳しくはこのあとご紹介します。

 

またこの機能の搭載により、先行で【Volar2】に搭載していた『見出しスタイルの一括変更』機能は廃止することにしました。

(オリジナルデザインやオリジナル機能もあるので個人的には使い続けると思いますが)

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

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

 

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

 

変更のやり方

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

 

キャプチャ画像

 

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

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

 

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

 

キャプチャ画像

 

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

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

 

キャプチャ画像

 

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

 

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

 

キャプチャ画像

 

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

 

サイト管理人

筆者

 

『H2見出し』脇に”記事タイトル”と付いてますが、記事中に設定したH2見出しも設定したデザインでの表示に変わります。

 

ココがちょっと 1

H2見出しに限ってですが、目次タグの<% index %>が挿入されてる記事ではH2見出しがデフォルトデザインのままで変更できません

 

これはおそらく調整ミスでしょう。

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

ココがちょっと 2

「ベーステンプレート」だけの現象かもしれませんが、デフォルトの”H2見出し”ではグレーの(四角い)背景色が付きます。

 

キャプチャ画像

 

しかしながら”1カラム”はデフォルト設定のままでも”1カラム(ワイド)”にすると背景色が付かなくなります。

 

これは仕様なのか、調整ミスなのか。

どちらかに統一してもらった方がH2見出しのデザイン変更時に混乱が起きません。

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

 

 

設定をパターン登録

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

 

こんな感じですね。

H2見出しのスタイルを「上下線」に変更、さらに色は「淡色」、ボーダーは「二重下線」にして…

キャプチャ画像

 

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

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

 

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

 

キャプチャ画像

 

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

 

キャプチャ画像

 

サイト管理人

筆者

 

各見出しごとに登録が必要です。一括登録はないようです。

 

ただこのパターン登録機能が真価を発揮するのは新サイトを作る際に「そういえばあの見出しデザインにしようか」ってなったときじゃないかと思うんです。

 

好きなデザインでいくつか登録しておいて(モジュールやクラスの設定のように)他サイトでも使えるような「ファイルに保存」で書き出しておければ別サイトでも1発で呼び出せますでしょ。

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

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

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

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