Progress barエレメントの追加.
進み具合が一目でわかる、ラベル付きの色付きバーを設置できます。プロジェクトの状況、募金目標、講座の進捗、スキルレベルに使います。
プログレスバーの追加
ログインした状態でページを開きます。コンテンツエリアにカーソルを合わせると、ビルダーのコントロールが表示されます。基本操作は最初のページをご覧ください。
- カラムにカーソルを合わせ、コントロールバーの+をクリックします。空のページではAdd Elementsをクリックします。Contentタブを開き、Progress barをクリックします。カラムの一番上に追加され、設定ダイアログが開きます。
- バーのLabelを入力します（例：「Website redesign」）。
- 塗りつぶし量はProgressをドラッグして設定します。スライダー横のボックスへの直接入力もできます。ここでは73パーセントにします。
- パレットから、塗りつぶし部分のFront colorを選びます。
- 同じダイアログの下部で、バーにStripesを付けるか選びます。ここではAdd striped pattern to barにチェックを付けます。
- ダイアログのSaveをクリックします。次に、コンテンツエリア上部のツールバーにあるSaveをクリックして、ページを保存します。
表示内容
ラベル付きのバーが、設定した値まで選んだ色で塗りつぶされます。ラベルは塗りつぶし部分の中に表示されます。動画では、ストライプのバーにWebsite redesignと表示され、トラックの73%まで塗りつぶされています。ページを保存して公開すると、訪問者に表示されます。
プログレスバーの設定
エレメントにカーソルを合わせ、コントロールバーのMore > Settingsを開きます。設定項目は次のとおりです。
- Label: バー上のテキスト。ページ上のラベルをクリックしてその場で編集することもできます。
- Progress: バーの塗りつぶし量。0から100パーセントで指定します。初期値は50です。
- Bar height: バーの高さ（ピクセル）。初期値は45です。
- Back color: 空のトラックの色。
- Front color: 塗りつぶし部分の色。
- Grow animation: 初期値はオフです。オンにすると、バーは空から始まり、半分が画面内に入ったところで塗りつぶされます。
- Stripes: Add striped pattern to barで斜めストライプを付けます。Animate stripes (requires striped pattern)でストライプを動かします。
表示されない場合
- ContentタブにProgress barがない。 ユーザープロファイルで非表示になっています。管理者にUser Profilesでの有効化を依頼してください。
- 再読み込み後に消えている。 ページが保存されていません。追加し直し、コンテンツエリア上部のツールバーにあるSaveをクリックします。
- バーが空に見える。 Progressが0か、Grow animationがオンでバーがまだ半分表示されていません。バーまでスクロールするか、エレメントにカーソルを合わせてコントロールバーのMore > Settingsを開き、Progressを上げます。
- ストライプがない、または動かない。 Add striped pattern to barにチェックが付いておらず、Animate stripes (requires striped pattern)にはそのチェックが必要です。StripesにあるAdd striped pattern to barにチェックを付けます。
- 塗りつぶし部分がトラックに溶け込んでいる。 Front colorとBack colorが似すぎています。濃いめのFront colorか明るめのBack colorを選びます。
次のステップ
Styleタブでプログレスバーの間隔や背景を変更します。