#author("2022-05-29T18:57:19+09:00;2022-02-19T02:10:06+09:00","default:kanateko","kanateko")
#author("2022-07-06T04:29:04+09:00;2022-02-19T02:10:06+09:00","default:kanateko","kanateko")
&tag(プラグイン,自作,追加);

CENTER:#ref(step.jpg,center,wrap,400x0)

#contentsx

*縦型のステップフローを作成するプラグイン [#f7116c09]
#infobox(plugin){{
name=step
pukiwiki=1.5.3
ver=0.6
update=2022-02-19
}}

手順などを説明を行うためのステップフローを作成・表示するプラグイン。
番号部分の表示を変えたり、一部のデザインを変えたりすることもできる。

:このプラグインでできること|
-縦型のステップフローを作成できる
--各フローはタイトルとコンテンツに分かれている
---両方でPukiWiki記法が使える
---タイトルを非表示にすることも可能
--入れ子でプラグインを使用することもできる
--ラベル (番号部分) の文字列を変更したり、数字の前に任意の数字などを加えたりできる
--ラベル横のマーカーのスタイルをある程度変更可能

*ダウンロード [#pb7aaa23]
最新: [[GitHub>https://github.com/kanateko/pukiwiki-plugin]]

|~日付|~バージョン|~備考|h
|2022-02-19|0.6|#ul(マーカー関連オプションの処理を最適化,マーカーのスタイル指定のエラー処理を厳格化)|
|2022-02-18|0.5|#ul(マルチライン部分がない場合のエラーを追加,同じタイトルがある場合に表示が崩れる問題を修正)|
|~|0.4|#ul(タイトルを非表示にする機能を追加)|
|~|0.3|#ul(マーカーのスタイルを変更する機能を追加)|
|~|0.2|#ul(ラベルを変更する機能を追加)|
|2022-02-17|0.1|#ul(初版作成)|

*セットアップ [#d711345a]
#step{{{{{
#:ファイルのダウンロード
GitHubからplugin-stepフォルダにある「step.inc.php」をダウンロードしてpluginフォルダに入れる
#:CSSの編集
#step(marker=double,pre=2){{{{
#:
skin/pukiwiki.cssに以下の内容を追加する
#ac(コードを表示){{{
#prism(css,false){{
/* step.inc.php */
.plugin-step {
  --main-color: #5c5c5c;
  --light-color: #8f8f8f;
  --lighter-color: #c2c2c2;
  --bg-color: #ffffff;
  position: relative;
  margin: 16px 8px;
  padding: 0 8px 0 16px;
  border-left: 4px solid var(--lighter-color);
}
.plugin-step::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: -8px;
  border: 6px solid var(--lighter-color);
  border-radius: 100%;
}

.step-flow {
  list-style: none;
}
.step-flow:not(:last-of-type) {
  border-bottom: 2px dotted var(--light-color);
}

.step-marker[data-marker-style] {
  content: "";
  display: block;
  position: absolute;
  left: -26px;
  top: 0;
  width: 12px;
  height: 12px;
  border: 2px solid var(--main-color);
  border-radius: 100%;
  box-shadow: 0 0 0 4px var(--bg-color);
}
.step-marker[data-marker-style=border] {
  background-color: var(--bg-color);
}
.step-marker[data-marker-style=double] {
  background-color: var(--main-color);
  box-shadow: 0 0 0 4px var(--bg-color), inset 0 0 0 3px var(--bg-color);
}
.step-marker[data-marker-style=solid] {
  background-color: var(--main-color);
}

.step-label {
  position: relative;
  font-weight: bold;
  color: var(--light-color);
}
.step-label .step-label-num {
  padding-left: 4px;
}

.step-title {
  font-weight: bold;
  font-size: 1.2em;
}
}}
}}}
#:
サイトに合わせてデザインを調整する
}}}}
#:マルチラインプラグインを有効にする
pukiwiki.ini.phpを編集してマルチラインプラグインを有効化する
#prism(php,false){{
 define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); // 1 = Disabled
}}
}}}}}

*プラグインの設定 [#d82abbb8]
:STEP_LABEL_STRING|ラベルの文字列。デフォルトは "STEP"
:STEP_LIST_TAG|コンテナのHTMLタグ。デフォルトは "ol"
:STEP_MARKER_DEFAULT|マーカーのデフォルトスタイル。デフォルトは "border"

*使用方法 [#r08aceaa]
 #step([オプション]){{
 #:[タイトル]
 <コンテンツ>
 ︙ (タイトルとコンテンツの繰り返し)
 }}

タイトルが無い場合はタイトル部分が非表示になる。

**オプション [#hc905735]
#box(label,title=ラベル関連){{
:label=<文字列>|ラベルの文字列を変更する
:pre=<文字列>|番号の直前に文字を挿入する。実際の表示は <文字列>-番号 と間にハイフンが入る。主に入れ子で使用する場合に用いる
}}

#box(label,title=マーカー関連){{
:marker=<border/double/solid>|マーカーのスタイルを変更する
:mcolor=<色指定>|マーカーの色を変更する。CSSと同じ記法で指定できる
}}

*使用例 [#e111133d]
#tab(表示,ソース){{{{
#step(label=その){{{
#:ラベルの変更
''STEP'' から ''その'' に変更してみる
#:入れ子
入れ子も可能。タイトルの記入がない場合はタイトルを非表示に。
#step(label=その,pre=2,marker=solid,mcolor=tomato){{
#:
番号の前に ''2'' を追加してみる
#:
マーカーのスタイルを ''solid'' (塗りつぶし) に変更してみる
#:
マーカーの色を ''tomato'' に変更してみる
}}
#:&marker{タイトルでPukiWiki記法も使える};
タイトルに[[markerプラグイン>../marker]]を使用している。
}}}
#split
 #step(label=その){{{
 #:ラベルの変更
 ''STEP'' から ''その'' に変更してみる
 #:入れ子
 入れ子も可能。タイトルの記入がない場合はタイトルを非表示に。
 #step(label=その,pre=2,marker=solid,mcolor=tomato){{
 #:
 番号の前に ''2'' を追加してみる
 #:
 マーカーのスタイルを ''solid'' (塗りつぶし) に変更してみる
 #:
 マーカーの色を ''tomato'' に変更してみる
 }}
 #:&marker{タイトルでPukiWiki記法も使える};
 タイトルに[[markerプラグイン>../marker]]を使用している。
 }}}
}}}}

*追加したい機能 [#qa4b56a2]
-いくつかの箇所のスタイルを変更できるようにする

*コメント [#vefff83a]
#pcomment(,10,above,reply)
#pcomment(reply)