#author("2023-03-17T21:55:52+09:00","default:kanateko","kanateko")
#author("2023-03-17T21:56:04+09:00","default:kanateko","kanateko")
&tag(プラグイン,自作,追加);
#ref(flexbox.jpg,nolink,center,wrap,500x)
#contentsx
*flexboxレイアウト化プラグイン [#ia166836]
#infobox(plugin){{
name=flex
ver=1.4.0
pukiwiki=1.5.3
update=2023-03-17
}}
指定した範囲をタグで区切って横並びに表示するプラグイン。要素がページ幅を超える場合は自動的に折り返して表示する。名前の通りCSS3から導入されたFlexible Box Layout Moduleを利用する。
もともとstyleプラグインを使って"flex"クラスを付与することでこのようなレイアウトを実現していたが、その機能を1つのプラグインとして独立させたものになる。
:このプラグインでできること|
--指定した範囲を区切って横並びに表示する
--要素の並べ方を色々と指定可能
--その他見た目を変えるオプションあり
#clear
*ダウンロード[#nc904a0b]
最新: [[GitHub>https://github.com/kanateko/pukiwiki-plugin]]
|~日付|~バージョン|~備考|h
|2023-03-17~1.4.0|#ul(scrollオプションを追加)|
|2023-03-17|1.4.0|#ul(scrollオプションを追加)|
|2022-07-31|1.3.0|#ul(マルチラインプラグインの入れ子に対応,コードを整理して公開)|
|2022-04-13|1.2.0|#ul(クラスを追加する機能を実装,要素の幅の指定方法を拡張)|
|2021-07-11|1.1.0|#ul(menuの画像切り抜きを廃止,画像を切り抜く機能はmenu-squareとして分離)|
|2021-07-03|1.0.0|#ul(初版作成)|
※配布版に以下の機能は含まれない。
-menu, menu-square, auto
*セットアップ [#ma9d057e]
+ダウンロードした「plugin-flex」の中身 (skinフォルダとpluginフォルダ) をPukiWikiのディレクトリに放り込む。
+PukiWikiの設定でマルチラインプラグインを許可する。
pukiwiki.ini.phpの56行目
#prism(php){{
define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); // 1 = Disabled
}}
*プラグイン設定 [#l10e79ce]
:(PluginFlexクラス) SPLIT_TAG|要素を分割するためのタグ。デフォルトは"#-"
*使用方法 [#gf4f575f]
#flex([オプション]){{
要素1
#-
要素2
#-
︙
}}
要素は "''#-''" で区切る。
**オプション [#ab502c49]
***要素の整列方法 [#ma52768d]
CSSの "justify-content" 準拠。デフォルトはcenter。
:flex-start, start, left|要素を左に寄せる
:flex-end, end, right|要素を右に寄せる
:center|要素を中央に寄せる
:space-around|要素同士の間を均等に取り、両端には余白を持たせない
:space-between|要素同士の間を均等に取り、両端にはその半分の余白を持たせる
:space-evenly|要素同士の幅を均等に取り、両端にも同じだけの余白を持たせる
***その他 [#v89b6387]
:<数字>[px, %, em, etc...]|要素の幅を固定する。単位がない場合はpx扱いになる
:nowrap|要素を折り返さない。"flex-wrap: nowrap"に該当
:nogap|要素間の余白を無くす。整列方法がspace-...系だとページ幅によっては自動的に余白が生まれる
:border|要素を枠で囲う
:menu|アイコンメニュー用の装飾を施す
:menu-square|menuの画像切り抜き有りバージョン。1:1で切り抜く
:auto|要素の区切りをタグではなく、マルチライン部分の記述に依存させる。styleプラグインとの置き換え用
*使用例 [#me8eb03d]
わかりやすいようにすべてborderを付けている。
#ac(all)
**整列方法の違い [#d160327a]
#ac(h){{{{{
#flex(flex-start,border){{
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
}}
#flex(flex-start,border){{
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
}}
#flex(center){{...
or
#flex{{...
#flex(border){{
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
}}
#flex(flex-end){{...
#flex(flex-end,border){{
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
}}
#flex(space-around)
#flex(space-around,border){{
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
}}
#flex(space-between){{...
#flex(space-between,border){{
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
}}
#flex(space-evenly){{...
#flex(space-evenly,border){{
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
}}
#flex(stretch){{...
#flex(stretch,border,menu){{
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
}}
}}}}}
**要素の幅を固定する [#ta9c8c97]
#ac(h){{{{
オプションで数字を指定すると、すべての要素が指定した幅になる。
#flex(150){{...
#flex(flex-start,150,border){{
寿限無(じゅげむ) 寿限無(じゅげむ) 五劫(ごこう)のすりきれ 海砂利(かいじゃり)水魚(すいぎょ)の水行末(すいぎょうまつ)
#-
雲来末(うんらいまつ) 風来末(ふうらいまつ) 食(く)う寝(ね)るところに 住(す)むところ やぶらこうじの ぶらこうじ
#-
パイポ パイポ パイポの シューリンガン シューリンガンの グーリンダイ グーリンダイの ポンポコピーのポンポコナの 長久命(ちょうきゅうめい)の長助(ちょうすけ)
}}
}}}}
**要素を折り返さない [#wa51711c]
#ac(h){{{{
ページの幅を超える場合は折り返さずに要素を縮小する。
#flex(nowrap){{...
#flex(nowrap,border){{
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
}}
}}}}
**横スクロールを可能にする [#wa51711c]
#ac(h){{{{
nowrapとの併用が前提。要素を折り返さず、横にスクロールできるようにする。
この際、各要素は左寄せになり、幅はその内容の幅に合わせられる。
#flex(nowrap,scroll){{...
#flex(nowrap,scroll,border){{
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
}}
}}}}
**要素間の余白をなくす [#s164bb59]
#ac(h){{{{
#flex(nogap){{...
#flex(nogap,border){{
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
#-
&ref(logo.png,nolink);
}}
}}}}
**要素を枠で囲う [#v2d8a073]
#ac(h){{{{
#flex(border){{...
#flex{{{
#flex(300){{
CENTER:枠なし
}}
#-
#flex(300,border){{
CENTER:枠あり
}}
}}}
}}}}
**アイコンメニュー用の装飾 [#h54a9765]
#ac(h){{{{
#style(class=table_compact table_float_right){{
|CENTER:300|c
|&ref(menu_example.jpg);&br;他のページでの使用例 ([[Risk of Rain 2 Wiki>https://jpngamerswiki.com/RoR2/?#vd153ddb]])|
}}
オプションにmenuやmenu-squareを指定した上で以下のように書くとアイコンメニューが作れる。要素の幅指定との併用を強く推奨。
:アイコンメニューの特徴|
--文字サイズ14px (小さめ)
--文字などは中央寄せ
--menu-squareの場合は画像をアスペクト比1:1で切り抜き
--ホバー時に画像が拡大する
---(要素内の一番最初のリンク付き画像にのみ適用される)
#clear
''書き方''
#flex(menu){{
[[&ref(画像,nolink);>ページ名]]
#-
[[&ref(画像,nolink);>ページ名]]
#-
︙
}}
''例''
#flex(menu-square,150){{
[[&ref(flexbox.jpg,nolink);>../flex]]
[[flex.inc.php>../flex]]
#-
[[&ref(../box/box.jpg,nolink);>../box]]
[[box.inc.php>../box]]
#-
[[&ref(../slider/slider.jpg,nolink);>../slider]]
[[slider.inc.php>../slider]]
}}
#flex(menu-square,150,border){{
[[&ref(flexbox.jpg,nolink);>../flex]]
[[flex.inc.php>../flex]]
#-
[[&ref(../box/box.jpg,nolink);>../box]]
[[box.inc.php>../box]]
#-
[[&ref(../slider/slider.jpg,nolink);>../slider]]
[[slider.inc.php>../slider]]
}}
}}}}
**要素の区切りを自動で判別する [#o468c5f6]
#ac(h){{{{
タグ (#-) を使わず要素の区切りを自動で判別する。この場合他のオプションは使用できない。
styleプラグインからの置き換え用で基本的に使用は非推奨。
要素の区切り方について
#ac{{
例えば、PukiWiki記法だと空行で要素を区切りpタグで囲う仕様になっている。また、表組みやブロック型プラグインもそれぞれdivタグで囲まれるため、別々の要素として扱われる。
:要素として区切られるもの|
--空行を含んだ文章
--ブロック型プラグイン
--表組み
--見出し
}}
#flex(auto){{{
空行で1つの段落として区切られる。
そのため空行を挟んだ文章は別々の要素とみなされる。
|表組みも一つ一つが別の要素として捉えられる|
#box(hint,200){{
ブロック型のプラグインも上に同じ
}}
}}}
#flex(auto){{{
空行で1つの段落として区切られる。
そのため空行を挟んだ文章は別々の要素とみなされる。
|表組みも一つ一つが別の要素として捉えられる|
#box(hint,width=200){{
ブロック型のプラグインも上に同じ
}}
}}}
}}}}
*追加したい機能 [#rc557fc6]
-特になし
*コメント [#n8472dd2]
#pcomment(reply)
