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
やり方は簡単ですか？
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。文字の大きさ、量、字間、行間等を確認するために入れています。
画像なし
こちらは「メイン装飾枠」と「口コミ」のアイコン画像なしパターンになります。
あえてアイコン画像が必要ないという場合に使うのでしょうが、アイコン分の横幅が縮まる（表示領域が広がる）わけではないことに注意。
アイコン画像付き
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。文字の大きさ、量、字間、行間等を確認するために入れています。
アイコン画像なし
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。文字の大きさ、量、字間、行間等を確認するために入れています。
表示領域の広げ方
もしも表示領域を広げたいという場合は、以下のスタイルを【ユーザー指定スタイル】に追記してみてください。
.alert.noimage, .accept.noimage, .attention.noimage, .thint.noimage {
padding-left: 1.4em!important;
}その結果がこちら。左余白が詰まってバランスがよくなりました。
左余白は上のコードの「1.4」という数値の増減で調整可能。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。文字の大きさ、量、字間、行間等を確認するために入れています。
タイトル付きボックス
『タイトル付きボックス』ですが、文字通りボックス（枠囲み）の上段にタイトルを表示できる装飾効果です。
『タイトル付きボックス』を選択すると下のような入力ダイアログが出ます。
種類が「注釈」だと一部がグレー表示で使えない効果もありますが、基本的には赤枠内の選択肢の組み合わせで何十通りもの『タイトル付きボックス』を作成できます。
種類が「シンプル」のだとすべての効果から選択可能です。
実際の表示がこちら。
ここにタイトルが入ります
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。文字の大きさ、量、字間、行間等を確認するために入れています。
効率的な修正方法
『タイトル付きボックス』の内容の修正時、テキスト関連は編集画面上でもなんとか修正できます。
しかしながら見出しやパターンやカラーなどは再度ダイアログを出して選択し直した方が効率的です。というかHTMLや専用のクラスをいじるので編集画面上での修正は熟練者でも難しいでしょう。
そのダイアログの出し方ですが、上のサンプルの編集画面でご説明します。
編集画面上での実際の表記は下のようになってます。ここで①のコメントから②のコメントまでをすべて選択状態にします。
そのまま続けて［装飾枠］→『タイトル付きボックス』を選択します。これで最初に入力したのと同じ入力画面が出るのでそこで修正を図ります。
最後にいくつか『タイトル付きボックス』のサンプルをご紹介します。
あとは実際にご自身で確認してみてください。とてもじゃないですけどここで全部紹介するのは骨が折れますので。
注意事項
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。文字の大きさ、量、字間、行間等を確認するために入れています。
タイトルが折り込みリボン
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。文字の大きさ、量、字間、行間等を確認するために入れています。
かわいい系？
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。文字の大きさ、量、字間、行間等を確認するために入れています。
ナチュラルタイプ
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。文字の大きさ、量、字間、行間等を確認するために入れています。
ポップ系
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。文字の大きさ、量、字間、行間等を確認するために入れています。
フォーマル
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。文字の大きさ、量、字間、行間等を確認するために入れています。
『装飾枠』の関連記事
-
旧SIRIUSから受け継がれるテキストモードとデザインモードのパワーアップした機能についての詳細ページ。 -
SIRIUS2の＜スマホサイト同時生成＞についての詳細ページ。 -
SIRIUS2のパワーアップした画像管理画面の詳細ページ。 -
SIRIUS2の画像管理内の画像のフォルダ分け詳細ページ。 -
よく使うクラスや文章・コードなどの各登録機能の違いについての詳細ページ。 -
パワーアップされたモジュール機能についての詳細ページ。 -
SIRIUS2で8個にパワーアップした＜フリースペース＞についての詳細ページ。 -
SIRIUS2の内蔵ブラウザは常に表示させておくと時短チェックかつデザインモード以上の再現性を見せてくれます。