カテゴリ:プラグイン 自作 追加 未公開

box2.jpg

デザインボックス作成プラグイン

box.inc.php
製作者kanateko
バージョン2.1
動作確認PukiWiki 1.5.3 - 1.5.4
最終更新2022-05-21

注意やインフォメーション、引用など、事前に用意されている様々なデザインのボックスを利用できるプラグイン。現在は公開していないが、オプションのカラー指定周りを改善したら公開するかもしれない。

このプラグインでできること
  • 視覚的にわかりやすいデザインのボックスを表示する
  • 高さや幅、表示位置など様々なオプションでカスタマイズ可能
    • 一部のボックス専用のオプションあり

ダウンロード

このプラグインは現在公開されていません。

日付バージョン備考
2022-05-312.1
  • オプション判定処理のエラーを修正 (PHP8対応)
2022-01-292.0
  • ほぼ全てを作り直し
  • 機能を大幅に追加
2021-07-081.2
  • wipタイプを追加*1
  • ボックスの位置を指定するオプションを追加
2021-06-301.1
  • warning、caution、info、hint、check、labelタイプのボックスを追加
2021-03-291.0
  • 初版作成

使用方法

#box(<タイプ>[,オプション]){{
<ボックスの内容>
}}

ボックスタイプ

必ず最初に指定する。

warning

caution

info

hint

check

quote

solid

stitch

comment

 

label (chip)

label (full)

border

double

dashed

dotted

cross

bracket (diagonal)

bracket (side)

''pre'' // 整形済みテキスト

#box Error: Undefined box type. (code)

custom

オプション (汎用)

ボックスの種類によっては使えないオプションもある。

全て開く

background=

border系

box-color=

color=

corner=

float=

font系

left / center / right

shadow=

tilt=

width=, height=

オプション (専用)

全て開く

bracket専用

code専用

comment専用

custom専用

label専用

quote専用

ボックスの種類と非対応の汎用オプション

ボックスの種類非対応オプション
  • border
  • dashed
  • dotted
  • double
(ボーダー系)border • border-style
  • caution
  • check
  • hint
  • info
  • quote
  • warning
(アイコン系)background • border-color • box-color
  • bracket
  • cross
border • border-color • corner
  • comment
background • border • border-width • border-color • border-style • corner
  • label
background • border-color
  • solid
border • border-width • border-color • border-style
  • stitch
border • border-width • border-style

使用例

適当な使用例をいくつか。

#box(cross,bwidth=3px,bstyle=double,width=300px,center){{ CENTER:ようこそ }}
ようこそ
 
#box(bracket,box-color=red,width=300px,center){{ CENTER:鳴かぬなら鳴くまで待とう時鳥 }}
鳴かぬなら鳴くまで待とう時鳥
 
#flex(350){{{ #box(label,title=良い例){{ -外出時にはマスクをする -帰ってきたら手洗いうがいをする }} #- #box(label,title=悪い例,box-color=red){{ -大声で歌う -大人数で狭い部屋に居続ける }} }}}
 
  • 外出時にはマスクをする
  • 帰ってきたら手洗いうがいをする
  • 大声で歌う
  • 大人数で狭い部屋に居続ける
 
#box(custom,box-color=white,bg=#9c7fd5,width=300px,color=white,corner=sharp,shadow=hard,icon-b=f392){{ https://discord.gg/***** }}

https: //discord.gg/*****

 
#box(code,lang=js){{ const hoge = document.querySelector('.hoge'); console.log(hoge); }}

#box Error: Undefined box type. (code)

追加したい機能

  • 特になし。

コメント

最新の10件を表示しています。 コメントページを参照

  • すいません。こちら公開の予定などはないのでしょうか? -- 2022-09-17 (土) 11:08:14
    • コメントありがとうございます。このプラグインに関しては同様の要望を何度か頂いてはいるのですが、公開するにあたって手直ししなければならない点が多いため、申し訳ないですが今のところ公開時期は未定です。 -- kanateko 2022-09-17 (土) 11:17:36
  • わかりました。 -- 2022-09-21 (水) 18:39:01
  • こんにちは。こうゆうのを探していました。是非とも公開してほしいです。他力本願で申し訳ないですが、公開を待っています。 -- kyama 2024-02-24 (土) 10:31:36