フローチャート・設定画面
＜フローチャート＞の設定画面を開くには、
【パーツ】→＜フローチャート＞→【フローチャートの管理】→【追加】
もしくは
【パーツ】→＜フローチャート＞→【フローチャートの追加】
から開けます。
基本画面
すでにいくつか設定済みの画面でご説明していきます。
- ①ステップ項目
-
各ステップのタイトルがここに表示されます。
- ②（上に移動）下に移動
-
順番の入れ替えや追加・編集ボタンが用意されてます。
- ③プレビュー画面
-
どんな感じで表示されるのか、大まかな表示をここで確認できます。
（設定を変更するとリアルタイムでプレビュー画面に反映される）
- ④スマホ表示
-
スマホでの表示プレビューです。
- ①デザイン
-
全部で3パターン用意されてます。（後ほど詳しくご紹介）
- ②カラー
-
16色用意されていて、「STEP」の背景色や矢印の色が設定色で表示されます。
- ③テキスト
-
「STEP」の文字を変更できます。たとえば「手順」など。
数字はオートナンバーなので考える必要はありません。
編集画面
「編集」ボタンをクリックすると表示内容の編集画面が開きます。
上の画像右上の「デザインモード」をクリックすると編集ボタンが表示されたデザインモード画面になります。
（下の画像左下の「HTMLソース」をクリックするとテキストモードでの編集になります）
デザイン
パーツ＜フローチャート＞の表示デザインは3種類用意されてます。
基本的には好きなデザインを選択すればいいんですが、”ステップ”の数によってはちょっと見づらくなるデザインもあります。
ステップ数は最大5個までとなってます。
デザイン1
ステップ数が3つ（PC・2カラム）
見づらさはそれほどない感じです。
ステップ数が3つ（PC・1カラム）
1カラムだと余裕ですね。
ステップ数が4つ（PC・2カラム）
2カラムでステップ数4つだと…ちょっと窮屈ですかね。
ステップ数が増えても自動的に折り返す機能はついてないようです。
（ステップ数5）
ステップ数が3つ（スマホ）
スマホは縦並びなのでステップ数には左右されません。
デザイン2
ステップ数が3つ（PC・2カラム）
デザイン1に枠が付いて「STEP」の背景が角丸になったタイプですね。
実は枠が付いた分、テキストの表示幅は若干狭まってます。
ステップ数が4つ（PC）
”手順”を説明するにはステップ数が4以上だとちょっと見づらい感じがしないでもない？
ステップ数が3つ（スマホ）
スマホは縦並びなのでステップ数には左右されません。
デザイン3
ステップ数が3つ（PC・2カラム）
デザイン3は前2つと違って縦に並ぶパターンなので、ステップ数には左右されないデザインになってます。
ただ3ブロックに分かれているので右端の説明文のエリアは実質的には横幅の半分程度しかありません。
ステップ数が3つ（スマホ）
スマホでも「STEP」が”場所を取って”いるのでやはり説明文のエリアが狭くなってます。
デザイン3に限ってですが、説明文の中で<span>～</span>クラスを使うと「STEP」の背景が適用されてしまいます。
「.flow-03 span」を「.flow-03 span.icon」に変えれば直るので調整ミスかと。
デザイン”4”
ここまで見てくると、PCではデザイン1とデザイン2はステップ数が4を超えると表示エリアそのものがかなり狭くなります。
（スマホはいずれも縦1列表示なので特に問題はなし）
一方スマホではデザイン3の説明文のエリアがかなり狭くなります。
ということでステップ数が3以下であればデザインパターンはどれも選んでも特に問題はないでしょう。
（デザイン3のスマホ表示が若干気にはなりますが）
ただしステップ数が4個以上になるとデザイン3しか選択肢はないように思えます。
でもスマホ表示時が…。
ということで【Volar2】ではステップ数4個以上でもPC・スマホ共にいい感じで表示されるデザイン”4”を考えてみました。
（実際にはデザイン3のカスタマイズになります）
専用のスタイルを有効化すると下のレイアウトデザインで表示されるようになります。
この機能はデフォルトでは無効化されてます。
【Volar2】フローチャートレイアウトは「デザイン3」を選択した時のみ有効となります。
「デザイン1」および「デザイン2」に関しては変更なしです。
ユーザー指定スタイル内に【Volar2】フローチャート専用のスタイルを用意してます。
そのスタイルの先頭と後尾のコメントアウトを解除するだけで機能は有効化されます。
パーツ機能はデザインモードでもテキストモードと同じくSIRIUS2の独自タグでの表示になるので、（ブラウザ or内蔵）プレビューでの表示チェックが不可欠になります。
