【表子 2.1.0】 レイヤー機能、フォント・画像の調整機能、表子リンクの設置機能を追加したよ♪
ご無沙汰してます、ニャンコー不落です🐈
随分と時間が空いてしまいましたが、「表子」に厄介な不具合が見つかったことで、対応に悪戦苦闘していました。
ただnoteのMermaidがアップデートされたことが幸いし、表子のライブラリを揃え、これまで使えなかった図形を利用することで、どうにか解決することができました。
Mermaidのバージョンを上げたことで可能になったコトもあり、これまでより「表子」でできる幅が広がっていますので、お試し頂ければと思います。
操作系については「表介」も共通で修正しています。
【表介2.1】👉 https://latticelite.com/tool/hyosuke/
【表子2.1】👉 https://latticelite.com/tool/hyoko/
詳しい説明については、表子さんにお願いしたいと思います。
表子さん、よろしくお願いします！
⭐アップデート内容
みんな、お待たせ～！
noteのアップデートに合わせて、表子も「Mermaid 11」に対応したよ♪
note記事の冒頭に貼りつけても問題なくなったし、リンクも新しいタブで開けるようになってるから、チェックしてみてね！
表を重ねて飾れる「レイヤー機能」を中心に、「フォントや画像の調整機能」、「表子リンクの設置機能」などが新しく加わったんだ。
もっとかわいく、ディテールまでこだわった表が作れちゃうよ🌟
スマホとかブラウザの表示設定で、表がギューって狭くなっちゃう問題も見つかって、今回しっかり見直したの。
時間がかかった分、安定性と機能性がぐーんとアップしたから、たくさん使ってくれると嬉しいな♪
【 表子2.1 】
👉 https://latticelite.com/tool/hyoko/
⭐表が極端に狭くなる問題の修正
ちょっとビックリしたんだけど、ブラウザのズームを変えたり、特定のスマホで見たりすると、表の左右が途切れて、せっかくの表が見えなくなってたんだ。
スタイルシートやHTMLの構造を色々いじってもダメで、詳しく調べていったら、Mermaidの「フローチャート図」に不具合があることが判明したの。
noteに合わせてMermaidをバージョンアップしても治らなくて、一時はお手上げ状態だったんだけど…
表が苦しんでるのを見てると、ぜったい私が助けなくちゃって。
表助くんやAIにも手伝ってもらいながら探し続けて、やっと見つかったのが「ブロック図」！
表の外に少し余白ができちゃったり、最新の「フローチャート図」に比べてボヤけるのが惜しいんだけど、これでやっと表が縮まなくなったよ！
あと列や行に背景色をつけると、ブラウザのズーム具合によって、わずかな隙間ができちゃうみたい。
対策はセルを結合して、表面レイヤーに文字を書くのがオススメ💡
そのために表面レイヤーを作ったんだからね👌
noteに貼りつけた表がある人は、「表子 2.1.0」で作り直してみて！
ひと手間かかるけど、きれいに見せるためにお願いね☆
⭐レイヤー機能
表の土台を作る「基礎レイヤー」と、装飾メインの「表面レイヤー」を自由に重ねられるようになったよ。
画面の上にある「ツールバー」から、レイヤーを切り換えてエディットしてみてね。
表面レイヤーでは、基礎レイヤーにはない「外余白」や「縦書き」ができるんだけど、特に「外余白」をアジャストすると、セルの内に「ちびっ子セル」が作れちゃうのがポイント💡
```mermaid
%%{ init: {"theme":"base","themeVariables":{"primaryColor":"transparent"},"themeCSS":"#itaz{*{box-sizing:border-box;}.hyoko{width:595px;col{width:85px;}tr{height:36px;}tr.row1,tr.row2,tr.row4{height:26px;}tr.row3,tr.row5{height:50px;}}table{border-collapse:collapse;table-layout:fixed;width:595px;}td{color:#08131a;font-family:\"Helvetica Neue\",Arial,\"Hiragino Kaku Gothic ProN\",\"Hiragino Sans\",Meiryo,sans-serif;line-height:1.5;white-space:pre-wrap;word-break:break-all;border-top:none;}.bl{td{font-size:12px;text-align:left;padding:4px 8px;border-right:1px dotted #bfbfbf;border-bottom:1px solid #bfbfbf;border-left:1px dotted #bfbfbf;}.a1{border-top:1px solid #bfbfbf;border-left:1px solid #bfbfbf;}.b1,.c1,.d1,.e1,.f1{border-top:1px solid #bfbfbf;}.g1{border-top:1px solid #bfbfbf;border-right:1px solid #bfbfbf;}.a2{border-top:1px solid #bfbfbf;border-bottom:none;border-left:1px solid #bfbfbf;}.b2,.c2,.d2,.e2,.f2{border-top:1px solid #bfbfbf;border-bottom:none;}.g2{border-top:1px solid #bfbfbf;border-bottom:none;border-right:1px solid #bfbfbf;}.a3,.a5{border-left:1px solid #bfbfbf;}.g3,.g5{border-right:1px solid #bfbfbf;}.a4{border-bottom:none;border-left:1px solid #bfbfbf;}.b4,.c4,.d4,.e4,.f4{border-bottom:none;}.g4{border-bottom:none;border-right:1px solid #bfbfbf;}}.l1{margin-left:-595px;td{height:1px;padding:0;}div{width:100%;height:100%;display:grid;font-size:12px;text-align:center;align-content:center;padding:4px 8px;border-right:none;border-bottom:none;border-left:none;}.b3,.e3,.b5,.e5,.g5{padding:8px 10px;}.f3{padding:8px 1px 8px 10px;}.a5{padding:8px 10px 8px 1px;}._a1,._a2,._a4{color:#e60000;}._g1,._g2,._g4{color:#3333ff;}._b3,._e3,._b5,._e5{background-color:#ffffb3;border:1px solid #b3b300;border-radius:4px 4px 4px 4px;}._f3{background-color:#ff8080;border-radius:12px 0px 0px 12px;}._a5{background-color:#ff8080;border-radius:0px 12px 12px 0px;}._g5{background-color:#80ffff;}}.bl,.l1{display:inline-block;vertical-align:top;}.hlink{width:595px;text-align:right;margin:2px 0;padding:0;font:inherit;font-size:9px;line-height:1;}.hlink a{color:revert;}}","block":{"padding":0}} }%%
block-beta
columns 1
A["<div id='itaz'><div class='hyoko'><table class='bl'><colgroup><col><col><col><col><col><col><col></colgroup><tr class='row1'><td class='a1'></td><td class='b1'></td><td class='c1'></td><td class='d1'></td><td class='e1'></td><td class='f1'></td><td class='g1'></td></tr><tr class='row2'><td class='a2'></td><td class='b2'></td><td class='c2'></td><td class='d2'></td><td class='e2'></td><td class='f2'></td><td class='g2'></td></tr><tr class='row3'><td class='a3'></td><td></td><td></td><td></td><td></td><td></td><td class='g3'></td></tr><tr class='row4'><td class='a4'></td><td class='b4'></td><td class='c4'></td><td class='d4'></td><td class='e4'></td><td class='f4'></td><td class='g4'></td></tr><tr class='row5'><td class='a5'></td><td></td><td></td><td></td><td></td><td></td><td class='g5'></td></tr></table><table class='l1' aria-hidden='true'><colgroup><col><col><col><col><col><col><col></colgroup><tr class='row1'><td><div class='_a1'>日</div></td><td><div class='_b1'>月</div></td><td><div class='_c1'>火</div></td><td><div class='_d1'>水</div></td><td><div class='_e1'>木</div></td><td><div class='_f1'>金</div></td><td><div class='_g1'>土</div></td></tr><tr class='row2'><td><div class='_a2'>1</div></td><td><div class='_b2'>2</div></td><td><div class='_c2'>3</div></td><td><div class='_d2'>4</div></td><td><div class='_e2'>5</div></td><td><div class='_f2'>6</div></td><td><div class='_g2'>7</div></td></tr><tr class='row3'><td></td><td class='b3'><div class='_b3'>塾</div></td><td></td><td></td><td class='e3'><div class='_e3'>塾</div></td><td class='f3' colspan='2'><div class='_f3'>合宿</div></td></tr><tr class='row4'><td><div class='_a4'>8</div></td><td><div class='_b4'>9</div></td><td><div class='_c4'>10</div></td><td><div class='_d4'>11</div></td><td><div class='_e4'>12</div></td><td><div class='_f4'>13</div></td><td><div class='_g4'>14</div></td></tr><tr class='row5'><td class='a5'><div class='_a5'>合宿</div></td><td class='b5'><div class='_b5'>塾</div></td><td></td><td></td><td class='e5'><div class='_e5'>塾</div></td><td></td><td class='g5'><div class='_g5'>テニス</div></td></tr></table></div><div class='hlink'><a href="/https://latticelite.com/tool/hyoko/#3ZlBaxNBFIC72aRjtaAH0Ugv4cWeHMLM7ram69GLCMGDeCo5ZNNsE9xkl92lpDQ5aEELXvTkpSAeBEEQD1686I8pUfwTKrM7I9tk003FipmEZB47b9_M997mvTfk54-VcA92Wj6YoFVohQCGhueBCe1d96ELGJxdH8zNTYIJpphi-PryDeA9sAMwgWpen6mETJ8JbTBpZQ2DE4BJMHgOmFUMnh8PIZgGBs-KhnYDTGgChh0mdAGDteWDuQdN9mUxkz2312LXrYTsJGRfyEMMwR_cNcTQZDPl1johhMCwjjdjSsZ5eCANZwymxWDfHr2TDEznEfvwUTIwQzyKbyUDW4vBvj99IRnYegw2OnwlDZhIkrpuRxmSikpApUNM1AEq6oAmDWWMxauALhkWrwGGZFi8AqxJhsXz_7pkWDz735QGazz3ayIrjl5__iuQE0jU65cC1-lslcqWbumEiJ2mTjjTJvzUiWNuONuVhhisbeY627ZtSwcMXQdMSjB0fT6GkT-6VjRMRttnlg2vX0p8eBCM-QnC5OM3x35naUvDMHp-MHr_5Wxc_w9-0sI_VVIl4_6Z0T0MuUT4J-JnDtJFZ1iVLgEmOkNd5MANaShjLN4ZUiIZF28NqTznlZiLVwEq1wlFF80hleuIoovukMpzRhlvDw1RACSskKdsIERhLIlSyR30__XPSQ_I2jIb89QyyxsEngGP9p8c7T87evxpzhNElTAnndpFw3p9WEDLV9T8VVVRESqTKtVpo4Ku8zYTs4SKeQQwz0OYL4fQEg3Kls3eOZRnnlPQYq3V8Xfdolq8jBCfvIsMyw1DtzvwO9vtcEAGZLAxuOe1eqsaCdudgA0Ny2mtaqTDrt1h__hVrqkPLuVz9eVcDd1vmr-XqqRKIZduBbNqIlSInrhcDd04Zj7dVMpt03YVTlybtqtJzYT520nzvUzYVI0TzIWZ5iY1ZjKXCp2qIcypkbleZmQzNIS5oqqlWEzlzdCY1WKQaXEcuahquRrSmcVpoZ0yk4jBSrSh4zgpamKVKfs9MTQLFxUlV1CVvFIoLCpIOVdYUs4rFwrLXF7Ifv0C" target='_blank' rel='noopener noreferrer'>Open this table in Hyoko.</a></div></div>"]
```2つのレイヤーを重ねることで、これまで表現できなかった奥行きのある表が作れるから、色々と試してみてね😉
【 表子2.1 】
👉 https://latticelite.com/tool/hyoko/
⭐フォントのカスタム設定
これまで1つのフォントしか指定できなかったけど、WindowsかMac複数など複数のフォントを組み合わせて設定できるようになったよ。
リストから「ゴシック系」「明朝系」「等幅系」のプリセットを選べるし、こだわりたい時は「カスタム」リンクをクリックしてね。
ポップアップの「候補」エリアからフォントを選んで、「→」ボタンで「適用」エリアに追加。
優先順位も「↑」ボタンやマウスドラッグで簡単に変えられるから、好みのタイポグラフィを楽しんでね。
【 表子2.1 】
👉 https://latticelite.com/tool/hyoko/
⭐画像の詳細設定
「Mermaid 11」へのアップデートで、画像を背景として扱えるようになったよ！
画像のURLを入力すれば、「サイジング」「範囲・反復」「表示位置」で細かくカスタマイズできるんだ。
🔹 画像のサイジング
セルの中で 画像をどう見せるか を決める、フィッティングの設定だよ。
```mermaid
%%{ init: {"theme":"base","themeVariables":{"primaryColor":"transparent"},"themeCSS":"#XVig{*{box-sizing:border-box;}.hyoko{width:610px;col{width:152.230px;}tr{height:36px;}col.col2{width:411.272px;}}table{border-collapse:collapse;table-layout:fixed;width:564.5px;}td{color:#08131a;font-family:\"Helvetica Neue\",Arial,\"Hiragino Kaku Gothic ProN\",\"Hiragino Sans\",Meiryo,sans-serif;font-size:14px;text-align:center;vertical-align:middle;padding:4px 8px;line-height:1.5;white-space:pre-wrap;word-break:break-all;border:1px solid #bfbfbf;}.a1,.b1{background-color:#FFD9B3;font-weight:bold;}.b2,.b4,.b6{text-align:left;}.a3,.a5{background-color:#FFF2E6;}.b3,.b5{background-color:#FFF2E6;text-align:left;}.hlink{width:564.5px;text-align:right;margin:2px 0;padding:0;font:inherit;font-size:9px;line-height:1;}.hlink a{color:revert;}}","block":{"padding":0}} }%%
block-beta
columns 1
A["<div id='XVig'><div class='hyoko'><table class='bl'><colgroup><col><col class='col2'></colgroup><tr><td class='a1'>項目</td><td class='b1'>説明</td></tr><tr><td>フィット</td><td class='b2'>縦横比を保ったまま、セル全体を覆うように隙間なく配置</td></tr><tr><td class='a3'>全体表示</td><td class='b3'>縦横比を保ったまま、画像全体がセルに収まるように配置</td></tr><tr><td>元サイズ</td><td class='b4'>元画像のサイズで表示</td></tr><tr><td class='a5'>％指定</td><td class='b5'>横の入力欄で、セルサイズに対するパーセンテージを指定</td></tr><tr><td>px指定</td><td class='b6'>横の入力欄で、任意のピクセルを指定</td></tr></table></div><div class='hlink'><a href="/https://latticelite.com/tool/hyoko/#hU_RThNBFHW62x0wTfTBQCTBh214I822NUT4AmICfEMru3ZjdZu2MRLXxJlhC0GkoVQjoFEDQtOS7YMxIRTwY253t33yEzTT3UWJJGQmc8-cOfecO7_HX8rP1aI8I6cSyYQiT8qZQkGekXNLxhNDfiVFbo4I4qiABIzjyoNkOplJ4FtxTVuczqYn45qmpdQpjIeTpXhW4wthaU7Vi0tGFKNHdzAO6If4ftYol42nZlF_nCubiqmY0-ZCQX02kVLKOb3ESyabVydSis65WZ6fuC1G8pIwhkSMg0yMoyUjry-KV5F3RfQRhRchBFGM8vwl4jf4Ewcu_1Oh-kYMoQgSkIiiSLpUpf4Xy9u1pV7zyP2wEQP2DugeMAZsdd47PnAbTbddB1rr_vwEZA_IZyDnfL8mQDvAWo7V6J5tAa31DipAKkBX-Ula_Z3t_vstIE0g1b711juzY76097Xh7Z9c4-3VOw6rBt5k3Y8C0nKqG1xA3_zNCb0Z0B9A94Ge3HMs5hsAsS9YIId-9PCvU8tdX3HsnXm30QRiO9Y3Z23XPVoGcnjxr3_6Wk77HMg2T2WbwE4Hgu_AKgN8DLTm2w0VXvggfaVvt9NxlwcjsTrQdhgTNP8B" target='_blank' rel='noopener noreferrer'>Open this table in Hyoko.</a></div></div>"]
```🔹 範囲・反復
「範囲」は、画像の表示基準を決める設定。
```mermaid
%%{ init: {"theme":"base","themeVariables":{"primaryColor":"transparent"},"themeCSS":"#VP9N{*{box-sizing:border-box;}.hyoko{width:610px;col{width:152.210px;}tr{height:36px;}col.col1{width:44.914px;}col.col2{width:147.719px;}col.col3{width:331.369px;}}table{border-collapse:collapse;table-layout:fixed;width:525px;}td{color:#08131a;font-family:\"Helvetica Neue\",Arial,\"Hiragino Kaku Gothic ProN\",\"Hiragino Sans\",Meiryo,sans-serif;font-size:14px;text-align:center;vertical-align:middle;padding:4px 8px;line-height:1.5;white-space:pre-wrap;word-break:break-all;border:1px solid #bfbfbf;}.a1,.b1,.c1{background-color:#ffd9b3;font-weight:bold;}.c2,.c4{text-align:left;}.a3,.b3,.a5,.b5{background-color:#fff2e6;}.c3,.c5{background-color:#fff2e6;text-align:left;}.hlink{width:525px;text-align:right;margin:2px 0;padding:0;font:inherit;font-size:9px;line-height:1;}.hlink a{color:revert;}}","block":{"padding":0}} }%%
block-beta
columns 1
A["<div id='VP9N'><div class='hyoko'><table class='bl'><colgroup><col class='col1'><col class='col2'><col class='col3'></colgroup><tr><td class='a1'></td><td class='b1'>項目</td><td class='c1'>説明</td></tr><tr><td>①</td><td>枠線を含む</td><td class='c2'>セルいっぱいに画像を表示</td></tr><tr><td class='a3'>②</td><td class='b3'>枠線の内側</td><td class='c3'>枠線の内側に画像を表示</td></tr><tr><td>③</td><td>余白の内側</td><td class='c4'>余白の内側に画像を表示</td></tr><tr><td class='a5'>④</td><td class='b5'>テキスト</td><td class='c5'>テキスト内に画像を表示（文字色：透明）</td></tr></table></div><div class='hlink'><a href="/https://latticelite.com/tool/hyoko/#-y9brVSWWqRkpWSkZ6hnoKSjlFhQoGSllFGZn52vVMvKzC3GzCLOzMjMzq5sYGFobJiox86vnJaWYplkrKOclpZmlGrGzs5pWKyclAaCjOxsvqmZRZX5rOyMySLs7FBhL3aTpPySkvzcmqLM9IySGoMagxrLGv-C1DxVI4OSjMxiEJWYlJOqamSQCRLzANmvJ8msK8DClMPJIsXoy86ebFWcn5OZwsLODnUAOzsrWIQVv7QkC8MUgkoYfZgQCmDCzJhCIMNYMIVZ2RlzQIYwo9sCCSCIIhZ8kmBX4lMAs4KBn5GRiZGZkYWRlZGNkZ2Rg5EThc3A9nJB6_PZ69herFrzbEYf86OJC_ifzVvwfPusx02Tnk5Y_bipQeVx0-7HzasfN7Y8blz8uHEjmLH6-ZTdT5v7HzdNerFwxfMlu5gfTVwI09i47mlb69PGLYpofKy6FvE_2Tvz-cy9CF1ofKy6FvM8bm573LT2cdPOx80dlsicp22tmFre7-l4Nq396drpLzo3vd8z62VD_7MZfe_3dAIA" target='_blank' rel='noopener noreferrer'>Open this table in Hyoko.</a></div></div>"]
```
ちょっと分かりにくいから、このサンプルでイメージを掴んでみて！
```mermaid
%%{ init: {"theme":"base","themeVariables":{"primaryColor":"transparent"},"themeCSS":"#ofW2{*{box-sizing:border-box;}.hyoko{width:610px;col{width:152.5px;}tr{height:36px;}col.col2,col.col4,col.col6{width:20px;}col.col1,col.col3,col.col5,col.col7{width:137.5px;}tr.row3{height:10px;}tr.row1{height:24px;}tr.row2{height:151px;}}table{border-collapse:collapse;table-layout:fixed;width:610px;}td{color:#08131a;font-family:\"Helvetica Neue\",Arial,\"Hiragino Kaku Gothic ProN\",\"Hiragino Sans\",Meiryo,sans-serif;font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-all;border:none;}.bl{td{text-align:left;padding:4px 8px;}}.l1{margin-left:-610px;td{height:1px;padding:0;}div{width:100%;height:100%;display:grid;text-align:left;align-content:center;padding:4px 8px;}._a1,._c1,._e1,._g1{font-size:16px;text-align:center;padding:0;}._a2{background:url(\"https://assets.st-note.com/production/uploads/images/201920199/profile_ca1a188f1a00bc94338668ee63c76df4.png\") center center/100% 100% no-repeat border-box;padding:10px;border:10px dashed #ff8080;}._c2{background:url(\"https://assets.st-note.com/production/uploads/images/201920199/profile_ca1a188f1a00bc94338668ee63c76df4.png\") center center/100% 100% no-repeat padding-box;padding:10px;border:10px dashed #ff8080;}._e2{background:url(\"https://assets.st-note.com/production/uploads/images/201920199/profile_ca1a188f1a00bc94338668ee63c76df4.png\") center center/100% 100% no-repeat content-box;padding:10px;border:10px dashed #ff8080;}._g2{background:url(\"https://assets.st-note.com/production/uploads/images/201920199/profile_ca1a188f1a00bc94338668ee63c76df4.png\") center center/100% 100% no-repeat;background-clip:text;-webkit-background-clip:text;color:transparent;font-size:74px;text-align:center;padding:10px;font-weight:bold;border:10px dashed #ff8080;}}.bl,.l1{display:inline-block;vertical-align:top;}.hlink{width:610px;text-align:right;margin:2px 0;padding:0;font:inherit;font-size:9px;line-height:1;}.hlink a{color:revert;}}","block":{"padding":0}} }%%
block-beta
columns 1
A["<div id='ofW2'><div class='hyoko'><table class='bl'><colgroup><col class='col1'><col class='col2'><col class='col3'><col class='col4'><col class='col5'><col class='col6'><col class='col7'></colgroup><tr class='row1'><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr class='row2'><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr class='row3'><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></table><table class='l1' aria-hidden='true'><colgroup><col class='col1'><col class='col2'><col class='col3'><col class='col4'><col class='col5'><col class='col6'><col class='col7'></colgroup><tr class='row1'><td><div class='_a1'>①</div></td><td></td><td><div class='_c1'>②</div></td><td></td><td><div class='_e1'>③</div></td><td></td><td><div class='_g1'>④</div></td></tr><tr class='row2'><td><div class='_a2'></div></td><td></td><td><div class='_c2'></div></td><td></td><td><div class='_e2'></div></td><td></td><td><div class='_g2'>🐈</div></td></tr><tr class='row3'><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></table></div><div class='hlink'><a href="/https://latticelite.com/tool/hyoko/#5VbdbtMwFF6WrdZ6gbjogN1NZ9qdl9ht6VJzuRuENPEAVYWcxGkiUieKvdGxRuKSS3gC_t6MJ-AJALlpoUhNxSYutpHo5HzyybH9nc928uN7c_cSzkUBDNoOdQhg4HkODOKL7GUGGNKLAthgQDDBFFMMX99_BHwJkQYGpyIpLsxLkQIGtJdPAIM_Aga64FLlvBBSA4YgBQYHxKMdygFDzIFBABjODRibQUxvsQExMOo8xpAqYARDnlauqJyunD9zflgAu4TAPHzTgcykMBPwl3C6hIsFLjGoa2SV5RAPCG4vCvHpPy9Ed1GIzzexEOm_IdlbkPxys0hemxJd7OQ6Pt2r8En_mg-dE6JzRnROia5bwatXKiX5ZD_kKhbh_kEUecQjiwLUhNL6UFETKksMyZiPBDAgbl5kUZKKFwGnnHpeRDkhftDvdjper-cJ0esEx70w6jq5HAGGRL0GBnmgZ_iVYUkMimeokqF9e2RYvZduuwwYksB86nIehokcHfnZBCppujdVmrtX_CCTWki9VPz5ifvtw7u3NQIcrxfgz6YrHrtrRQCmizNxh9XQYqKhHA5LGzUf2PcwOhlArHWumOtypYRWjtJHMtPCCbKxmUN4Fugkk-5ZnmY8VO5sgsptE9o31ndh-NC2bITm28L5hRDaoerAj8xtoUYlcQuhedMz1PUzrbPxtEhGsZ6SKZ32p89zIQ_bRMeJMo77qThsk8S0PTV_rM79rc20sXWKUMDkE8UkQtsqS5Pwkd3aa5zsvNmoidmtVYFZRn1eFV6dajfXjNfcs1sbu5a1af0229pasm2rsWQbq66f" target='_blank' rel='noopener noreferrer'>Open this table in Hyoko.</a></div></div>"]
```※ テキスト内に画像を表示する時は、文字色を「透明」にするのがポイントだよ。
「反復」は、パターン柄みたいに画像を並べたい時に便利♪
```mermaid
%%{ init: {"theme":"base","themeVariables":{"primaryColor":"transparent"},"themeCSS":"#zgDS{*{box-sizing:border-box;}.hyoko{width:610px;col{width:152.210px;}tr{height:36px;}col.col1{width:44.914px;}col.col2{width:147.719px;}col.col3{width:331.369px;}}table{border-collapse:collapse;table-layout:fixed;width:525px;}td{color:#08131a;font-family:\"Helvetica Neue\",Arial,\"Hiragino Kaku Gothic ProN\",\"Hiragino Sans\",Meiryo,sans-serif;font-size:14px;text-align:center;vertical-align:middle;padding:4px 8px;line-height:1.5;white-space:pre-wrap;word-break:break-all;border:1px solid #bfbfbf;}.a1,.b1,.c1{background-color:#FFD9B3;font-weight:bold;}.c2,.c4{text-align:left;}.a3,.b3,.a5,.b5{background-color:#FFF2E6;}.c3,.c5{background-color:#FFF2E6;text-align:left;}.hlink{width:525px;text-align:right;margin:2px 0;padding:0;font:inherit;font-size:9px;line-height:1;}.hlink a{color:revert;}}","block":{"padding":0}} }%%
block-beta
columns 1
A["<div id='zgDS'><div class='hyoko'><table class='bl'><colgroup><col class='col1'><col class='col2'><col class='col3'></colgroup><tr><td class='a1'></td><td class='b1'>項目</td><td class='c1'>説明</td></tr><tr><td>①</td><td>反復なし</td><td class='c2'>画像を指定された箇所に1つだけ表示</td></tr><tr><td class='a3'>②</td><td class='b3'>縦横</td><td class='c3'>画像を縦と横に並べて表示</td></tr><tr><td>③</td><td>横のみ</td><td class='c4'>画像を横に並べて表示</td></tr><tr><td class='a5'>④</td><td class='b5'>縦のみ</td><td class='c5'>画像を縦に並べて表示</td></tr></table></div><div class='hlink'><a href="/https://latticelite.com/tool/hyoko/#dY_fSgJBFMYdZ3enpcAuojCoizXvTHY1In2CiKJn0NzNJWtFl0DaoDFCAksMo6iLtERMw2srqHdxcteeolj_lZnMxZzz-75zPs7X3AG3L8Y4P-dxC26ec3GBaJTzc-GEsqNwhzQcn4bUDAQQIQe_IniFgBvZHJIU8gW9LockSR5xGSFWiDuCkvkAYjZEOZZQaAS2phDq4jW0FFRUVdnVYvJ2WNV4jdd82mZU3HN6eDUsx80vEIyITg8vm2zVzHfb4eIkZY2wcBZQCHVjEaLjSkQOUf9BO2XJjRDAOug11t922GtoBCKmzdqZ7pzWkeAwaicN494Siw0AK4CAAjRgAAJjgB2oLcxn_sS4rTGtypN-fQ4b2fxEM3PWfHskuELwlWDkXpvHGZK80NOpZu2G4EuSTBN8Z9RS-ukRwVWB4CLBeYKzrULZKL7ARrbAGPWSXq4s9IeNeongsl6uEFz9MOtngkt9_z3bVmoEv8__5I0wP7DtZYPmNvpr_gY" target='_blank' rel='noopener noreferrer'>Open this table in Hyoko.</a></div></div>"]
```これもサンプルで見ると分かりやすいかな。
```mermaid
%%{ init: {"theme":"base","themeVariables":{"primaryColor":"transparent"},"themeCSS":"#vjB3{*{box-sizing:border-box;}.hyoko{width:630px;col{width:152.5px;}tr{height:36px;}col.col2,col.col4,col.col6{width:20px;}col.col1,col.col3,col.col5,col.col7{width:140px;}tr.row3{height:10px;}tr.row1{height:24px;}tr.row2{height:140px;}}table{border-collapse:collapse;table-layout:fixed;width:620px;}td{color:#08131a;font-family:\"Helvetica Neue\",Arial,\"Hiragino Kaku Gothic ProN\",\"Hiragino Sans\",Meiryo,sans-serif;font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-all;border:none;}.bl{td{text-align:left;padding:4px 8px;}}.l1{margin-left:-620px;td{height:1px;padding:0;}div{width:100%;height:100%;display:grid;text-align:left;align-content:center;padding:4px 8px;}._a1,._c1,._e1,._g1{font-size:16px;text-align:center;align-content:start;padding:0 8px;}._a2{background:#fff2e6 url(\"https://latticelite.com/tool/image/icon/pets.svg\") center center/auto no-repeat border-box;border:1px solid #bfbfbf;}._c2{background:#fff2e6 url(\"https://latticelite.com/tool/image/icon/pets.svg\") center center/auto border-box;border:1px solid #bfbfbf;}._e2{background:#fff2e6 url(\"https://latticelite.com/tool/image/icon/pets.svg\") center center/auto repeat-x border-box;border:1px solid #bfbfbf;}._g2{background:#fff2e6 url(\"https://latticelite.com/tool/image/icon/pets.svg\") center center/auto repeat-y border-box;border:1px solid #bfbfbf;}}.bl,.l1{display:inline-block;vertical-align:top;}.hlink{width:630px;text-align:right;margin:2px 0;padding:0;font:inherit;font-size:9px;line-height:1;}.hlink a{color:revert;}}","block":{"padding":0}} }%%
block-beta
columns 1
A["<div id='vjB3'><div class='hyoko'><table class='bl'><colgroup><col class='col1'><col class='col2'><col class='col3'><col class='col4'><col class='col5'><col class='col6'><col class='col7'></colgroup><tr class='row1'><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr class='row2'><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr class='row3'><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></table><table class='l1' aria-hidden='true'><colgroup><col class='col1'><col class='col2'><col class='col3'><col class='col4'><col class='col5'><col class='col6'><col class='col7'></colgroup><tr class='row1'><td><div class='_a1'>①</div></td><td></td><td><div class='_c1'>②</div></td><td></td><td><div class='_e1'>③</div></td><td></td><td><div class='_g1'>④</div></td></tr><tr class='row2'><td><div class='_a2'></div></td><td></td><td><div class='_c2'></div></td><td></td><td><div class='_e2'></div></td><td></td><td><div class='_g2'></div></td></tr><tr class='row3'><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></table></div><div class='hlink'><a href="/https://latticelite.com/tool/hyoko/#5ZbLbtNAFIbjOu2oWQCLcOmu-qPuBt8IURleACFVPECUhe2OY4uJbc0MUUISCbHuhjfg8mY8CKBJbBGEs4CqVaXYOp6jc-Zy_s-X8c8fxx8XmHIJhsDxHQ8UYVmCIZ0XbwtQiLkEGw496lGf-hTfP30GXSDRYLjgmZybTokCgz8oZ6CIxmDQMsxVGUqea1DEAgw979x_5oegSEMwxKCYGsd0EGa21DgpmO88pxAKzKMoBdg5RSk3jd4Eo3UTXUqwBWJzicwEeZFzU0C05YstX9b-ikL9x6jVakSHHg1qEF_2HES_BvH1LoJolHE9wYNa8Lc7Lfg6Iv36PTcK_6Gm_qamPkU2CcccDJ5bcq0cNR2DIlPvwRC-0wbVX8-rX85OVSGyy9NelJizLrgxIXYlZGPiDxo3u9KquvW9JEkCPsAGaHDjQDNpvtiSlzzU-8e3f6t8n872j_DgdgnP94vwaGWTziP7HiV0iFTrUjHXFaHWWcxFprkTFxNXF4Vw1xzdLC5yF6PHtmUTUm0pDrlfebSamJBjX1WrWuRos091CalCr0k_KrQuJkuZjVO99Jb-8sXyTcnzs8DTaaZME0aCnwVeZmKvzP-g86B98OGofUFIzPKXiuWEHK71PbG7J-3W1Y6M3W1KtFtXu8aYVPMgu7Nznc6J3W09tKwD67fZVnvLDq2jLWs1Hb8A" target='_blank' rel='noopener noreferrer'>Open this table in Hyoko.</a></div></div>"]
```🔹 表示位置
「ヨコ方向」と「タテ方向」で、画像の表示位置を指定できるよ。
ミリ単位で細かく調整したい時は、右の切り換えボタンで「％指定」と「px指定」を使い分けてみてね。
【 表子2.1 】
👉 https://latticelite.com/tool/hyoko/
⭐表子リンクの設置機能
表の周りに「表を再開するためのリンク」を貼れる機能だよ。
noteに貼った表から、すぐに表子を開いて編集を再開できるし、読者の人へのテンプレート提供にもなるから、すごくスマート！
リンクを隠しておきたいなら、「ホバー時のみ」をONにしてみて。
マウスを乗せた時だけフワっと表示されるよ。
🔹 リンク文字とフォントサイズ
デフォルトは「Open this table in Hyoko.」の「9px」だけど、ここもお好みに変えちゃってOK。
🔹 リンクの配置
配置は、上下の左右と中央から選べるよ。
「外枠」をONにすると、表のラインじゃなくて「全体枠」の位置にフィットするから、全体のバランスを見て選んでね。
【 表子2.1 】
👉 https://latticelite.com/tool/hyoko/
⭐編集機能や見た目の改善
🔹 ツールバー
「行・列の操作」や「レイヤー・表示の切り換え」を、ツールバーとしてギュッとまとめたよ。
プレビューの配置も「上下」「左右」に変えられるし、全画面表示にも対応。作業スタイルに合わせて、使いやすくしたんだ。
🔹 右クリックメニュー
入力エリアで右クリックすると、操作メニューがポップアップ。
直感的に操作できるよ。
🔹 ショートカットキーの追加
オレンジ色の項目が新しく加わったキーだよ。
これを使えば、表のメイクアップがもっと捗るはず！
```mermaid
%%{ init: {"theme":"base","themeVariables":{"primaryColor":"transparent"},"themeCSS":"#uv7Z{*{box-sizing:border-box;}.hyoko{width:610px;col{width:200px;}tr{height:41px;}}table{border-collapse:collapse;table-layout:fixed;width:400px;}td{color:#08131a;font-family:\"Helvetica Neue\",Arial,\"Hiragino Kaku Gothic ProN\",\"Hiragino Sans\",Meiryo,sans-serif;font-size:13px;text-align:left;vertical-align:middle;padding:10px 14px;line-height:1.5;border-top:1px solid #e6e6e6;border-bottom:1px solid #e6e6e6;border-left:none;border-right:none;white-space:pre-wrap;word-break:break-all;}.a1,.b1{background-color:#fff2e6;text-align:center;font-weight:bold;}.a2,.a4,.a6,.a10{font-family:\"SF Mono\",Menlo,Monaco,Consolas,monospace;padding:10px 14px 10px 65px;}.a3,.a5,.a11,.a15{background-color:#fafafa;font-family:\"SF Mono\",Menlo,Monaco,Consolas,monospace;padding:10px 14px 10px 65px;}.b3,.b5,.b11,.b15{background-color:#fafafa;}.a7,.a9,.a13{background-color:#fafafa;color:#f57c00;font-family:\"SF Mono\",Menlo,Monaco,Consolas,monospace;padding:10px 14px 10px 65px;font-weight:bold;}.b7,.b9,.b13{background-color:#fafafa;color:#f57c00;font-weight:bold;}.a8,.a12,.a14{color:#f57c00;font-family:\"SF Mono\",Menlo,Monaco,Consolas,monospace;padding:10px 14px 10px 65px;font-weight:bold;}.b8,.b12,.b14{color:#f57c00;font-weight:bold;}.hlink{width:400px;text-align:right;margin:2px 0;padding:0;font:inherit;font-size:9px;line-height:1;}.hlink a{color:revert;}}","block":{"padding":0}} }%%
block-beta
columns 1
A["<div id='uv7Z'><div class='hyoko'><table class='bl'><colgroup><col><col></colgroup><tr><td class='a1'>ショートカットキー</td><td class='b1'>説明</td></tr><tr><td class='a2'>Ctrl + C</td><td>コピー</td></tr><tr><td class='a3'>Ctrl + X</td><td class='b3'>カット</td></tr><tr><td class='a4'>Ctrl + V</td><td>貼りつけ</td></tr><tr><td class='a5'>Ctrl + S</td><td class='b5'>貼りつけ（書式のみ）</td></tr><tr><td class='a6'>Ctrl + D</td><td>貼りつけ（値・数式のみ）</td></tr><tr><td class='a7'>Ctrl + I</td><td class='b7'>行・列の挿入</td></tr><tr><td class='a8'>Ctrl + R</td><td class='b8'>行・列の削除</td></tr><tr><td class='a9'>Ctrl + A</td><td class='b9'>すべて選択</td></tr><tr><td class='a10'>Ctrl + Z</td><td>元に戻す</td></tr><tr><td class='a11'>Ctrl + Y</td><td class='b11'>やり直す</td></tr><tr><td class='a12'>Ctrl + Delete</td><td class='b12'>値と書式のクリア</td></tr><tr><td class='a13'>Ctrl + Space</td><td class='b13'>列を選択</td></tr><tr><td class='a14'>Shift + Space</td><td class='b14'>行を選択</td></tr><tr><td class='a15'>Alt + Enter</td><td class='b15'>セル内での改行</td></tr></table></div><div class='hlink'><a href="/https://latticelite.com/tool/hyoko/#rVLfT9NQFKbrxmU4wBgVlWCaTp4sSzcUFYO64A_UgMYlRnwr85Y1lN6lLUTiTGwrZixEo8HoQmKCQTGgaNREyJbw6v9xsjme-BM0d1Kcxh-g5jycnu87557v672fm2_wI1jnO_hIKBwSeYGXkkm-g0-MkkHC32zwNOxkvY0swyIUFA-H28JSCDUGZVmO4HYhKEs0hKB88FBcFBHyh41gv0zDg7zhtuR1BvXx3VgdwaYSl7hePIx5gYvqiqQKHN-t6NKAohHuvDQ4zJ0hZkKJcxd10stXkjFJM3iB68GKPkoEzpA0o9XAuiJvR2ht2Qm2tpOtP8bWH2drz6ED_cQ0yVBKVwYSZkpMiakjqQtJrLVERDOhGDRJ_SpuiYgKxbqp09Bub9XHrV6P6vftYXpQU7wjbARxO42QdtSorLwIrflHyGcQVbnmQ0zc-_sht5VBrXzsNNdDNFL2pKlEoJUUJwLXRTSDqJIhcENEI0ZSiuNONurZ2Mm-Dagu39Y_SGE3uwNt6GeWR-gDc5_RXwvc2OX9Yl_1n4b_i0Tv5rdUNTMeD8MyXsbHVOZqBjE1jL-cXdytaaZ1E9gfwJkFJw9OGux5cJzyxytw8tWluZfFx3drukxd5fZzXX6w34EzCU7eha7410dc6HKg9DYPdgasGbDuu2hsbyW6mk8XpxYL-XtgLYC1vJofd_tO7vuhr3BrBpxc8eGbn3Wf3VaangAnV0g_AmuhOLFcGHvmcpe-4wrjmZXsjMtFG8DKgrUE1vMVa7GYeeISVwOFMQes-WI6B1bWRfsCYN8GO_Np6j1Y2TpXKlaxiXdRgdaLb3bs1-DMgf004Dqn9xqgKuwHX5fVxRKKbK5TVKZLbYmqlDilmVjfAXYOnPnCnTGwZqm9yaXS9MQX" target='_blank' rel='noopener noreferrer'>Open this table in Hyoko.</a></div></div>"]
```🔹 入力エリアの装飾
レイヤーが2つになって、「今どこをエディットしてるんだっけ？」って迷わないように、背景色と文字色を入力エリアにも反映するようにしたよ。
🔹 プレビュー
プレビューの右上で、表の各サイズがひと目で分かるようになったんだ。
```mermaid
%%{ init: {"theme":"base","themeVariables":{"primaryColor":"transparent"},"themeCSS":"#ZpJn{*{box-sizing:border-box;}.hyoko{width:610px;col{width:152.210px;}tr{height:36px;}col.col1{width:44.914px;}col.col2{width:79.848px;}col.col3{width:399.240px;}}table{border-collapse:collapse;table-layout:fixed;width:525px;}td{color:#08131a;font-family:\"Helvetica Neue\",Arial,\"Hiragino Kaku Gothic ProN\",\"Hiragino Sans\",Meiryo,sans-serif;font-size:14px;text-align:center;vertical-align:middle;padding:4px 8px;line-height:1.5;white-space:pre-wrap;word-break:break-all;border:1px solid #bfbfbf;}.a1,.b1,.c1{background-color:#ffd9b3;font-weight:bold;}.c2,.c4{text-align:left;}.a3,.b3{background-color:#fff2e6;}.c3{background-color:#fff2e6;text-align:left;}.hlink{width:525px;text-align:right;margin:2px 0;padding:0;font:inherit;font-size:9px;line-height:1;}.hlink a{color:revert;}}","block":{"padding":0}} }%%
block-beta
columns 1
A["<div id='ZpJn'><div class='hyoko'><table class='bl'><colgroup><col class='col1'><col class='col2'><col class='col3'></colgroup><tr><td class='a1'>No.</td><td class='b1'>項目</td><td class='c1'>説明</td></tr><tr><td>①</td><td>全体</td><td class='c2'>表全体の横幅</td></tr><tr><td class='a3'>②</td><td class='b3'>表</td><td class='c3'>①から「全体設定の余白」と「外観の枠線幅」を引いた値</td></tr><tr><td>③</td><td>内部</td><td class='c4'>セルの横幅と「全体設定のセルの間隔」を足した値</td></tr></table></div><div class='hlink'><a href="/https://latticelite.com/tool/hyoko/#hZBfSyJRGMY7njPzJhsUES0udDPSXQ2jLVHeL8RCrl9BcyaHrBGVIJoFx5og-sOau-5msKuLxNAfb4Iiyi_jaXL8FMVprKjAOBfn5fc8PM_LezeyKizLaSEkBMWAKAljQjSVEkJCYkVb0ITvBH8YxuQjRhjAL00FJgJREfr9ihKfjk2M-RVFCcqTAN5Axh9T2EPAz8pqekXjAM0NAXTwV_gc07JZbVFPq_OJrC7pkj6tf0vJS6NBKZtQM-yLxpLyaFBSGZth_aIPjw8QT9JLPqFZgLlQRkuqcQLQWQCAeyBcd9mHI-85CPrheTY8YvwW-XCEvKUcoCTLwK9L3PO4JtJNZDt20x8bevoQ8iCMCOIQjwD1Im9nxmFN5NsVs3VQ552jk9s_u7hZqPC2ad00ioNO1XInatRvrSP70sTNQhU7VSvcLFSosUXzmzS37Xoc69Sul6lRv2nst_YbNLdDDYuptZJzeMYS_lZaF2X70mRSfs--_kWNdWr8s3M13Cz85-0Ns71mfaH5K7p2_NTYCXlZ8eRpl4rt8k830Dk_o8ZvN_Ae" target='_blank' rel='noopener noreferrer'>Open this table in Hyoko.</a></div></div>"]
```
noteに貼った時、右端が切れないように、サイズオーバーすると自動で表が縮んでくれる仕組み。
もし縮んで文字が小さくなりすぎちゃう時は、「横スクロール」をONにするのがオススメだよ。
【 表子2.1 】
👉 https://latticelite.com/tool/hyoko/
⭐その他の変更内容
🔹 透明色の追加
背景や文字色に、「透明」が選べるようになったよ。
背景色のデフォルトを「白」から「透明」に変えたのは、どんなサイトのデザインにもスッと馴染んで欲しいからなんだ。
🔹 「透け感」項目の追加
これは表面レイヤーで本領発揮する機能！
基礎レイヤーに画像を貼って、表面レイヤーの背景を少し透かせば、一気にオシャレで抜け感ある表に早変わりするよ♪
```mermaid
%%{ init: {"theme":"base","themeVariables":{"primaryColor":"transparent"},"themeCSS":"#u5R8{*{box-sizing:border-box;}.hyoko{width:610px;col{width:152.5px;}tr{height:36px;}col.col1,col.col4{width:50px;}col.col2,col.col3{width:255px;}}table{border-collapse:collapse;table-layout:fixed;width:610px;}td{color:#08131a;font-family:\"Helvetica Neue\",Arial,\"Hiragino Kaku Gothic ProN\",\"Hiragino Sans\",Meiryo,sans-serif;font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-all;}.bl{td{text-align:left;padding:4px 8px;border:1px solid #bfbfbf;}.a1{background:url(\"https://assets.st-note.com/production/uploads/images/201920199/profile_ca1a188f1a00bc94338668ee63c76df4.png\") center center/cover no-repeat border-box;}}.l1{margin-left:-610px;td{height:1px;padding:0;}div{width:100%;height:100%;display:grid;text-align:left;align-content:center;padding:4px 8px;border:none;}._b2{background-color:rgba(153,0,230,0.25);color:#ffffff;font-size:32px;text-align:center;font-weight:bold;}}.bl,.l1{display:inline-block;vertical-align:top;}}","block":{"padding":0}} }%%
block-beta
columns 1
A["<div id='u5R8'><div class='hyoko'><table class='bl'><colgroup><col class='col1'><col class='col2'><col class='col3'><col class='col4'></colgroup><tr><td class='a1' rowspan='10' colspan='4'></td></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr></table><table class='l1' aria-hidden='true'><colgroup><col class='col1'><col class='col2'><col class='col3'><col class='col4'></colgroup><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td rowspan='2' colspan='2'><div class='_b2'>ウユニ・ニャンコに集う猫の集会</div></td><td></td></tr><tr><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></table></div></div>"]
```🔹 外余白と内余白
これまでは「内余白（パディング）」しか調整できなかったけど、新しく「外余白（マージン）」も設定できるようになったよ。
外余白はセルの外側のスペースのこと。
表面レイヤーで使うと、基礎レイヤーの枠線から少し浮かせたような「ちびっ子セル」が作れるんだ。
レイヤードスタイルを楽しみたい時に欠かせない機能だよ！
内余白はセルの内側のスペースのこと。
ここを広げると、文字の周りにゆとりができて、読みやすさがグンとアップするよ。
🔹 全体設定の調整
表全体の雰囲気を決める「全体設定」も整理したよ。
「全体枠」「余白」「外観」は、表のシルエットやフレームを決める項目。
「セルの間隔」「表の景観」は、表そのものの表情をつくる設定項目だよ。
🔹 更新履歴とヘルプ
お知らせエリアに「更新履歴」と「ヘルプ」を追加したよ。
おれまでのアップデートの歩みや、使い方のヒントもここからチェックできるから、迷った時は除いてみてね✋
【 表子2.1 】
👉 https://latticelite.com/tool/hyoko/
⭐おわりに
表子さん、お疲れのところ、ありがとうございました。
今日はゆっくり休んで、また「表活」していきましょう！
読者の皆さまには、長らくご沙汰となっていました。
6月には新サイトの立ち上げ、色々な表テンプレートを公開していきたかったのですが、煮詰まってしまい…
そうこう悩んでいる間に、noteのMermaidがバージョンアップされていることを知り、アップデートを進めていると、今度は表が狭くなる問題が発覚して、深めに沼ってました。
ただ苦難の甲斐もあって、厳しいと思っていたレイヤー機能を盛り込むことができたので、前進はできていると信じたいですね。
新サイトの方は、もうひと山、越える必要がありそうですが。
最後までお付き合い、ありがとうございました🐈
少しでも、皆さまの表づくりのお役に立てれば幸いです。
【 表子2.1 】
👉 https://latticelite.com/tool/hyoko/