SIRIUS2には（旧SIRIUS時代からも搭載されてる）さまざまな装飾デザインのついた枠囲み機能＜装飾枠＞が標準で搭載されてます。
＜装飾枠＞の各機能は、記事装飾メニューの［装飾枠］をクリックすると出てきます。
基本的には装飾枠をつけたいテキストや画像を全選択した後、［装飾枠］の各メニューから充てたい枠を選択するだけで完了です。
先に［装飾枠］の各メニューから好きな枠を選択後、入力されたタグ内に記述するというやり方でもOK。
メイン装飾枠
比較的よく使われる4つの装飾枠がこちら。
警告（NGマーク）
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。文字の大きさ、量、字間、行間等を確認するために入れています。
承諾（OKマーク）
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。文字の大きさ、量、字間、行間等を確認するために入れています。
注意（！マーク）
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。文字の大きさ、量、字間、行間等を確認するために入れています。
ヒント
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。文字の大きさ、量、字間、行間等を確認するために入れています。
注釈
こちらは本文中に「※1」→「自動で記事末尾に注釈一覧を生成」といった脚注機能ではなく、単なるデザイン装飾です。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。文字の大きさ、量、字間、行間等を確認するために入れています。
口コミ
口コミ（男性）
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。文字の大きさ、量、字間、行間等を確認するために入れています。
口コミ（女性）
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。文字の大きさ、量、字間、行間等を確認するために入れています。
アイコン変更のやり方
アイコンを独自のものに変更することもできます。
その際デフォルトで用意されてるアイコン画像を残しておきたい場合はリボンバーの【画像管理】を開き、『すべての画像』タブをクリック→検索窓に「user」と打ち込みEnterキーを押すと下のような抽出画面になります。
『口コミ（男性）』側を変更したいなら「user1.png」を、『口コミ（女性）』側なら「user2.png」の画像上で右クリック→「名前の変更」を選択します。
ダイアログが出てくるので適当にファイル名を変更しておきます。（元に戻せるようにuserの名称は残しておくとあとで検索しやすいです）
新しいアイコン画像ですが、サイズは54×54px、出力形式はPNG画像、ファイル名は『口コミ（男性）』側なら「user1.png」に、『口コミ（女性）』側なら「user2.png」になります。（PNG画像の説明は割愛します）
作成したPNG画像をSIRIUS2の画像管理内に放り込み（ドラッグ＆ドロップ）ます。これでアイコンが独自画像のもので表示されるようになります。
FAQ
『FAQ』の場合は先に「FAQデザイン1（or 2）」を選択します。すると下のような専用タグが打ち込まれます。
<div class="question1">ここに質問を入力</div>
<div class="answer1">
ここに回答を入力
</div>
「ここに質問を入力」を削除して質問文を入力します。
続いて「ここに回答を入力」を削除して回答文を入力します。
FAQデザイン1
やり方は簡単ですか？
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。文字の大きさ、量、字間、行間等を確認するために入れています。
FAQデザイン2
やり方は簡単ですか？
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。文字の大きさ、量、字間、行間等を確認するために入れています。
画像なし
こちらは「メイン装飾枠」と「口コミ」のアイコン画像なしパターンになります。
アイコン画像付き
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。文字の大きさ、量、字間、行間等を確認するために入れています。
アイコン画像なし
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。文字の大きさ、量、字間、行間等を確認するために入れています。
タイトル付きボックス
『タイトル付きボックス』ですが、文字通りボックス（枠囲み）の上段にタイトルを表示できる装飾効果です。
『タイトル付きボックス』を選択すると下のような入力ダイアログが出ます。
下のサンプルのように種類が「注釈」だと一部がグレー表示で使えない効果もありますが、基本的には赤枠内の選択肢の組み合わせで何十通りもの『タイトル付きボックス』を作成できます。
種類が「シンプル」だとすべての効果から選択可能になります。
実際の表示がこちら。
ここにタイトルが入ります
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。文字の大きさ、量、字間、行間等を確認するために入れています。
効率的な修正方法
『タイトル付きボックス』の内容の修正時、テキスト関連は編集画面上でもなんとか修正はできます。
しかしながら見出しやパターンやカラーなどは再度ダイアログを出して選択し直した方が効率的です。というかHTMLや専用のクラスをいじるので編集画面上での修正は熟練者でも難しいでしょう。
そのダイアログの出し方ですが、上のサンプルの編集画面でご説明します。
編集画面上での実際の表記は下のようになってます。ここで①のコメントから②のコメントまでをすべて選択状態にします。
そのまま続けて［装飾枠］→『タイトル付きボックス』を選択します。
これで最初に入力したのと同じ入力画面が出るのでそこで修正を図ります。
最後にいくつか『タイトル付きボックス』のサンプルをご紹介します。
あとは実際にご自身で確認してみてください。とてもじゃないですけどここで全部紹介するのは骨が折れますので。
注意事項
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。文字の大きさ、量、字間、行間等を確認するために入れています。
タイトルが折り込みリボン
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。文字の大きさ、量、字間、行間等を確認するために入れています。
かわいい系？
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。文字の大きさ、量、字間、行間等を確認するために入れています。
ナチュラルタイプ
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。文字の大きさ、量、字間、行間等を確認するために入れています。
ポップ系
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。文字の大きさ、量、字間、行間等を確認するために入れています。
フォーマル
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。文字の大きさ、量、字間、行間等を確認するために入れています。
『装飾枠』の関連記事
-
旧SIRIUSから受け継がれるテキストモードとデザインモードのパワーアップした機能についての詳細ページ。 -
SIRIUS2の＜スマホサイト同時生成＞についての詳細ページ。 -
SIRIUS2のパワーアップした画像管理画面の詳細ページ。 -
SIRIUS2の画像管理内の画像のフォルダ分け詳細ページ。 -
よく使うクラスや文章・コードなどの各登録機能の違いについての詳細ページ。 -
パワーアップされたモジュール機能についての詳細ページ。 -
SIRIUS2で8個にパワーアップした＜フリースペース＞についての詳細ページ。 -
SIRIUS2の内蔵ブラウザは常に表示させておくと時短チェックかつデザインモード以上の再現性を見せてくれます。