SIRIUS2深掘り

SIRIUS2深掘り

カスタムテンプレート【Volar2】の独自機能とSIRIUS2の実践的使い方を掘り下げてご紹介します

  当ページの一部リンクにはプロモーションが含まれています

 

SIRIUS2は従来のアフィリエイトサイトだけでなく小・中規模企業や個人事業主などの企業系サイトとしても充分通用するレイアウトデザインおよび独自機能を搭載してます。

 

そこで当サイトではSIRIUS2に搭載された新機能、旧SIRIUSから継承しつつさらにパワーアップしたオリジナル機能、SIRIUS2を使う上で知ってると編集作業が効率的するヒントなどを具体的事例を使って運用の手助けになるようご紹介していきます。

 

また筆者がカスタマイズしたカスタムテンプレート【Volar2】の独自機能も併せてご紹介していきます。

導入事例の再現

SIRIUS2の公式サイトの冒頭に載ってる導入事例実際にSIRIUS2で再現できるかやってみました。

また導入事例のバックアップデータが2024年8月に公式サイトにて公開されたので、せっかくなので再現サイトとバックアップデータの”答え合わせ”もやってみました。(※解説ページにて公開中)

サイト管理人

筆者

 

導入事例は当初は5つだったんですが、しばらく見ないうちに11にまで増えてました。

(公式サイトのデザインも一新されたようです)

ただ追加分を見る限りここでご紹介している5つの検証事例とさほど差はない感じです。

第1弾「英語教室」
再現サイトはこちら。解説ページはこちら
第2弾「ネイルサロン」
再現サイトはこちら。解説ページはこちら
第3弾「行政書士事務所」
再現サイトはこちら。解説ページはこちら
第4弾「保育園」
再現サイトはこちら。解説ページはこちら
第5弾「カフェ」
再現サイトはこちら。解説ページはこちら

 

このブロックは【Volar2】の<フルワイド背景画像(シンプル版)>を適用してブラウザ幅いっぱいに背景画像を表示させてます。

(※PC表示時のみ。モバイルでは非表示)

お知らせ

SIRIUS2 ver.190で追加された『特殊レイアウト』ですが、一部のレイアウト崩れを除いては【Volar2】でも基本的には問題なく表示されることを当方の環境では確認済みです。

ただし文字通り”特殊な”レイアウトであること、一部のレイアウト崩れの修正に膨大な時間がかかりそうなこと、そしてどちらかというと【Volar2】の機能を活かしきれないレイアウトであることから、【Volar2】を利用しての『特殊レイアウト』動作保証外とさせていただきます。ご了承ください。

SIRIUS2 ver.1.180にて追加された【テンプレート・和モダン】【Volar2】で再現してみました。

こちらで用意した専用機能を追加するだけで【テンプレート・和モダン】のようなサイトが作成できます。

再現サイトはこちら

当サイトで紹介しているSIRIUS2の購入特典でもあるカスタムテンプレート【Volar2】は『公式サイト・特典付き購入はこちら』と書かれたボタンをクリックして開いたページからのSIRIUS2ご購入でないと受け取れません。

(特典の入手方法の詳細はこちらをご覧下さい)

 

 

上のページ内リンクはSIRIUS2標準搭載の<目次>機能を利用してH2見出しのみを表示させたものですが、<【Volar2】目次・改>の機能を付けて横並びレイアウトに変更表示させてます。

【Volar2】の独自機能

筆者がカスタマイズしたテンプレート【Volar2】のオリジナル機能の概要をご紹介します。

【Volar2】は「ベーステンプレート」を元にアレンジしたカスタムテンプレートとなってます。

 

  • 人気記事4点固定表示
  • 人気記事4点固定表示
  • ヘッダー下部にSIRIUS2標準機能の人気記事1位~4位までをサムネイル画像付きで自動表示。

 

  • サイドボタン
  • サイドボタン
  • ブラウザ右端にテキストによるミニナビゲーションを常駐表示。半透明かつ小型サイズ。
    縦書きのシンプル版も追加搭載。

 

  • オリジナル装飾
  • オリジナル装飾
  • ボックス装飾や付箋など【Volar2】独自のテキスト周りの装飾効果。

 

  • 並列表記の固定FAQ
  • 並列表記の固定FAQ
  • <アイテム比較>を利用した、1カラムページ用の横並び固定表記のFAQリスト。

 

  • カウントアップカウンター
  • カウントアップカウンター
  • <アイテム比較>を利用した、スクロールして視界に入ったら数値がカウントアップする数値表示機能。

 

  • ニュースティッカー
  • ニュースティッカー
  • ヘッダー下部に右から流れてくる”動くテキスト”を表示できる機能。

 

  • テーブル(表)便利機能
  • テーブル(表)便利機能
  • セル背景に◯や×などの画像表示、セル幅の個別調整、セルの縦書き、マイクロコピー機能など独自の便利機能をご用意。

 

  • オリジナルバナーデザイン
  • オリジナルバナーデザイン
  • 小・中・大の3つのバナー画像用レイアウトデザインをご用意。

 

  • スタッフ紹介
  • スタッフ紹介
  • <口コミ>機能を利用した、プロフィールやメンバー紹介用レイアウト機能。
    2タイプご用意。

 

  • フルワイド背景画像
  • フルワイド背景画像
  • <ブロック設定>の背景画像とは”一味違った”ブラウザ幅いっぱいでの背景画像表示機能。

 

  • 指定日に価格変更
  • 指定日に価格変更
  • 変更予定の日時と価格を指定するだけで自動で価格が変更表示。
    数値のみの変更なので価格以外にも利用可。

 

  • 期間限定のコンテンツ表示
  • 期間限定のコンテンツ表示
  • 指定した期間のみコンテンツを表示できる機能。

 

  • H2見出しデザイン一括変更
  • H2見出しデザイン一括変更
  • SIRIUS2搭載<見出しデザイン>の一括変更に加えて【Volar2】独自のH2見出しデザインもご用意。

 

  • 特定の記事だけ更新履歴に表示
  • 特定の記事だけ更新履歴に表示
  • 特定の記事のみを更新履歴に表示させる【Volar2】独自の機能。
    「お知らせ」記事のみを表示させたりが可能。

 

  • 和モダンテンプレート風
  • 和モダンテンプレート風
  • 【Volar2】の設定を少し変えるだけで「しっぽり明朝」を使った和モダンテンプレート風のサイトに変更可能。

 

  • ループスライダー
  • ループスライダー
  • ブラウザ幅いっぱいに常にループし続ける画像スライダー機能。
    説明文やリンク付けも可。

 

  • スプリットギャラリー
  • スプリットギャラリー
  • 左にテキスト・右に画像ギャラリーという固定レイアウト機能。

 

  • 縦書きモード
  • 縦書きモード
  • 【Volar2】で用意した”縦書き専用エリア”内だけを縦書き表示にできる機能。

 

  • 開閉式サイドメニュー
  • 開閉式サイドメニュー
  • 1カラムページで通常はページ最下段に移動するサイドメニューを、スマホでよく見かけるハンバーガーメニューボタンで簡単に開ける機能。

 

  • ヘッダー→動画
  • ヘッダー→動画
  • トップページの通常のヘッダ―エリアを、インパクト抜群の動画ヘッダーに切り替え可能。
    テキストや画像も表示可。

 

  • ヘッダー→画像スライダー
  • ヘッダー→画像スライダー
  • トップページの通常のヘッダ―エリアを、3枚の画像がズームしながらフェードで切り替わる画像スライダーに変更可能。

 

  • <画像レイアウト>追加機能
  • <画像レイアウト>追加機能
  • <画像レイアウト>が出力する独自タグを【Volar2】で用意している専用クラスで囲むことでさまざまなレイアウト表示が可能に。

 

  • <画像ギャラリー>独自レイアウト
  • <画像ギャラリー>独自レイアウト
  • <画像ギャラリー>のサムネイル画像をスマホで見やすく大きくしたり、タップ後の画像サイズを横幅100%表示に変えるなど【Volar2】独自の仕様。

 

  • 目次・改
  • 目次・改
  • SIRIUS2の<目次>レイアウトをページ内リンクボタン風に1列に並べる【Volar2】独自のレイアウト変換機能。

 

  • フッターに背景画像
  • フッターに背景画像
  • 殺風景なフッターに背景画像を置くことでリッチなサイトにイメージアップ。

 

  • <CTA>独自レイアウト
  • <CTA>独自レイアウト
  • <CTA>の標準レイアウトをより見やすいレイアウトに変更可能なスタイルをご用意。

 

  • <リンクカード>独自レイアウト
  • <リンクカード>独自レイアウト
  • <リンクカード>の標準レイアウトを若干ですが変えてみました。

 

  • まっさらな1カラムページ
  • まっさらな1カラムページ
  • SIRIUS2標準の1カラムページを、ロゴもタイトルもメニューも何もないLP専用仕様に変更可能な設定集。
    必要な項目だけを表示するのも可。

 

  • 追加のフリースペース
  • 追加のフリースペース
  • SIRIUS2のフリースペースだけでは足りない方向けに追加のフリースペースをいくつかご用意。
    レイアウトは通常のフリースペースと同じ。

 

  • プロフィール表示
  • プロフィール表示
  • 【Volar2】の”追加”フリースペースを利用してサイドメニューに画像+テキストのプロフィール紹介エリアを格納表示。

 

  • カーニング(文字詰め)
  • カーニング(文字詰め)
  • webフォントや游ゴシック体などは文字の見やすさにもつながるカーニング(文字詰め)を適用可能。

 

  • 記事タイトルとURLコピー
  • 記事タイトルとURLコピー
  • いま見ているページの記事タイトルとURLを瞬時にコピーできるボタン機能。

 

  • 記事一覧表示
  • 記事一覧表示
  • 通常はブログタイプでないと表示できないサムネイル画像付きの記事一覧を通常タイプのサイトでも表示可能なコードをご用意。

このブロックはSIRIUS2搭載のパーツ<アイテム比較>を利用して表示させてます。

 

デフォルト設定では真ん中あたりにリンクボタンが配置されるんですが【Volar2】で用意したクラスで囲むことで最下部に移動します。

パーツ<アイテム比較>を利用して<【Volar2】並列表記の固定表示FAQ>という【Volar2】オリジナルレイアウトもご用意してみました。

デモページの並列表記の固定表示FAQで実際の表示がご覧になれます。

パーツ<アイテム比較>を利用した<【Volar2】表示領域に達したらカウントアップするカウンター>機能もご用意してみました。

デモページの表示領域に達したらカウントアップするカウンターで実際の表示がご覧になれます。

SIRIUS2購入価格

SIRIUS2本体(1年間無料サポート)
28,800円(税込)

プラチナサポート(1年分:オプションサービス)
7,700円(税込)

プラチナサポート→無償サポート、無償アップデート

プラチナサポートに入らなくてもSIRIUS2の利用継続は可。

ただしバージョンアップやサポートは受けられません。

 

サポート

サポートはメールのみ。旧SIRIUS時代のような専用掲示板はありません

また旧SIRIUS同様、サポート期間に制限はないようです。

【Volar2】の入手方法

【Volar2】入手手順
  • STEP
    公式サイトを開く

    下の方にある「公式サイト・特典付き購入はこちら」ボタンをクリックして公式サイトを開きます。

  • STEP
    SIRIUS2を購入

    公式サイトにてSIRIUS2の購入ボタンをクリックします。

  • STEP
    決済画面の確認

    インフォトップ」という決済サイトの決済画面に進みます。

     

    決済画面で、ご購入商品名や価格欄の下に以下の赤枠内が表示されてることをご確認ください。

     

    キャプチャ画像

     

    もしも表示されてないまま決済を完了してしまうと特典をお受け取りになることができません

     

    またお問合せをいただいても特典のお渡しは不可となってしまいます。

  • STEP
    特典請求

    SIRIUS2ご購入後、購入者専用のマイページ特典請求用のPDFがダウンロードできます。

    開いたら登録フォームに必要事項を記入後送信してください。

     

    確認でき次第、すみやかに当方からログインIDやパスワードを返信いたします。

必ずお読みください
  • SIRIUS2の発表と共にSIRIUS2用カスタムテンプレートとして個人で開発したのが【Volar2】です。
  • 【Volar2】は当サイト経由にてSIRIUS2を購入された際の特典として配布してます。
  • 【Volar2】はレスポンシブデザインのみでの動作保証となっており、「スマホサイト同時生成」ONでの動作チェックはやっておりません。(※動作保証外)
  • 【Volar2】の機能を利用するにはテキストモードでの編集になります。(※デザインモードはサポート外)
  • サポートに関しては原則メールでのやりとりとしてます。ただしできるだけご要望に応じるようにはしてますが、個人開発ゆえ”その案件は無理です”と回答することもあります。また今のところサポート期限は設けておりません。
  • 体調不良などの理由により新規開発やサポートを予告なく打ち切らざるをえないこともありえます。
  • 【Volar2】はできる限りの動作チェックを済ませた上で公開しておりますが、万が一【Volar2】をご利用になられてのいかなる損害も当方では一切の責任を負いかねます

 

上記内容をご理解いただけましたら下のチェックボックスをクリックしてください。

特典付き購入サイトへのリンクボタンが有効になります。

 

プロフィール画像

当サイトの管理人”きゅいじん”です。

以前勤務していた会社のウェブサイトの運用を1人で任されていた経験から、ウェブデザインの知識・商品撮影・画像加工、SEOに至るまで完全独学でやってきました。

この経験を活かし現在はネットビジネスで生きております。

独学ならではの疑問点や苦労はきっとあなたと共有できることでしょう。

ご質問・ご要望等がございましたらお気軽にお問合せください。

【Volar2】アップデート情報

【Volar2】はSIRIUS2のアップデートに併せて随時動作チェックを行っております。

 

また【Volar2】のバージョンはSIRIUS2のバージョンナンバーと(可能な限り)一致させているので、ナンバーが異なってる時は最新版へのアップデートの準備中とお考え下さい。

 

現時点でのSIRIUS2最新バージョン 1.221
(2025/01)
【Volar2】の最新バージョン 1.221α(2025/06)
【Volar2】アップデート

ver.1.221α

[2025.6.27]テンプレートやモジュールを大幅刷新しました。

以前よりも使いやすくしたつもりですが、これまでの利用者は【Volar2】の再インストールが必要になります。

ver.1.221

[2025.1.28]SIRIUS2のフッターエリアにお問い合わせなどに最適な『下部CTA』機能が搭載されたバージョン1.221はテンプレートの初期化作業が含まれておりますが、SIRIUS2に元々付属しているテンプレートのみが初期化の対象となってます。

それゆえ【Volar2】は初期化対象外となり、そのままだとSIRIUS2の本来の機能を100%発揮させることができません。

そこで当方にて”初期化処理”した【Volar2】1.221を用意しましたので、マニュアルをご覧になって【Volar2】の再インストールを完了してください。

ver.1.190

[2024.10.14]SIRIUS2 ver.1.190はテンプレートの初期化作業が含まれておりますが、SIRIUS2に元々付属しているテンプレートのみが初期化の対象となってます。

それゆえ【Volar2】は初期化対象外となり、そのままだとSIRIUS2の本来の機能を100%発揮させることができません。

そこで当方にて”初期化処理”した【Volar2】1.190を用意しましたので、マニュアルをご覧になって【Volar2】の再インストールを完了してください。

ver.1.182

[2024.9.3]【Volar2】の機能を大幅にアップデートしました。

ver.1.18

1カラム形式のページに開閉式のサイドメニューを表示できる『PCでもハンバーガーメニュー』機能を搭載しました。

ver.1.17

今回は「テンプレート・モジュール・ユーザー指定スタイル」など修正箇所が膨大になったため、”ファイルの差し替え”か”中身の差し替え”でのお願いになります。

ver.1.15

スタイル変更

「横スクロールできます」テキスト用スタイル追加。

「テーブルでマイクロコピー」用スタイル追加。

モジュール追加

【Volar2】テーブル幅調整(スタイル)

【Volar2】テーブルアイコン(スタイル)

【Volar2】テーブル縦書き(スタイル)

モジュール(内容)変更

【Volar2】画像拡大(スタイル)

【Volar2】専用画像フォルダ追加

【Volar2】専用の画像フォルダを作成。

定型文追加

定型文を一部追加しました。

ver.1.14

  • エントリーページでも開閉式サイドメニューが搭載可能になったので【テンプレート・トップーページ】及び【テンプレート・エントリーページ】の内容を一部変更。
  • 画像拡大』機能を追加。これに伴い専用のスタイルとスクリプトと専用画像を追加。また『定型文』にも専用HTMLコードを追加。
  • PCとスマホで別々のテキストを表示可能な自動変換クラスを追加。
  • 機能変更や機能追加に伴いユーザー指定スタイル及び一部のモジュールも変更。

SIRIUS2と旧SIRIUSとの比較

キャプチャ画像

HTML表示の”テキストモード”と見た目のまま編集可能な”デザインモード”での編集方式は基本ベースでは変わってません。

もちろんインターフェースはSIRIUS2用にバージョンアップして見やすくなってますし新機能も豊富に搭載されてます。

 

キャプチャ画像

完全リニューアルのテンプレートは6種類。

サイトイメージに合わせてそれぞれ雰囲気が異なってます。

(※当サイトはベーステンプレートを基にしたカスタムテンプレート【Volar2】を採用)

 

添付のヘッダー画像も”使える”素材が増えてます。

 

背景画像

基本構成はレスポンシブデザインで、PCやスマホなどどの機器で見ても最適なレイアウトで表示されるよう設計されてます。

旧SIRIUSに搭載されてた『iPhoneサイト同時生成』機能も『スマホサイト同時生成』と名称を変更して引き続き搭載されてます。

「スマートフォン上だけに表示させたいコンテンツ」が多い場合にはONにするといいでしょう。

 

 

このブロックはSIRIUS2標準搭載のパーツ[画像レイアウト]を使って表示してます。

パーツ<画像レイアウト>をカスタマイズして、画像とテキストエリアを(余白なしの)完全交互表示にしたタイプ(【Volar2】搭載機能)も用意しました。

デモページの<画像レイアウト>余白なし交互表示で実際の表示サンプルがご覧になれます。

SIRIUS2の新機能(パーツ)

SIRIUS2ではトップページや1カラムのランディングページ(LP)用に新たに「パーツ」という機能を搭載してます。

 

それぞれに専用の設定画面が用意されておりHTMLなど気にせず様々なデザインを構築できます。

(このブロックも直前のブロックも「パーツ」機能で作成したものです)

 

現在13のパーツが搭載されてます。

 

画像とテキストの組合せによるさまざまなレイアウト機能。

選択肢を選ぶだけでデザインをガラッと変えることができます。

ページ内に複数の画像を並べて表示できる画像ギャラリー。

画像をクリックするとポップアップで拡大表示されます。

複数の画像をスライドショー形式で表示できます。

シングル表示・マルチ表示・カルーセル表示、背景画像アニメーション表示などいろいろ。

タブコンテンツを使えば複数の情報をコンパクトにまとめることができます。

手順や流れをステップ形式で表示できるフローチャートが簡単に作れます。

複数のデザインパターンが用意されており、テキストカラーや文言も変更可。

複数の製品・サービスの価格や特徴などを比較表示できます。

画像を登録&おススメ商品にチェックを入れるだけのカンタン操作。

イメージ画像を選択し、タイトル・説明文・リンク先URLを入力するだけでバナー風CTAが作成できます。

デザイン違いやカラーも用意されてます。

リンク先のURLを入力するだけでリンク先の情報を自動的に解析して表示してくれます。

タイトルや説明文などは手動でも編集可。

FAQ形式のコンテンツを複数作成できるFAQリスト。

質問と回答を書いていくだけで開閉式リストができあがります。

商品やサービスを「口コミレビュー」形式で評価表示できます。

専用の設定画面に必要事項を入力するだけでOK。

複数の人物が会話をしているような吹き出しを作成できます。

デザインやカラーも複数ご用意。

スマホにも最適化されたランキングが作れます。

レビューグラフを添付したりさまざまな機能が盛り沢山。

簡易的ではありますが、標準でお問合せフォームが作れます。

最低限メールアドレスを入力するだけでも完成します。

このブロックはSIRIUS2標準搭載のパーツ[画像レイアウト]を使って表示してます。

パーツ<画像レイアウト>で背景色を付けたタイプも用意しました。(【Volar2】搭載機能

デモページの<画像レイアウト>背景色付きで実際の表示サンプルがご覧になれます。

 

また見出しを強調表示した枠線のみのシンプルなタイプもご用意しました。(【Volar2】搭載機能

デモページの<画像レイアウト>シンプルで実際の表示サンプルがご覧になれます。

SIRIUS2の新機能(その他)

このブロックもSIRIUS2標準搭載のパーツ<画像レイアウト>を使って表示してます。

 

なお<画像レイアウト>の独自タグを【Volar2】で用意している専用のクラスで囲んでやるだけで、このブロックのようにちょっと小さめのアイコン風画像+見出しブロック表示に変えられます。

パーツ<画像レイアウト>を利用して背景色を付けたタイプも用意しました。(【Volar2】搭載機能

デモページの<画像レイアウト>画像(小)枠付きで実際の表示がご覧になれます。

SIRIUS2のその他の機能
  • サイトの引き継ぎ(旧SIRIUSサイトをSIRIUS2に鞍替え)
  • サイト高速化設定(サイトオプション→全体設定→全体の設定)
  • 構造化データ(サイトオプション→全体設定→構造化データ)
  • WebP形式での画像出力(サイトオプション→全体設定→全体の設定)
  • パンくずリストの構造化(サイトオプション→全体設定→サイトの表示設定)などなど

最新の記事一覧

 

『サイトタイプ』が「通常タイプ」のサイトでも、【Volar2】で用意している専用HTMLを丸ごとペーストすることでブログ記事一覧を表示できます。