オートナンバー
＜オートナンバー＞とはテキストの先頭に数字が自動付与され、その数字が自動で1つずつ増えていく機能です。
こんな感じですね。
試しに記事装飾メニューの［ポイント］→「オートナンバー」をクリックしてみると、編集画面には下のようなHTMLコードが自動入力されます。
<div class="point-auto"></div>
プレビューしてみると下のような表示になります。
もう一度「オートナンバー」をクリックして1個増やしてみます。
<div class="point-auto"></div>
<div class="point-auto"></div>
すると次のような表示になり、自動で数字が増えていきます。
具体的な使い方ですが、下のような位置に「オートナンバーの特長」と「オートナンバーの使い方」という2つのテキストを差し込んでみます。
<div class="point">オートナンバーの特長</div>
<div class="point">オートナンバーの使い方</div>
テキストを先に選択状態にして［ポイント］→「オートナンバー」をクリックしても同じです。
これを表示させてみたのがこちら。順番に数字が付与された見出し風テキストのような使い方ができます。
オートナンバーの特長
オートナンバーの使い方
さらに＜オートナンバー＞を選択したあとに別のテキストを入れれば『見出し風＋説明』ブロックも作れます。
こちらがそのサンプル。
<div class="point-auto">オートナンバーの特長</div>
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
<div class="point-auto">オートナンバーの使い方</div>
この文章はダミーです。
この文章はダミーです。
実際の表示がこちら。
オートナンバーの特長
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
オートナンバーの使い方
この文章はダミーです。
この文章はダミーです。
注意点
数字の色はサイトで設定しているメインカラーが反映されます。
（当サイトでは”黒”に変更してるので本来の色とは異なります）
数字の大きさは固定です。
また同じページ内で複数の＜オートナンバー＞を使う場合、どんなに離れたところに打ち込んでも前の数字の次の数字から始まってしまいます。
そのためブロックを分けてその都度数字は「1」から始めたい時はそのブロックの前もしくは前のブロックの後ろに以下のタグを打ち込んでリセットさせる必要があります。
（右クリック→「タグ挿入」→「オートナンバーのリセット」でも挿入可）
<br class="auto-reset">
これで次のブロックの＜オートナンバー＞は「1」から始まります。
カウンターのリセットに関して
SIRIUS2の公式マニュアルによれば、カウンターのリセットは直前でご説明したように「<br class="auto-reset">」の挿入で「1」からの振り直しになるとあります。
実際、SIRIUS2内蔵のプレビュー機能ではそうなります。しかしながら当方の最新の（PC用）ChromeやEdgeではリセットがきかず連番のまま表示されてしまいます。
（iPhoneでは問題なし）
当方だけの問題かもしれませんが、もしも同じ症状になる方がいればということで暫定解決策を考えてみました。
それがオートナンバーをつけたブロック全体を「auto-reset」というクラスを付与したブロックで囲み直すことです。これで数値はリセットはされます。ただしひと手間かかるのが難点です
下の赤文字部分が新たに足したコードです。
（このページでの実例サンプルもそうしてます）
<div class="auto-reset">
<div class="point-auto">オートナンバー1</div>
<div class="point-auto">オートナンバー2</div>
</div>
ポイント
ポイント（チェック）
［ポイント］→「ポイント（チェック）」を選択すると下のように自動入力されます。
<div class="point"></div>
実際の表示がこちら。
＜オートナンバー＞同様、下のようにテキストを入れてみます。
<div class="point">見逃すな！</div>
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
実際の表示がこちら。
見逃すな！
この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。
ポイント1,2...
こちらは数字を指定して打ち込むポイントです。
たとえばポイント1（番）なら［ポイント］→「ポイント1」を選択します。
<div class="point point1" data-point="1">ポイント1</div>
実際の表示がこちら。
ポイント1
ポイント5（番）なら［ポイント］→「ポイント5」を選択します。
ポイント5
注意点
数字の色は青系で固定、大きさも固定です。
ポイントタグの一括挿入
文字通り、ポイントを一括で挿入したい時に使います。
選択すると下のようなダイアログが出るので適当に変更します。ただしテキストは共通なので完成してからその都度変更する必要あり。
下向き矢印がちゃんと表示されないのはバグ？
<div class="point point1" data-point="1">見出し</div>
<div class="point point2" data-point="2">見出し</div>
<div class="point point3" data-point="3">見出し</div>
<div class="point point4" data-point="4">見出し</div>
<div class="point point5" data-point="5">見出し</div>
見出し
見出し
見出し
見出し
見出し
矢印の挿入
テキストの先頭に矢印アイコンを挿入できます。
やり方は矢印を挿入したいテキストを選択した後［ポイント］→「矢印の挿入」をクリックします。
下のような設定画面が出るのでプレビュー画面で確認しながら好きなものを組み合わせていきます。
「三角（枠）/グリーン/中/丸」ならこちら。
「二重矢印/レッド/大」ならこちら。
『ポイント』の関連記事
-
旧SIRIUSから受け継がれるテキストモードとデザインモードのパワーアップした機能についての詳細ページ。 -
SIRIUS2の＜スマホサイト同時生成＞についての詳細ページ。 -
SIRIUS2のパワーアップした画像管理画面の詳細ページ。 -
SIRIUS2の画像管理内の画像のフォルダ分け詳細ページ。 -
よく使うクラスや文章・コードなどの各登録機能の違いについての詳細ページ。 -
パワーアップされたモジュール機能についての詳細ページ。 -
SIRIUS2で8個にパワーアップした＜フリースペース＞についての詳細ページ。 -
SIRIUS2の内蔵ブラウザは常に表示させておくと時短チェックかつデザインモード以上の再現性を見せてくれます。