独自の囲み枠
SIRIUSに標準で搭載されてる囲み枠以外に、【Volar】独自の囲み枠もいくつか用意してます。
【Volar】オリジナル囲み枠
二重枠
※サイトカラーと連動
<div class="kakomi_double">
（※テキスト）
</div>
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
『サイトカラーと連動』とあるのは、自動的にサイトカラー（ベースカラー）と同一の色で表示される仕様です。
二重枠（角丸バージョン）
※サイトカラーと連動
<div class="kakomi_double_kadomaru">
（※テキスト）
</div>
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
布風（色違いバージョン）
背景が布地風の囲み枠。
背景：ブルー
<div class="kakomi_nuno_blue">
（※テキスト）
</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="kakomi_dotline_blue">
（※テキスト）
</div>
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
カラー：イエロー
<div class="kakomi_dotline_yellow">
（※テキスト）
</div>
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
カラー：オレンジ
<div class="kakomi_dotline_orange">
（※テキスト）
</div>
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
カラー：グレー
<div class="kakomi_dotline_gray">
（※テキスト）
</div>
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
付箋
付箋（ふせん）っぽい雰囲気の見出し。
カラー：ブルー
<div class="fusen_blue">（※テキスト）</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>
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
強調テキスト
- リスト形式もできる
- リスト形式もできる
- リスト形式もできる
- リスト形式もできる
引用
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
これまで紹介してきた【Volar】装飾機能はSIRIUS標準のテキスト装飾のように”アイコンをクリックして一発入力”というわけにはいかず専用のクラスを追加することで実現します。
そのためよく使う装飾に関しては文字装飾やクラスの設定などにクラスを登録しておくと簡単に適用することができます。
ただし「タイトル付き」や「黒板風」など、コードが複数行にまたがる一部の囲み枠は上記の機能が使えない場合があります。
その場合はコード全体を『定型文』などに登録しておくと1クリックで編集画面にコピー＆ペーストすることができます。
『文字装飾設定』についてはこちら↓の記事にまとめてあります。
SIRIUSの文字装飾設定をご紹介します。
『クラスの設定』についてはこちら↓の記事にまとめてあります。
SIRIUSのクラスの設定をご紹介します。
『定型文』についてはこちら↓の記事にまとめてあります。
SIRIUSの複雑なコードやよく使う文章などを登録しておける定型文をご紹介します。
inoreader
