• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• 自作プラグイン/step へ行く。
  • 1 (2022-02-19 (土) 01:00:44)
  • 2 (2022-02-19 (土) 02:10:06)
  • 3 (2022-02-19 (土) 02:10:06)
  • 4 (2022-02-19 (土) 02:10:06)
  • 5 (2022-02-19 (土) 02:10:06)
  • 6 (2022-02-19 (土) 02:10:06)

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

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

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

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

ダウンロード

最新: GitHub

インストール

1. STEP1
   ファイルのダウンロード

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

2. STEP2
   CSSの編集
   1. STEP2-1

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

      コードを表示

      /* step.inc.php */
      .plugin-step {
        --main-color: #5c5c5c;
        --light-color: #8f8f8f;
        --bg-color: #ffffff;
        margin: 16px 8px;
        padding: 0 8px 0 16px;
        border-left: 4px solid var(--light-color);
      }
      
      .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;
      }
      

   2. STEP2-2

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

3. 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([オプション]){{
#:[タイトル]
<コンテンツ>
︙ (タイトルとコンテンツの繰り返し)
}}

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

オプション

使用例

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

追加したい機能

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

コメント