#author("2022-01-30T08:33:11+09:00;2022-01-30T07:20:49+09:00","default:kanateko","kanateko")
#tag(プラグイン,自作,追加,未公開)

#flex{{
|CENTER:&ref(box2.jpg,nolink,500x0);|
}}

#contentsx
*デザインボックス作成プラグイン [#ia166836]
#infobox(plugin,except=ライセンス){{
name=box
ver=2.0
pukiwiki=1.5.3
update=2022-01-29
}}


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

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

#clear

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

#box(caution,width=400px){{{
このプラグインは現在公開されていません。
}}}

|~日付|~バージョン|~備考|h
|2022-01-29|2.0|#ul(ほぼ全てを作り直し,機能を大幅に追加)|
|2021-07-08|1.2|#ul(%%wipタイプを追加%%((v2.0で削除)),ボックスの位置を指定するオプションを追加)|
|2021-06-30|1.1|#ul(warning、caution、info、hint、check、labelタイプのボックスを追加)|
|2021-03-29|1.0|#ul(初版作成)|

//*インストール [#ma9d057e]

//*プラグイン設定 [#l10e79ce]

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

**ボックスタイプ [#o455f1c7]
必ず最初に指定する。
#flex(flex-start,245){{{
#box(warning){{
''warning''
}}
#-
#box(caution){{
''caution''
}}
#-
#box(info){{
''info''
}}
#-
#box(hint){{
''hint''
}}
#-
#box(check){{
''check''
}}
#-
#box(quote){{
''quote''
}}
#-
#box(solid){{
''solid''
}}
#-
#box(stitch){{
''stitch''
}}
#-
#box(comment){{
''comment''
}}
#br
#-
#box(label,title=CHIP){{
''label (chip)''
}}
#-
#box(label,label-style=full,title=FULL){{
''label (full)''
}}
#-
#box(border){{
''border''
}}
#-
#box(double){{
''double''
}}
#-
#box(dashed){{
''dashed''
}}
#-
#box(dotted){{
''dotted''
}}
#-
#box(cross){{
''cross''
}}
#-
#box(bracket){{
''bracket (diagonal)''
}}
#-
#box(bracket,bracket-style=side){{
''bracket (side)''
}}
#-
#box(pre){{
''pre''
// 整形済みテキスト
}}
#-
#box(code){{
''code''
// Google Code Prettifyによるシンタックスハイライト
}}#-
#box(custom,icon-b=f16d,box-color=white,border-width=5px,shadow=soft,"bg=linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%)",font-size=20px,corner=super-round,color=pink){{
''custom''
}}
}}}

**オプション (汎用) [#r5a1e4d3]
ボックスの種類によっては使えないオプションもある。

#ac(all)

***background= [#q4546a34]
#ac(h){{{{
背景色を変える。bgでも可。
使い方はCSSでの指定とほぼ同じ。
文字列にカンマが含まれる場合はダブルクォーテーションで囲う。
#flex{{{
#box(custom,background=lavender,width=300px){{
''background=lavender''
}}
#-
#box(custom,bg=#ecc,width=300px){{
''bg=#ecc''
}}
#-
#box(custom,"bg=linear-gradient(45deg, lavender, #ecc)"){{
''"bg=linear-gradient(45deg, lavender, #ecc)"''
↑ 引数全体をダブルクォーテーションで囲う
}}
}}}
}}}}

***border系 [#u1c6e96e]
#ac(h){{{{
枠の幅、色、スタイルを変える。
使い方はCSSでの指定とほぼ同じ。
-''border'' -- 一括指定
-''border-width'' -- bwidthでも可
-''border-style'' -- bstyleでも可
-''border-color'' -- bcolorでも可

#flex(300){{{
#box(custom,border=1px tomato dashed){{
''border=1px tomato dashed''
}}
#-
#box(custom,bwidth=1px,bcolor=tomato,bstyle=dashed){{
-''bwidth=1px''
-''bcolor=tomato''
-''bstyle=dashed''
}}
}}}
}}}}

***box-color= [#yf99f12d]
#ac(h){{{{
プラグインで定義済みのテンプレートカラーを適用する。
#flex(220){{{
#box(custom,box-color=red){{
''box-color=red''
}}
#-
#box(custom,box-color=yellow){{
''box-color=yellow''
}}
#-
#box(custom,box-color=orange){{
''box-color=orange''
}}
#-
#box(custom,box-color=green){{
''box-color=green''
}}
#-
#box(custom,box-color=blue){{
''box-color=blue''
}}
#-
#box(custom,box-color=purple){{
''box-color=purple''
}}
#-
#box(custom,box-color=black){{
''box-color=black''
}}
#-
#box(custom,box-color=white){{
''box-color=white''
}}
}}}
}}}}

***color= [#q9320cc8]
#ac(h){{{
文字色を変える。
使い方はCSSでの指定とほぼ同じ。
#box(custom,box-color=blue,color=#fe5656,width=300px){{
''color=#fe5656''
}}
}}}

***corner= [#a3d69f1c]
#ac(h){{{{
ボックスの角の形状を指定する。
#flex(230){{{
#box(custom,box-color=orange,corner=sharp){{
''corner=sharp''
}}
#-
#box(custom,box-color=orange,corner=round){{
''corner=round'' &size(12){(デフォルト)};
}}
#-
#box(custom,box-color=orange,corner=super-round){{
''corner=super-round''
}}
}}}
}}}}

***float= [#ef970cfb]
#ac(h){{{{
テキストの回り込み。
#flex(350,border){{{
#box(border,box-color=blue,float=left){{
''float=left''
}}
テキスト
#-
#box(border,box-color=blue,float=right){{
''float=right''
}}
テキスト
}}}
}}}}

***font系 [#rd105b94]
#ac(h){{{{
文字のサイズ、太さ、スタイルを変える。
使い方はCSSでの指定とほぼ同じ。
-''font-size'' -- fsizeでも可
-''font-weight'' -- fweightでも可
-''font-style'' -- fstyleでも可

#flex(225){{{
#box(border,fsize=13px){{
''fsize=13px''
}}
#-
#box(border,fweight=900){{
fweight=900
}}
#-
#box(border,fstyle=italic){{
''fstyle=italic''
}}
}}}
}}}}

***left / center / right [#b8c7fd18]
#ac(h){{{
ボックスの表示位置を指定する。
ボックスの幅を指定していないと機能しない。
#box(border,width=250px,left){{
''left''
}}
#box(border,width=250px,center){{
''center''
}}
#box(border,width=250px,right){{
''right''
}}
}}}

***shadow= [#jed9203f]
#ac(h){{{{
ボックスに影をつける。
#flex(300){{{
#box(custom,box-color=red,shadow=hard){{
''shadow=hard''
}}
#-
#box(custom,box-color=red,shadow=soft){{
''shadow=soft''
}}
}}}
}}}}

***tilt= [#f8ef56a5]
#ac(h){{{{
ボックスを傾ける
#flex(300){{{
#box(caution,tilt=left){{
''tilt=left''
}}
#-
#box(caution,tilt=right){{
''tilt=right''
}}
}}}
}}}}

***width=, height= [#i6b25fec]
#ac(h){{{
ボックスの幅、高さを指定する。 (px, %, etc...)
#box(border,width=50%){{
''width=50%''
}}
#box(border,height=150px){{
''height=150px''
}}
}}}

#ac(end)

**オプション (専用) [#ie452dc4]
#ac(all)

***bracket専用 [#y6e01f58]
#ac(h){{{{
:bracket-style|
ボックスのスタイルを切り替える。未指定の場合はdiagonal

#flex(300){{{
#box(bracket,bracket-style=diagonal){{
''bracket-style=diagonal''
}}
#-
#box(bracket,bracket-style=side){{
''bracket-style=side''
}}
}}}
}}}}

***code専用 [#p58871ae]
#ac(h){{
:lang=|
コードの言語名
:skin=|
[[Google Code Prettify:https://github.com/googlearchive/code-prettify]]のテーマ。未指定の場合はsunburst
他のテーマ名は[[公式の見本:https://raw.githack.com/google/code-prettify/master/styles/index.html]]を参照
}}

***comment専用 [#x1c40bcc]
#ac(h){{{{
:comment-style|
ボーダーの有無を選択する。未指定の場合はborder

#flex(300){{{
#box(comment,comment-style=border){{
''comment-style=border''
}}
#-
#box(comment,comment-style=solid){{
''comment-style=solid''
}}
}}}
:cone|
吹き出しの突起の位置を変更する。未指定の場合はleft

#flex(225){{{
#box(comment,box-color=blue,cone=left){{
''cone=left''
}}
#-
#box(comment,box-color=blue,cone=center){{
''cone=center''
}}
#-
#box(comment,box-color=blue,cone=right){{
''cone=right''
}}
}}}
}}}}

***custom専用 [#i004bb16]
#ac(h){{{{
:icon=, icon-b=|
左にunicodeで指定した[[Font Awesome:https://fontawesome.com/v5.15/icons?d=gallery&p=2&m=free]]のアイコンを表示する
brandsアイコンは&marker(yellow){icon-b=};で、それ以外 (regular, solid) はicon=で指定する
:icon-weight=400|
regularタイプのアイコンを表示する場合は&marker(yellow){icon-weight=400};を指定する

※アイコンの色はbox-colorでのみ指定可能

#flex(300){{{
#box(custom,box-color=black,icon-b=f179){{
''icon-b=f179''
}}
#-
#box(custom,box-color=black,icon=f164,icon-weight=400){{
''icon=f164,icon-weight=400''
}}
}}}
}}}}

***label専用 [#f34a3268]
#ac(h){{{{
:title=|
ボックスのタイトル。未指定の場合はPOINTと表示される

#box(label,title=使用例){{
''title=使用例''
}}

:label-style|
ボックスのスタイルを切り替える。未指定の場合はchip

#flex(300){{{
#box(label,box-color=green,label-style=chip,title=使用例){{
''label-style=chip''
}}
#-
#box(label,box-color=green,label-style=full,title=使用例){{
''label-style=full''
}}
}}}
}}}}
***quote専用 [#eb6426ca]
#ac(h){{{
:cite=|
引用元の表示

 #box(quote,cite=枕草子 第1段){{ ...
#box(quote,cite=枕草子 第1段){{
春はあけぼの。やうやうしろくなりゆく山ぎは、すこしあかりて、紫だちたる雲のほそくたなびきたる。
}}
}}}

*ボックスの種類と非対応の汎用オプション [#g3c2832a]
|>|~ボックスの種類|~非対応オプション|h
|BOLD:100|150|CENTER:BGCOLOR(#e5ecf5):500|c
|#ul(border,dashed,dotted,double)|(ボーダー系)|border &bull; border-style|
|#ul(caution,check,hint,info,quote,warning)|(アイコン系)|background &bull; border-color &bull; box-color|
|#ul(bracket,cross)||border &bull; border-color &bull; corner|
|#ul(comment)||background &bull; border &bull; border-width &bull; border-color &bull; border-style &bull; corner|
|#ul(label)||background &bull; border-color|
|#ul(solid)||border &bull; border-width &bull; border-color &bull; border-style|
|#ul(stitch)|| border &bull; border-width &bull; border-style|

*使用例 [#l7902d95]
適当な使用例をいくつか。

#box(pre){{{
#box(cross,bwidth=3px,bstyle=double,width=300px,center){{
CENTER:ようこそ
}}
}}}

#box(cross,bwidth=3px,bstyle=double,width=300px,center){{
CENTER:ようこそ
}}

#br

#box(pre){{{{
#flex(350){{{
#box(label,title=良い例){{
-外出時にはマスクをする
-帰ってきたら手洗いうがいをする
}}
#-
#box(label,title=悪い例,box-color=red){{
-大声で歌う
-大人数で狭い部屋に居続ける
}}
}}}
}}}}
#br
#flex(350){{{
#box(label,title=良い例){{
-外出時にはマスクをする
-帰ってきたら手洗いうがいをする
}}
#-
#box(label,title=悪い例,box-color=red){{
-大声で歌う
-大人数で狭い部屋に居続ける
}}
}}}

#br

#box(pre){{{
#box(custom,box-color=white,bg=#9c7fd5,width=300px,color=white,corner=sharp,shadow=hard,icon-b=f392){{
https://discord.gg/*****
}}
}}}

#box(custom,box-color=white,bg=#9c7fd5,width=300px,color=white,corner=sharp,shadow=hard,icon-b=f392){{
https: //discord.gg/*****
}}

#br

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

console.log(hoge);
}}
}}}

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

console.log(hoge);
}}

*追加したい機能 [#rc557fc6]
-特になし。

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