テキスト関連
テキストカラー
この文章は明るい赤色です。
<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）
キーボード文字
取り消しはCtrl＋zキーです。
取り消しは<kbd>Ctrl</kbd>＋<kbd>z</kbd>キーです。
※カスタム文字装飾に登録済みなので、文字列を範囲選択して1クリックで適用。
テキスト自動変換
文章の一部をPC表示時とモバイル表示時で別々のテキストを表示することができます。
サンプルとしてこのあとPC表示時は「クリック」と表示され、モバイル表示時は「タップ」と表示されます。
ここをクリックタップしてください。
ここを<span class="pc_only">クリック</span><span class="sp_only">タップ</span>してください。
※ベースとなるコードはカスタム文字装飾に登録済みなので文字列を範囲選択して1クリックで適用できます。
囲み装飾
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
文字の大きさ、量、字間、行間等を確認するために入れています。
<div class="box_kakko">
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
文字の大きさ、量、字間、行間等を確認するために入れています。
</div>
※ベースとなるコードはカスタム文字装飾に登録済みなので文字列を範囲選択して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-s fusen_paper_gr）
この文章はダミーです。
（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-m fusen_paper_gr）
この文章はダミーです。
この文章はダミーです。
（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）
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
文字の大きさ、量、字間、行間等を確認するために入れています。
（fusen-m fusen_paper_gr）
この文章はダミーです。
この文章はダミーです。
1カラムページ向け
テキスト枠70%
ブロック設定で『記事のワイド化』をONにしてる場合、テキスト（や画像）を記述すると左寄せになりますが、幅の広い1カラムレイアウトにおいて少量のテキストを配置した場合は極端に左端に寄ったイメージになってバランスが悪くなります。（※PC表示時）
ここで＜テキスト枠70%＞機能を使うとブラウザ幅のおよそ70%の横幅でエリア自体を中央寄せで表示させられるので、見た目のバランスが少しよくなります。
（”block-center”というクラスを使います）
短めのテキスト。短めのテキスト。短めのテキスト。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
<div class="block-center">
＜テキスト枠70%＞を適用した短めのテキスト。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
</div>
※ベースとなるコードは定型文に登録済みなので、1クリックで挿入後に中身だけを修正。
ブロック設定で『記事のワイド化』をOFFにしてる場合はさらに幅が狭まります。
テキスト枠70%・中央寄せ
上の＜テキスト枠70%＞はエリア自体を中央寄せにするクラスですが、中のテキストや画像も中央寄せにできるのが＜テキスト枠70%・中央寄せ＞です。
（”block-center2”というクラスを使います）
<div class="block-center2">
＜テキスト枠70%＞を適用した短めのテキスト。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
</div>
画像フルワイド化
通常はどんなに大きな画像でも横幅はコンテンツ枠内での表示になります。
これをコンテンツの幅に関係なくブラウザの横幅いっぱいまで広げることができます。
画像でインパクトを出したい時などに効果的です。
こちらで用意した専用のクラスで画像ファイルを囲ってやるだけです。
下の『（画像ファイル）』の部分は”画像挿入”で入力すればミスなく打ち込めます。
<div class="xxx">（画像ファイル）</div>
※詳しくはマニュアルをご覧ください。
テーブル関連
シンプルテーブル
2列のテーブル（表）。
背景透過・セル左寄せ・セル下線のみの機能。
<div class="simple-table">
上のサンプル画像は”左端のセル幅を30%にする”という【Volar2】の＜セル幅調節機能＞も付けてます。
『オリジナル装飾』の関連記事
-
SIRIUS2テンプレート【Volar2】にはテーブル（表）のデータの背景にアイコンをつけたりセル幅を自在に調節できたりする便利な機能が搭載されてます -
SIRIUS2テンプレート【Volar2】では標準機能の＜画像レイアウト＞に専用のタグを足すだけでさまざまなレイアウト表示ができるようになります。 -
SIRIUS2の＜画像ギャラリー＞におけるスマホでの見せ方のカスタマイズをご紹介します。 -
SIRIUS2テンプレート【Volar2】では通常のヘッダーエリアを動画ヘッダーに簡単に切り替えることができます。 -
SIRIUS2テンプレート【Volar2】では通常のヘッダーエリアをフェード切り替え画像スライダーに簡単に切り替えることができます。 -
SIRIUS2テンプレート【Volar2】では1カラム形式のページに開閉式のサイドメニューを表示させることができます。 -
SIRIUS2テンプレート【Volar2】の1カラムページで使える＜フルワイド背景画像＞についての詳細ページ。 -
SIRIUS2テンプレート【Volar2】の1カラムページで使える＜フルワイド背景画像＞のシンプル版。使い勝手が向上しました。