SIRIUS2をもっと美しく、もっと自由に

SIRIUS2標準の＜ヘッダーアニメーション＞機能を有効化すると、複数の静止画像を（動きのある）アニメーションで表示できます。
その際テキストも表示できるんですが、テキストサイズの変更ができないのでのっぺりとした印象になりがちです。

《Volar2》でも同様の機能を搭載してます。
こちらはテキストサイズの変更が可能。ブラウザの高さいっぱいでの表示も可能。

こちらは《Volar2》独自の機能で、静止画ヘッダーを動画に変更できます。
動画素材さえ用意できればOK。動画上にテキストを載せることも可能。

SIRIUS2のパーツ→＜画像レイアウト＞にはいくつかレイアウトデザインが用意されています。

下の画像は＜画像レイアウト＞の『レイアウト設定』で『画像＋テキスト横並び・1列互い違い』を選択したものです。
”背景色あり”だと上下コンテンツ間に余白があるのがわかります。

そして下の画像が《Volar2》の機能で、余白をゼロにしたタイプです。

ブラウザ幅いっぱいに表示できるタイプもあります。

下の画像は＜画像レイアウト＞の『レイアウト設定』で「デフォルト（横並び）」を選択かつ背景色を指定したものです。
背景色を付ける場合は『テキストの余白』で余白を設定しておかないと端ギリギリで表示されてしまいます。

また上の画像は『行揃え（横）』を「左寄せ」に設定したもので、見出しも説明文もすべて左寄せで表示されます。
一方「デフォルト」に設定するとすべてが中央寄せで表示され、見出しだけ中央寄せという設定は存在しません。

《Volar2》では独自タグを専用のクラスで囲むと、「左寄せ」でも「デフォルト」でも見出しは中央寄せになるようにしてます。

”背景色を付ける”タイプも用意してます。
専用のクラスで独自タグを囲むと自動で背景色が付き、余白も自動で付きます。
ただし背景色は＜画像レイアウト＞側での設定ではなく、《Volar2》で設定済みの固定色（薄グレー）になります。
（ユーザー指定スタイル上で色の変更もできますが、若干面倒です）

画像と見出しのみの入力で、ちょっと小さめの”アイコン風画像”にする機能も用意しました。

背景色付きもあります。

画像なし・見出しと説明文のみ・枠線付きのシンプルタイプ。
見出し背景色は「緑系・赤系・黒系」をデフォルトでご用意。

SIRIUS2のパーツ→＜アイテム比較＞は料金比較などに最適です。
ただテキストの大きさなどがほぼほぼ同じで”目立ち度”がちょっと低いかも、と。

そこで《Volar2》ではテキストを少々目立つようなスタイルを加えてみました。

＜アイテム比較＞の金額欄を空白にすれば、シンプルに項目表示用としての利用も可能です。
その際、表示したいコンテンツが4個あるものの1個目の＜アイテム比較＞は1列に3個までの表示に限定したい場合、必然的に2つ目の＜アイテム比較＞は1個だけの表示になります。
しかしながら＜アイテム比較＞で作成したコンテンツは個数にかかわらず必ずコンテンツ幅で表示される仕様のため、下の画像のようにバランス悪いレイアウトになります。

ここで前述同様、＜アイテム比較＞の独自タグを《Volar2》の専用タグで囲んでやると同じ表示幅でのレイアウトにすることができます。

前項の”項目表示”レイアウトにした場合、ボタンは「詳細ページへ」とか「詳細はこちら」といった文言になろうかと思います。
そうなるとボタンの位置がデフォルトのまま（真ん中あたり）だとおさまりが悪い場合もあるかと思います。
その場合は《Volar2》で用意している専用スタイルを有効化するだけで下のように最下段にボタンが移動します。

こちらは《Volar2》独自の機能で、質問と回答を所定の位置に書き込むだけで短めのFAQ形式のレイアウトに変換できます。

こちらも《Volar2》独自の機能で、可視領域に達したらカウントアップするカウンターを表示できます。
『タイトル』に見出し、『価格』に《Volar2》で用意しているコード＆数値を入力、『説明文』に補足情報を入力するだけ。

SIRIUS2のパーツ→＜画像ギャラリー＞で作成したギャラリー画像はスマホ表示時には1列最大3枚での表示になります。

ただ画面上のサムネイルはかなり小さめでの表示です。しかも画像をタップして表示される画像は左端を起点とした画面幅での表示で、全部を見るには左にスワイプする必要があります。（全画面表示のオプションはなし）

《Volar2》ではもう少し見やすくするためにスマホ表示時のサムネイル画像を大きめにする設定を用意してます。（1列2枚固定表示）
また画像をタップすると最初に全画面が表示される仕様にも変えてます。必要ならピンチインで拡大できます。

SIRIUS2のパーツ→＜CTA＞のレイアウトは、左右どちらかに背景画像（or テキスト）が置かれるデザインになってます。
（スマホでは上に画像、下にテキスト）

《Volar2》では背景画像のイメージに合わせて、下半分にテキストが表示されるタイプAと全体的に中央に表示されるオーソドックスなタイプBも加えてみました。

SIRIUS2のパーツ→＜タブコンテンツ＞のデザインは5タイプ用意されてます。
そのうちボーダー（囲み枠）があるのは「デザイン1」の1種類のみ。

”デザイン1”以外はボーダーがないため、そのままだとどこまでがタブコンテンツの内容なのかががわかりにくいケースもあります。
そんなわけでボーダー付きの設定も加えてみました。
（※ボーダーの色や太さは全タイプ共通）

SIRIUS2のパーツ→＜フローチャート＞のレイアウトデザインは3タイプ用意されてます。

このうち”デザイン3”に関しては（PCでは）縦並びになって説明文の表示領域が広く確保されるレイアウトになってます。
ただしテキストだけならそうでもないんですが、画像入りだと特にスマホ表示時は画像が小さく表示されてしまってちょっともったいない感じがします。

そこでこの”デザイン3”に関してのみ、説明エリアの表示領域が広がる別タイプのレイアウトも加えてみました。

SIRIUS2のパーツ→＜リンクカード＞のレイアウトデザインはPCとスマホで下のように表示されます。
個人的にはスマホ表示が見づらく感じたのでレイアウトをちょっといじってみました。

SIRIUS2のパーツ→＜口コミ＞のレイアウトをスタッフ紹介用レイアウトに変更できます。
（年齢欄を空欄にすれば商品やサービス紹介にも使えます）

”wide”タイプは左に画像・右にテキストというレイアウト。”normal”タイプは2列表示でそれぞれ画像とテキストが縦並びのレイアウト。（スマホはいずれも縦並び）

通常の＜目次＞レイアウトを、ブラウザ幅いっぱいのページ内ボックスリンクのようなレイアウトに変えられます。

通常はサイドメニューに表示されるSIRIUS2の＜人気記事＞を、エントリーページの最上段に最大4つまで表示できます。

SIRIUS2ではヘッダー画像上に『【全体設定】で設定したサイト名と説明文』を表示させることができます。
ただしこれらのテキスト、大きさや色の変更はできません。

そこで《Volar2》ではテキスト周りの装飾を簡単にできる設定を加えてみました。
テキスト全体をボーダーで囲むなんてこともできちゃいます。

ヘッダー画像下に、”右から左に流れるテキスト”《ニュースティッカー》を表示できます。

ブラウザ右端にぴったりくっついて表示される固定ボタンです。
通常版（実質4～6個程度）と縦書き（2個固定）の2タイプがあります。

《Volar2》独自の装飾機能です。

（PCでの表示時）1カラムページに限りますが、クリックするとサイドメニューが開閉する”ハンバーガーメニュー”ボタンを表示できます。

SIRIUS2の記事ブロック単位で背景画像をフルワイド（ブラウザ幅いっぱい）で表示できる機能です。
SIRIUS2標準機能の＜ブロック設定＞でも同じことは可能ですが、画像表示の挙動が若干異なります。

前項の《フルワイド背景画像》は記事ブロック単位での利用かつ1カラム（ワイド）でないと使えませんが、こちらは1カラムでもOK。しかも記事中のどこでもフルワイド化が可能。

背景画像でも単一色でも設置可能で、大見出しやバナー風表現を付けたいときにはこちらが手軽です。

どんなに大きな画像でも通常はコンテンツ幅内での表示になります。
これをブラウザ幅いっぱいまで画像を表示することができるのが《画像フルワイド化》です。

前述の《フルワイド背景画像》や《フルワイドセクション》は”背景画像＋テキスト”ですが、こちらはシンプルに画像だけの表示になります。

インパクトのある画像を見せたいときや装飾済みのテキストを画像内に配置したいときとかはこちらの方が便利です。

小・中・大の3タイプのバナー作成機能を用意してます。（それぞれ2個～5個まで設定可）
1サイトにそれぞれ1種類のみ指定可。

画像が常にループし続けます。画像下には説明文も記述可。
リンク機能は付けてませんが、SIRIUS2標準機能の［リンク］で付けることは可能。

左にテキスト・右に画像ギャラリーというある意味”ピンポイント”なレイアウト機能。

SIRIUS2には標準で＜見出しデザインの一括変更＞機能が搭載されてます。またアップデートで”見出しタイトルとサブタイトルを2段表示”できる＜サブタイトル見出し＞機能も搭載されるなど、見出し周りの拡張機能が豊富です。

ただ＜見出しデザインの一括変更＞に関しては使い勝手がイマイチな部分も若干あったりします。
そこで《Volar2》ではその部分を補完できるよう独自の《H2見出しデザイン一括変更》を付け加えてみました。

（H2のみが対象です）

《Volar2》は和風サイトなんかでよく見かける縦書きテキスト表示に対応してます。
英数字は横にも縦にも変更可能。

SIRIUS2には（ver.1.180で新たに追加された）「Shippori Mincho（しっぽり明朝）」というWebフォントがデフォルトで設定されてる和モダンテンプレートが搭載されてます。
《Volar2》ではこのフォントを使えるよう設定を加えてみました。

SIRIUS2には標準機能として記事の更新履歴を表示する機能が搭載されてます。ただしそこに表示される履歴はすべてのページが対象になっていて、特定の記事のみを表示させることはできません。
そこで《Volar2》では特定のカテゴリーの記事（例えば”お知らせ”記事の更新だけ）を表示できるようにしてみました。

使い方は《Volar2》で用意している専用コードをコピー＆ペーストするだけです。

テーブル（表）を効果的に見せる機能を付け加えてみました。

指定した日にちになるとそれまでの価格（数値）を自動的に新価格（数値）に変更できます。
中身は数値の変更機能なので金額だけなくほかの単位（個・人・グラムなど）にも使えます。

使い方は価格（数値）を表示したい箇所に《Volar2》で用意している専用コードを貼り付け、数値を変更して完了です。

特定のコンテンツ（テキストやバナー画像等）を指定した期間だけ表示できます。
期間が過ぎたら自動的に非表示になります。

使い方は表示したい箇所に《Volar2》で用意している専用コードを貼り付け、その中の日付を設定するだけで完了。

SIRIUS2はブログタイプに限ってですがトップページに最新の記事を一覧表示できます。通常タイプでは表示できません。
とはいえサイトの方向性によっては通常タイプでも記事一覧を表示したい場合もあります。

そんなケースに備えて《Volar2》では通常タイプでも記事一覧を表示できるオプションを用意しました。

やり方は《Volar2》で用意している整形済みの専用コードを記事一覧表示させたい箇所にコピー＆ペーストするだけです。

「カーニング」というのは数字やローマ字、句読点、かっこ、カタカナの小文字などが若干詰まって表示されるいわゆる”文字詰め”機能のことです。

下の画像がカーニングのありなしの表記の違いです。
どっちがいいとかではなく、サイト運営側が「どちらがユーザーが読みやすいか」との考えに基づいて”使う・使わない”を判断する感じでしょうか。

SIRIUS2でLP（ランディングページ）を作る際は［1カラム＋サイドメニュー非表示］を採用するかと思います。しかしながらロゴやヘッダー画像やフッターなどは表示されたままです。

《Volar2》ではこれらすべてを非表示または一部だけを非表示にできるオプションを用意しました。
これで”すっきりした”LPを作ることができます。

画像を指定するだけでフッターエリアに背景画像を表示できます。
どちらかと言えばサイトイメージの向上用です。

《Volar2》では”サイト運営者情報”の表示にあたる《プロフィール表示》機能を用意しました。

専用モジュールに記述することで下のようなプロフィールをサイドメニューに表示できます。

SIRIUS2にはサイドメニュー用のフリースペースが（サイドメニュー最上段＆最下段に）2ヵ所用意されてます。
しかしながら何らかの情報や広告などをもう少し増やしたい時はこれだけでは足りなくなります。

そこで《Volar2》では追加のフリースペースを2個追加しました。レイアウトデザインは他のフリースペースと同じです。

記事タイトルと記事URLを（1クリックで）コピーできるボタン機能。
本来はSNS用の機能ですがメモ代わりとしても使えます。