自作プラグイン/box

2022-01-30 (日) 07:20:49

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

box2.jpg

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

box.inc.php
製作者kanateko
バージョン2.0
動作確認PukiWiki 1.5.3 ~
最終更新2022-01-29

注意やインフォメーション、引用など、事前に用意されている様々なデザインのボックスを利用できるプラグイン。

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

ダウンロード

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

日付バージョン備考
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''
// 整形済みテキスト

''code''
// Google Code Prettifyによるシンタックスハイライト

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);
}}

const hoge = document.querySelector('#hoge');

console.log(hoge);

追加したい機能

  • 特になし。

コメント

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