記事装飾メニュー-SIRIUS2の使い方

記事装飾メニューというのは編集画面の上に鎮座ましますメニュー一覧のことです。

これらの中には1個の記事をまるまる使って説明が必要なものからちょっとした説明だけで済んでしまうものまでいろいろあります。

見出し

①H2～H6見出し

記事にはH1からH6まで”見出し”というレベルがあります。一番重要なのは最上位の見出しレベルでもあるH1で、各ページに1個だけというのがこれまでの仕様でした。（通常はサイト名に割り当てられる）

ですが昨今は複数のH1があっても問題なしということで若干その重要性が薄れてきた感がなきにしもあらず。それでも最上位の見出しレベルには違いありません。
だからといってH1の連発は検索エンジンから嫌われる可能性も残ってるので注意は必要です。

H2以下はその数値が下がるにつれ重要性は低くなります。とはいえ検索エンジン対策としても利用者側の見やすさという点でも見出しを設定するのが重要なのは変わりありません。

使い方は見出しテキストを範囲選択して設定したいレベルの見出しを選択するだけです。

ちなみに記事タイトルには自動的にH2が割り当てられてます。

よってここで設定するのは記事内に新たに見出しを設定する時です。

一般的には大きな見出しにはH2、その中のサブ見出しにはH3以下をという風にぶら下がり状に設置するのが基本的な使い方です。

②見出しスタイル

各見出しにはテンプレートごとにデフォルトのデザインが施されています。そのデザインをカスタマイズできるのが『見出しスタイル』という機能です。

詳細は＜見出しデザイン＞をご覧下さい。

③サブタイトル見出し

見出しというのは一般的には1行テキストになります。これを2行（2段）にしてデザイン性を高めたものが『サブタイトル見出し』機能です。

詳細は＜サブタイトル見出し機能＞をご覧下さい。

テキスト関連

太字・斜体字ほか

左から「B」はテキストを太字にしたい時に使います。

厳密には太字にして目立たせるだけでなく重要性もプラスされる意味合いがついてる「strong」というタグで囲まれます。

太字設定

<strong>太字設定</strong>

ただし単なる装飾目的だけなら『font-weight: bold;』などのスタイルを使うのが推奨されてます。

「I」はテキストを斜体字（イタリック体）にしたい時に使います。

こちらも単なる装飾性だけでなく重要性もプラスされる意味合いがついてる「em」というタグで囲まれます。

このテキストは斜体字

<em>このテキストは斜体字</em>

ただし『メイリオ』などイタリック体が用意されてない日本語フォントだとこの効果をかけても斜体字にはなりません。

「T（に横棒）」はテキストに取り消し線を付けたい時に使います。HTML上では「s」～「/s」で囲まれます。

この人はアタマがおかしい。

この人は<s>アタマがおかしい</s>。

ただし「s」はSIRIUS2でも採用しているHTML5では”非推奨”扱いになっているため、実際には（同じ効果を持つ）『<del>～</del>』を使うのが推奨されてます。

「U」はテキストに下線を引きたい時に使います。HTML上では「u」～「/u」で囲まれます。

私の趣味はルアーフィッシングです。

私の趣味は<u>ルアーフィッシング</u>です。

ただし「u」は一時は廃止されたタグで、HTML5で復活したものの”誤字やその他の注釈、中国語の単語”を示すときに使うと再定義されてるため、厳密には（同じ効果を持つ）『text-decoration: underline;』などのスタイルを使うのが推奨されてます。

「行揃え」は文章を”左揃え（デフォルト）”にするか”中央揃え”にするか”右揃え”にするかの設定です。

リスト

リスト形式のデザイン設定です。4つの選択肢があるので好きなデザインを選びます。

• これは通常の”リスト”です。
• これは通常の”リスト”です。
• これは通常の”リスト”です。

1. これは数字リストです。
2. これは数字リストです。
3. これは数字リストです。

• これはチェックリストです。
• これはチェックリストです。
• これはチェックリストです。

1. これは数字リスト（丸）です。
2. これは数字リスト（丸）です。
3. これは数字リスト（丸）です。

リンク

テキストや画像にリンクを付けたい時に使います。

リンク先の設定

リンクを付けたいテキストや画像を選択して［リンク］をクリックすると下のようなダイアログが出ます。

①「内部ページへのリンク」であれば、当該ページを一覧から選択するだけでリンク先URL（及びアンカーテキスト）が自動入力されます。

②「既存サイトへのリンク」はSIRIUS2で作成しているサイトへのリンクで、サイト一覧から選択できます。

③「画像ファイル」というのは使ったことがないのでよくわかりませんが、クリックするとその画像URLに飛ぶんでしょうか。

『属性』の④「新しいウィンドウで開く」は、同じページ内ではなく新たなタブを開いてリンク先を表示します。
⑤「NoFollow」は検索エンジンに対し、リンク先をクロールさせたくない（リンク評価を与えたくない）場合にチェックします。主に広告関連のリンク先などで使われます。
⑥［強調］にチェック入れると太字になります。

⑦はテキストサイズの調整用です。特に意味がない限りは「指定なし」のままでOK。

リンクの詳細設定

こちらのタブはリンクテキストにIDやクラスを付加するときに使う、中級者以上向けの機能です。

画像

画像の登録や編集画面内に画像を差し込みたい時に利用します。

詳細は【画像管理】の使い方をご覧下さい。

テーブル

テーブル（表）を作成したいときはここをクリックします。
詳細は＜テーブル（表）＞をご覧下さい。

デザインモード

”HTMLタグ等が出てくるテキストモードは使いにくい”という方は、ここをクリックすると編集画面と実際の表示画面がほとんど同じデザインモードでの編集に変更できます。

ただしブラウザ表示と完全に同じになるわけではないので、編集しながらその都度ブラウザでのプレビューは必須です。
またテキストモードでしか使えない機能もあるのでデザインモードだけでなく時々テキストモードに戻して確認することも必要です。

ボックス

①囲み枠

テキスト群の周囲に枠を付けたり背景色を付けてくれる、いわゆる囲み枠機能です。

②ユーザー設定ボックス

上の囲み枠にないオリジナルのボックスを作ることができます。
（オリジナルの設定は「保存」ボタンで保存可能＆読込みも）

筆者

 

既存の囲み枠でも充分なので使う機会はあまりないかもです。

③レイアウトボックス

詳細は＜レイアウトボックス＞をご覧下さい。

④吹き出しの作成

詳細は＜吹き出し＞をご覧下さい。

装飾枠

テキスト周りに装飾を加える効果群です。
詳細は＜装飾枠＞をご覧下さい。

ポイント

テキストの先頭に順に増えていく数字を付与する機能群です。
詳細は＜装飾枠＞をご覧下さい。

ランキング

簡易的にランキング風タイトルを作成できる機能群です。
詳細は＜ランキング＞をご覧下さい。

ボタン

SIRIUS2では9種類×12色のデザインに加え、アニメーション効果や矢印の表示機能なども備えているボタン作成機能が搭載されてます。

クリックすると下のような設定画面が表示されるので、プレビュー画面で確認しながら好きなデザインを選んで完了させます。

リンク先URLは完全な外部サイトなら③直接URLを入力します。
もしも内部ページへのリンクなら①を、SIRIUS2で作成した外部サイトなら②のアイコンをクリックするとページ一覧もしくはサイト一覧が表示されるのでそこから選択できます。

目次

記事内に自動で目次を生成/表示してくれる機能です。
詳細は＜目次の使い方＞をご覧下さい。

メディア

動画やマップなどを簡単に生成/表示してくれる機能です。
詳細は＜メディアの挿入＞をご覧下さい。

マーカー

個別のテキストにマーカーを引いたような装飾を施します。テキストを選択状態にした後、好きな色/太さを選択します。

装飾

個別のテキストを大きくしたり色を付けたりなどの装飾を施したい時に利用します。

パーツ

SIRIUS2の新機能群が詰まってます。
詳細は＜パーツ＞をご覧下さい。

タグ

コメントアウト

これを使うとテキストや画像などを一時的に非表示にできます。
使い方は非表示にしたいコンテンツを範囲選択した後、［タグ］→「コメントアウト」を選択するだけ。
編集上は下のような専用タグで囲まれます。（赤文字部分）

引用

文字通り、”引用文である”と明示したい時に使います。
使い方は引用したエリアを範囲選択して［タグ］→「引用」を選択します。すると専用のレイアウトで引用エリアが囲まれます。

コード

コードを表記したい時に使います。
厳密には”この文字列はプログラムのソースコードやコマンドの文字列である”ということをブラウザ側に伝えるもので、通常は等幅フォントで表示されます。

SIRIUS2では下のような背景色が付きます。

<div id="logo-wrap">

水平線

コンテンツを明示的に分けたい時などに使えます。線種は全部で6＋ユーザー（独自）指定の7種類が用意されてます。
使い方はシンプルに好きな水平線を選ぶだけ。

水平線（グレー・実線）

水平線（レッド・実線）

水平線（ブルー・実線）

水平線（ブルー・二重線）

水平線（ブルー・点線）

水平線（ブルー・太ドット）

画像の回り込み解除

詳細は画像の回り込みをご覧ください。

SIRIUS独自タグ

こちらはページ内にSIRIUS2の独自タグを入力する機能で、通常の編集ではあまり使いません。

簡単に説明しますと、『基本設定』内にあるのは”表示されてる項目”を独自コードで挿入するためのものです。
たとえば「ページタイトル」であれば「<% pageTitle %>」と入力されます。

『デバイスの振り分け』は便利な機能で使う場面も少なくありません。
要はPCとスマホで異なる内容を表示できるというものです。

たとえばPCでは長めのテキストを表示してスマホでは短めの文章にするとか、PCでは大き目の画像を使ってスマホでは軽量の画像を使うとかですね。

それぞれどちらかで表示したい内容を範囲選択した後、「PCのみで表示」か「スマホのみで表示」かを選択します。
選択後は前後に専用の独自タグが付きます。（赤文字部分）

『特殊タグ』はもう完全に上級者向けの機能で、よく使うのは「改行無視エリア（noReturn）」でしょうか。
たとえばページ内にスタイルを直接書き込んでもSIRIUS2では市場に認識してくれません。こういう時はスタイル全体を範囲選択して「改行無視エリア」を指定します。

こんな感じですね。

他の機能は割愛します。めったに使わない機能かと思われますし、説明も大変なので。

モジュール

SIRIUS2の目玉機能です。
詳細は＜モジュール＞をご覧下さい。

カスタム・クラス・定型文

これらの詳細は＜クラスの設定・カスタム文字装飾・定型文＞をご覧下さい。

店舗情報-電話番号

詳細は＜電話番号の挿入機能＞をご覧下さい。