自作プラグイン/step

2022-02-19 (土) 02:10:06

目次 [表示]

縦型のステップフローを作成するプラグイン

step.inc.php
製作者	kanateko
ライセンス	GPLv3
バージョン	0.6
動作確認	PukiWiki 1.5.3 - 1.5.4
最終更新	2022-02-19

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

このプラグインでできること

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

ダウンロード

最新: GitHub

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

セットアップ

STEP1

ファイルのダウンロード

GitHubからplugin-stepフォルダにある「step.inc.php」をダウンロードしてpluginフォルダに入れる

STEP2

CSSの編集

STEP2-1

skin/pukiwiki.cssに以下の内容を追加する

コードを表示

/* 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;
}

STEP2-2

サイトに合わせてデザインを調整する

STEP3

マルチラインプラグインを有効にする
pukiwiki.ini.phpを編集してマルチラインプラグインを有効化する
```
 define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); // 1 = Disabled
```

プラグインの設定

STEP_LABEL_STRING: ラベルの文字列。デフォルトは "STEP"
STEP_LIST_TAG: コンテナのHTMLタグ。デフォルトは "ol"
STEP_MARKER_DEFAULT: マーカーのデフォルトスタイル。デフォルトは "border"

使用方法

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

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

オプション

label=<文字列>: ラベルの文字列を変更する
pre=<文字列>: 番号の直前に文字を挿入する。実際の表示は <文字列>-番号と間にハイフンが入る。主に入れ子で使用する場合に用いる

marker=<border/double/solid>: マーカーのスタイルを変更する
mcolor=<色指定>: マーカーの色を変更する。CSSと同じ記法で指定できる

使用例

表示

その1

ラベルの変更

STEP からそのに変更してみる
その2

入れ子
入れ子も可能。タイトルの記入がない場合はタイトルを非表示に。
1. その2-1
  
  番号の前に 2 を追加してみる
2. その2-2
  
  マーカーのスタイルを solid (塗りつぶし) に変更してみる
3. その2-3
  
  マーカーの色を tomato に変更してみる
その3

タイトルでPukiWiki記法も使える

タイトルにmarkerプラグインを使用している。

ソース

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

追加したい機能

いくつかの箇所のスタイルを変更できるようにする

コメントはありません。コメント/自作プラグイン/step