※モバイル機器のみ作動→PC表示に切替 モバイル表示に切替

【Volar】に搭載されてるオリジナル機能に関してはデザインモードではなくデフォルトの編集画面でのご利用を前提としてます。

特に記載がない限り、ご紹介する機能は【Volar】及び【Volarデザイン】に共通搭載となります。

【Volar】独自の囲み枠

【Volar】オリジナル囲み枠

SIRIUSテンプレート【Volar】独自の囲み枠をご紹介します。

 

SIRIUS標準のように”アイコンをクリックして一発入力”というわけにはいかないので、よく使うモノに関しては文字装飾クラスの設定などにクラスを登録してご利用ください。

 

ただし「タイトル付き」や「黒板風」など、コードが複数行にまたがる一部の囲み枠は上記の機能が使えない場合があります。

 

その場合はコード全体を『定型文』などに登録しておくと1クリックで編集画面にコピー&ペーストできます。

 

『文字装飾設定』についてはこちら↓の記事にまとめてあります。

SIRIUSの文字装飾設定

SIRIUSの文字装飾設定をご紹介します。

 

『クラスの設定』についてはこちら↓の記事にまとめてあります。

SIRIUSのクラスの設定

SIRIUSのクラスの設定をご紹介します。

 

『定型文』についてはこちら↓の記事にまとめてあります。

SIRIUSの定型文

SIRIUSの複雑なコードやよく使う文章などを登録しておける定型文をご紹介します。

 

二重枠

※サイトカラーと連動

<div class="kakomi_double">

(※テキスト)

</div>

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

二重枠(角丸バージョン)

※サイトカラーと連動

<div class="kakomi_double_kadomaru">

(※テキスト)

</div>

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

布風

背景が布地風の囲み枠です。

 

背景:ブルー

<div class="kakomi_nuno_blue">

(※テキスト)

</div>

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

背景:ピンク

<div class="kakomi_nuno_pink">

(※テキスト)

</div>

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

背景:イエロー

<div class="kakomi_nuno_yellow">

(※テキスト)

</div>

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

背景:オレンジ

<div class="kakomi_nuno_orange">

(※テキスト)

</div>

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

背景:グレー

<div class="kakomi_nuno_gray">

(※テキスト)

</div>

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

タイトル付き1

※サイトカラーと連動

<div class="kakomi_title1">

<div class="box-title">(※見出し)</div>

(※テキスト)

</div>

ここに注目!

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

タイトル付き1(色違いバージョン)

※こちらはタイトル付き1の色違いバージョンになります。

(サイトカラーとは連動しません)

 

カラー:ブルー

<div class="kakomi_title1_blue">

<div class="box-title">(※見出し)</div>

(※テキスト)

</div>

ここに注目!

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

カラー:イエロー

<div class="kakomi_title1_yellow">

<div class="box-title">(※見出し)</div>

(※テキスト)

</div>

ここに注目!

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

カラー:オレンジ

<div class="kakomi_title1_orange">

<div class="box-title">(※見出し)</div>

(※テキスト)

</div>

ここに注目!

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

カラー:グレー

<div class="kakomi_title1_gray">

<div class="box-title">(※見出し)</div>

(※テキスト)

</div>

ここに注目!

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

タイトル付き2

※サイトカラーと連動

<div class="kakomi_title2">

<div class="box-title">(※見出し)</div>

(※テキスト)

</div>

ここに注目!

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

タイトル付き2(色違いバージョン)

※こちらはタイトル付き2の色違いバージョンになります。

(サイトカラーとは連動しません)

 

カラー:ブルー

<div class="kakomi_title2_blue">

<div class="box-title">(※見出し)</div>

(※テキスト)

</div>

ここに注目!

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

カラー:イエロー

<div class="kakomi_title2_yellow">

<div class="box-title">(※見出し)</div>

(※テキスト)

</div>

ここに注目!

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

カラー:オレンジ

<div class="kakomi_title2_orange">

<div class="box-title">(※見出し)</div>

(※テキスト)

</div>

ここに注目!

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

カラー:グレー

<div class="kakomi_title2_gray">

<div class="box-title">(※見出し)</div>

(※テキスト)

</div>

ここに注目!

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

タイトル付き3

※サイトカラーと連動

<div class="kakomi_title3">

<div class="box-title">(※見出し)</div>

(※テキスト)

</div>

ここに注目!

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

タイトル付き3(色違いバージョン)

※こちらはタイトル付き3の色違いバージョンになります。

(サイトカラーとは連動しません)

 

カラー:ブルー

<div class="kakomi_title3_blue">

<div class="box-title">(※見出し)</div>

(※テキスト)

</div>

ここに注目!

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

カラー:イエロー

<div class="kakomi_title3_yellow">

<div class="box-title">(※見出し)</div>

(※テキスト)

</div>

ここに注目!

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

カラー:オレンジ

<div class="kakomi_title3_orange">

<div class="box-title">(※見出し)</div>

(※テキスト)

</div>

ここに注目!

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

カラー:グレー

<div class="kakomi_title3_gray">

<div class="box-title">(※見出し)</div>

(※テキスト)

</div>

ここに注目!

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

破線

※サイトカラーと連動

<div class="kakomi_hasen">

(※テキスト)

</div>

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

付箋

付箋ふせんっぽい雰囲気の見出しにどうぞ。

 

カラー:ブルー

<div class="fusen_blue">(※テキスト)</div>

付箋風見出しに使える?

 

カラー:ピンク

<div class="fusen_pink">(※テキスト)</div>

付箋風見出しに使える?

 

カラー:レッド

<div class="fusen_red">(※テキスト)</div>

付箋風見出しに使える?

 

カラー:イエロー

<div class="fusen_yellow">(※テキスト)</div>

付箋風見出しに使える?

 

カラー:オレンジ

<div class="fusen_orange">(※テキスト)</div>

付箋風見出しに使える?

 

カラー:グレー

<div class="fusen_gray">(※テキスト)</div>

付箋風見出しに使える?

 

背景が和紙風

<div class="kakomi_paper">

(※テキスト)

</div>

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

背景がメモ用紙風

<div class="kakomi_memo">

(※テキスト)

</div>

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

黒板風

<div class="kokuban">

<div class="k_title">(※囲みタイトル)</div>

(※テキスト)

<p class="kyocho">(※強調テキスト)</p>

(※テキスト)

</div>

囲みタイトル

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

強調テキスト

  • リスト形式もできる
  • リスト形式もできる
  • リスト形式もできる
  • リスト形式もできる

 

引用

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

SIRIUSテンプレート【Volar】

キャプチャ画像

SIRIUS ver.1.5で大幅刷新された新テンプレートを元に、独自のカスタマイズを加えた改良型SIRIUSテンプレートが【Volar】です。

入手方法についてはコチラ↓をご覧ください。
 この記事をシェア 
キャプチャ画像