【Volar2】の独自機能-SIRIUS2

パーツ＜画像レイアウト＞に追加搭載した【Volar2】独自の機能をご紹介します。

パーツ＜画像ギャラリー＞のスマホでの見え方をカスタマイズした【Volar2】独自のレイアウト機能をご紹介します。

【Volar2】ではトップページのみですがヘッダー画像を動画ヘッダーに変えることができます。動作チェック済み（対応可能）なのはmp4動画のみです。（※Youtube動画は現状では未対応）DEMOページを見てみるDEMOサイトで使ってるのは動画ACからダウンロードしたフリー素材です。

【Volar2】ではトップページのみですがヘッダー画像をズーム付きのフェード切り替え画像スライダーに変更することができます。DEMOページを見てみる

【Volar2】では1カラムページに限り、サイドメニューを開閉式で表示可能な”ハンバーガーメニュー”ボタンを表示させることができます。”ハンバーガーメニュー”とはスマホ表示時なんかに表示される画面右上の3本線「≡」のこと。見た目がハンバーガ―に似ているところからこう呼ばれることが多いです。当サイトト...

新機能追加このページで紹介している《【Volar2】フルワイド背景画像》機能は設定がやや複雑なため、設定を簡略化した《フルワイド背景画像（シンプル）》機能を新たに搭載しました。PC表示時のみの背景画像の指定とダークモードにするかしないかだけの設定と機能は絞られますが、設定自体はかなり簡素化してます。...

【Volar2】の《フルワイド背景画像（シンプル版）》ですが、機能としてはSIRIUS2標準搭載の『ブロック設定』の背景画像とほぼ同じです。では何が違うのでしょうか。【Volar2】に元々搭載していた《フルワイド背景画像（機能停止）》機能も含めてその違いを先にご紹介します。《フルワイド背景画像（シン...

どんなに大きな画像でも通常は横幅はコンテンツ枠内での表示になります。これをコンテンツの幅に関係なくブラウザの横幅いっぱいまで広げることができます。画像でインパクトを出したい時などに効果的です。こちらは”背景”画像のフルワイド化ではなく、編集画面内に直接挿入する画像をフルワイド（ブラウザ幅いっぱいに表...

SIRIUS2標準の装飾機能はかなり充実してます。それに加えて【Volar2】でもオシャレな装飾機能を多数搭載しました。コードの最後についてる一文字は基本的にカラーを表します。r＝レッド系b＝ブルー系g＝グレー系y＝イエロー系o＝オレンジ系gr＝グリーン系

ここはランディングページ（LP）の体裁でご紹介していきます。ご覧になってわかるようにコンテンツ以外は（最下部のコピーライト表記を除いて）非表示にしてます。こういったLPを作るには不必要なブロックを1個ずつ消す（非表示にする）必要があるんですが、1個1個確認しながらスタイルシートを操作するのは初心者や...

【Volar2】には人気記事の1番目から4番目までをサムネイル画像付きで自動表記できる《人気記事4点固定表示》があります。

【Volar2】ではトップページ最上段に流れるテキストを表示できる《ニュースティッカー》機能を搭載してます。

【Volar2】にはブラウザの右端に常時表示可能な《サイドボタン》機能を搭載してます。こちらが通常版です。（当サイトがデモになります）機能追加縦書き＆ボタン2個の縦書き（版）も追加しました。※”サイドボタン（縦書き）”が加わったことで、これまでの『サイドボタン』は『サイドボタン（通常版）』と表記しま...

【Volar2】ではサイズ違いのオリジナルのバナーデザイン機能を搭載してます。主に1カラム（ワイド）での利用を想定したレイアウトです。また画像自体はあなたご自身でご用意していただく必要があります。DEMOページを見てみる

【Volar2】では常にループし続ける《ループスライダー》機能を搭載してます。1カラム（ワイド）での利用を想定してデザインしてます。DEMOページを見てみる

左にテキスト・右に画像ギャラリーというある意味”ピンポイント”な《スプリットギャラリー》機能を作ってみました。商品やサービス等の紹介などで使えるかと。（適当な呼び名がないので”スプリット（※分割）ギャラリー”と名付けてます）1カラム（ワイド）での利用を想定してデザインしてます。DEMOページを見てみ...

【Volar2】ではテーブル（表）を効果的に見せる機能を付けてみました。機能自体はとても便利なんですけど、手順は簡単…とは言えないところがちょっと。

【Volar2】では【パーツ】→＜アイテム比較＞を利用して、可視領域に達したらカウントアップするカウンター機能を付けてみました。DEMOページを見てみる（※わかりにくかったときはブラウザの更新ボタンをクリックしてみてください）

【Volar2】では【パーツ】→＜アイテム比較＞を利用して1カラムページ用の並列表記かつ固定表示FAQを作成できます。DEMOページを見てみる

【パーツ】→＜タブコンテンツ＞ではタイトル欄と内容欄に入力するだけで、美しいレイアウトのタブ分けコンテンツが簡単に作成できます。ただ一部のデザインを除いてはボーダー（境界線）が表示されないので、どこからどこまでがタブコンテンツの内容なのかがちょっとわかりにくい印象も受けました。そこでタブコンテンツに...

【Volar2】では【パーツ】→＜口コミ＞を利用したスタッフ紹介欄を作成できます。DEMOページを見てみる

【Volar2】では【パーツ】→＜CTA＞用の独自レイアウトを追加でご用意しました。

【Volar2】では【パーツ】→＜リンクカード＞用の独自レイアウトを追加でご用意しました。

SIRIUS2には（ver.1.03のアップデートで）＜見出しデザイン＞の一括変更機能が搭載されました。この機能はとても便利なんですが、1カラム（ワイド含む）時のレイアウトが個人的にちょっと使いづらいかなあと思うこともあったので《【Volar2】オリジナル見出し一括変更》も考えてみました。

【Volar2】では指定した日にちになるとそれまでの価格（数値）を自動的に新価格に変更してくれる機能を搭載してます。

【Volar2】では指定した期間だけコンテンツを表示できる機能を搭載してます。

SIRIUS2にはページの更新がされた際にその履歴を表示する機能がデフォルトで搭載されてます。”更新履歴”とありますが、実際には新しい記事を書き上げると記事公開日順に自動的にここに表示されます。また純粋な意味で記事を”更新”した場合、記事を修正したあと「公開日時」を”現在の日時”で更新しても履歴の最...

SIRIUS2 ver.1.180にて新たに追加された2種類のテンプレートのうち、テンプレート（和モダン）はデフォルト設定だと明朝体での表示になります。もちろん他のテンプレートでもサイトオプションで「明朝体」を選択すれば明朝体での表示にはなります。その場合、明朝体として使われるのは「游明朝」というフ...

カーニングというのは文字詰めのことで、【Volar2】では日本語フォントのカーニング機能を搭載してます。カーニングが効くのはSIRIUS2ではwebフォント（Noto Sans JP）か游ゴシックか游明朝のみになります。

【Volar2】には和風サイトでよく見かける《縦書きモード》機能を搭載してます。（※PC＆タブレット表示時のみ）

【Volar2】では目次を《ボタンリンク風の並列表記》に変える機能を搭載してます。1カラムページでの運用をベースに作ってみました。

SIRIUS2で作るサイトタイプには「通常タイプ」と「ブログタイプ」があります。両者の一番の違いは「通常タイプ」はトップページに何か書かないとトップページとして表示されるものはゼロであるということ。これに対して「ブログタイプ」はトップページに何も書かなくてもWordPressワードプレスで作ったブロ...

【Volar2】では《フッターエリアに背景画像》を表示できるスタイルを用意してます。はっきり言って見映えだけです。サイトイメージの向上です。それでもフッターまで見てもらってリンクをクリックしてもらってサイト内を回遊してもらって…そうなってくれればありがたいですね。

SIRIUS2には＜プロフィール表示＞機能が搭載されてます。ただし機能としてはシンプルな執筆者情報の表示のみの機能にとどまってます。【Volar2】の《プロフィール表示》機能はいわゆる”サイト運営者情報”の表示機能になります。

SIRIUS2には合計8ヵ所の＜フリースペース＞機能が搭載されてます。（フリースペース1～8）このうちサイドメニュー用のフリースペースは2ヵ所（サイドメニュー最上段＆最下段）。ただこれだけだとバナー画像を追加したり広告を追加するにはちょっと物足りません。そこで【Volar2】ではもう2ヵ所、追加のフ...

【Volar2】には《記事タイトルと記事URLを（1クリックで）コピー》できるボタン機能があります。