オリジナル装飾-SIRIUS2

オリジナル装飾

SIRIUS2テンプレート【Volar2】のテキスト周りを彩る<独自の装飾効果>についての詳細ページ。

アイキャッチ画像

SIRIUS2標準の装飾機能はかなり充実してます。

それに加えて【Volar2】でもオシャレな装飾機能を多数搭載しました。

 

コードの最後についてる一文字は基本的にカラーを表します。

  • r=レッド系
  • b=ブルー系
  • g=グレー系
  • y=イエロー系
  • o=オレンジ系
  • gr=グリーン系

テキスト関連

テキストカラー

この文章は明るい赤色です。

<span class="f_r">この文章は明るい赤色です。</span>

※カスタム文字装飾に登録済みなので、範囲選択して1クリックで適用。

この文章は太くて明るい赤色です。(f_r2)

この文章は暗い赤色です。(f_rr)

この文章は太くて暗い赤色です。(f_rr2)

この文章は青色です。(f_b)

この文章は太い青色です。(f_b2)

この文章は緑色です。(f_gr)

この文章は太い緑色です。(f_gr2)

この文章は黄色です。(f_y)

この文章は太い黄色です。(f_y2)

 

下線

この文章には黄色の下線がついてます。

<span class="kasen_y">この文章には黄色の下線がついてます。</span>

※カスタム文字装飾に登録済みなので、範囲選択して1クリックで適用。

この文章には青色の下線がついてます。(kasen_b)

この文章には赤色の下線がついてます。(kasen_r)

この文章には動くマーカーがついてます。(animation_marker)

 

テキストサイズ

この文章の文字サイズは標準の80%です。

<span class="f_80">この文章の文字サイズは標準の80%です。</span>

※カスタム文字装飾に登録済みなので、範囲選択して1クリックで適用。

この文章の文字サイズは標準の50%です。(f_50)

この文章の文字サイズは標準の85%です。(f_85)

この文章の文字サイズは標準の90%です。(f_90)

この文章の文字サイズは標準の95%です。(f_95)

この文章の文字サイズは標準サイズ(100%)です。(f_100)

この文章の文字サイズは標準の110%です。(f_110)

この文章の文字サイズは標準の120%です。(f_120)

この文章の文字サイズは標準の130%です。(f_130)

この文章の文字サイズは標準の140%です。(f_140)

この文章の文字サイズは標準の150%です。(f_150)

 

キーボード文字

取り消しはCtrlzキーです。

取り消しは<kbd>Ctrl</kbd>+<kbd>z</kbd>キーです。

※カスタム文字装飾に登録済みなので、文字列を範囲選択して1クリックで適用。

囲み装飾

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。
</div>

※ベースとなるコードはカスタム文字装飾に登録済みなので文字列を範囲選択して1クリックで適用させるか、定型文を1クリックで挿入後にテキストだけを修正。

※最後に「_s」を加筆するとテキスト量に応じて幅が自動調節されます。。

(box_kakko_s

この文章はダミーです。
この文章はダミーです。この文章はダミーです。

 

サブタイトル

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

<div class="box_title1_b">
<div class="title">サブタイトル</div>
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。

 

文字の大きさ、量、字間、行間等を確認するために入れています。
</div>

※ベースとなるコードは定型文に登録済みなので、1クリックで挿入後にテキストだけを修正。

(box_title1_g)

サブタイトル

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

(box_title1_y)

サブタイトル

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

(box_title1_o)

サブタイトル

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

(box_title1_gr)

サブタイトル

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

※最後に「_s」を加筆するとテキスト量に応じて幅が自動調節されます。

(box_title1_gr_s

サブタイトル

この文章はダミーです。この文章はダミーです。
この文章はダミーです。

 

(box_title2_b)

サブタイトル

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

(box_title2_g)

サブタイトル

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

(box_title2_y)

サブタイトル

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

(box_title2_o)

サブタイトル

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

(box_title2_gr)

サブタイトル

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

※最後に「_s」を加筆するとテキスト量に応じて幅が自動調節されます。

(box_title2_gr_s

サブタイトル

この文章はダミーです。
この文章はダミーです。

 

(box_title3_b)

サブタイトル

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

(box_title3_g)

サブタイトル

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

(box_title3_y)

サブタイトル

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

(box_title3_o)

サブタイトル

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

(box_title3_gr)

サブタイトル

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

※最後に「_s」を加筆するとテキスト量に応じて幅が自動調節されます。

(box_title3_gr_s

サブタイトル

この文章はダミーです。この文章はダミーです。この文章はダミーです。

 

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。
</div>

※ベースとなるコードはカスタム文字装飾に登録済みなので文字列を範囲選択して1クリックで適用させるか、定型文を1クリックで挿入後にテキストだけを修正。

(box_stitch_g)

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

(box_stitch_y)

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

(box_stitch_o)

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

(box_stitch_gr)

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

※最後に「_s」を加筆するとテキスト量に応じて幅が自動調節されます。

(box_stitch_gr_s

この文章はダミーです。この文章はダミーです。

 

黒板

<div class="kokuban">
黒板
</div>

※ベースとなるコードはカスタム文字装飾に登録済みなので文字列を範囲選択して1クリックで適用させるか、定型文を1クリックで挿入後にテキストだけを修正。

※最後に「_s」を加筆するとテキスト量に応じて幅が自動調節されます。

(kokuban_s

黒板・黒板・黒板・黒板・黒板

 

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。
</div>

※ベースとなるコードはカスタム文字装飾に登録済みなので文字列を範囲選択して1クリックで適用させるか、定型文を1クリックで挿入後にテキストだけを修正。

 

※最後に「2」を加筆すると点線が動きます。

(box_dotline_b2

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

 

(box_dotline_g)

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

(box_dotline_g2)

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

 

(box_dotline_y)

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

(box_dotline_y2)

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

 

(box_dotline_o)

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

(box_dotline_o2)

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

 

(box_dotline_gr)

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

(box_dotline_gr2)

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

 

※最後に「_s」を加筆するとテキスト量に応じて幅が自動調節されます。

(box_dotline_gr_s

この文章はダミーです。
この文章はダミーです。この文章はダミーです。

(box_dotline_gr2_s

この文章はダミーです。この文章はダミーです。この文章はダミーです。

付箋(ふせん)

この文章はダミーです。

<div class="fusen-s">
<div class="fusen_paper_b">
この文章はダミーです。
</div>
</div>

※ベースとなるコードは定型文に登録済みなので、1クリックで挿入後にテキストだけを修正。

(fusen-s fusen_paper_g)

この文章はダミーです。

(fusen-s fusen_paper_r)

この文章はダミーです。

(fusen-s fusen_paper_y)

この文章はダミーです。

(fusen-s fusen_paper_o)

この文章はダミーです。

 

(fusen-m fusen_paper_b)

この文章はダミーです。この文章はダミーです。

(fusen-m fusen_paper_g)

この文章はダミーです。この文章はダミーです。

(fusen-m fusen_paper_r)

この文章はダミーです。この文章はダミーです。

(fusen-m fusen_paper_y)

この文章はダミーです。この文章はダミーです。

(fusen-m fusen_paper_o)

この文章はダミーです。この文章はダミーです。

 

(fusen-l fusen_paper_b)

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

(fusen-l fusen_paper_g)

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

(fusen-l fusen_paper_r)

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

(fusen-l fusen_paper_y)

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

(fusen-l fusen_paper_o)

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

 

文字の大きさ、量、字間、行間等を確認するために入れています。

コメントフォーム(β版)

    ※コメントはこちらからどうぞ

    このフォームを作成するにあたって参考にしたサイト情報はこちらに載せてます