docs: webp

docs/website/assets/css/custom.css

@@ -18,30 +18,17 @@ th a {
   border-bottom-width: 0;
 }
 
-.prose :where(img):not(:where([class~="not-prose"] *)) {
-  width: auto;
-  max-width: 100%;
+.prose td a :where(img):not(:where([class~="not-prose"] *)) {
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
-.prose :where(img[src$=".gif"]):not(:where([class~="not-prose"] *)) {
-  width: 240px;
-  line-height: 0;
+main#main-content > section.mt-10.prose > p.py-8.border-t {
   margin: 0;
+  padding: 0;
+  border: none;
 }
 
-.prose :where(img[src$=".png"]):not(:where([class~="not-prose"] *)) {
-  width: 660px;
-}
-
-.prose :where(img[src$="_property_tab_icon.png"]):not(:where([class~="not-prose"] *)) {
-  width: 16px;
-  height: 16px;
-  display: inline;
-  margin: auto;
-  padding: auto;
-}
-
-.prose td a :where(img):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
-  margin-bottom: 0;
+main#main-content > section.mt-10.prose > p.py-8.border-t > em {
+  display: none;
 }

docs/website/content/_index.en.md

@@ -1,7 +1,7 @@
 ---
 title: "VRM Add-on for Blender"
 description: "VRM Add-on for Blender adds VRM import, export, and editing capabilities to Blender."
-images: ["en/images/top.png"]
+images: ["en/top.en.png"]
 ---
 
 <style>
@@ -14,7 +14,7 @@ main article.prose section :where(p, img):not(:where([class~=not-prose] *)) {
 }
 </style>
 
-![](images/top.png)
+![](top.en.png)
 
 **[Download Latest Version {{< release_utc >}}](https://vrm-addon-for-blender.info/releases/VRM_Addon_for_Blender-release.zip)**<small> / [Past Releases](https://github.com/saturday06/VRM-Addon-for-Blender/releases)</small>
 
@@ -24,11 +24,11 @@ VRM Add-on for Blender adds VRM import, export, and editing capabilities to Blen
 
 | [Installation]({{< ref "installation" >}}) | [Create Simple VRM]({{< ref "create-simple-vrm-from-scratch" >}}) | [Create Humanoid VRM]({{< ref "create-humanoid-vrm-from-scratch" >}}) |
 | --- | --- | --- |
-| [![](../../images/installation.gif)]({{< ref "installation" >}}) | [![](../../images/simple.gif)]({{< ref "create-simple-vrm-from-scratch" >}}) | [![](../../images/humanoid.gif)]({{< ref "create-humanoid-vrm-from-scratch" >}}) |
+| [![](installation.gif)]({{< ref "installation" >}}) | [![](simple.gif)]({{< ref "create-simple-vrm-from-scratch" >}}) | [![](humanoid.gif)]({{< ref "create-humanoid-vrm-from-scratch" >}}) |
 
 | [Create Physics Based Material]({{< ref "material-pbr" >}}) | [Create Anime Style Material]({{< ref "material-mtoon" >}}) | |
 | --- | --- | --- |
-| [![](../../images/material_pbr.gif)]({{< ref "material-pbr" >}}) | [![](../../images/material_mtoon.gif)]({{< ref "material-mtoon" >}}) | ![](../../images/transparent.gif) |
+| [![](material_pbr.gif)]({{< ref "material-pbr" >}}) | [![](material_mtoon.gif)]({{< ref "material-mtoon" >}}) | ![](transparent.gif) |
 
 ## Overview
 

docs/website/content/_index.ja.md

@@ -1,7 +1,7 @@
 ---
 title: "VRM Add-on for Blender"
 description: "VRM Add-on for BlenderはBlenderにVRMのインポート、エクスポートや編集機能を追加するアドオンです。"
-images: ["ja/images/top.png"]
+images: ["ja/top.ja.png"]
 ---
 
 <style>
@@ -14,7 +14,7 @@ main article.prose section :where(p, img):not(:where([class~=not-prose] *)) {
 }
 </style>
 
-![](images/top.png)
+![](top.ja.png)
 
 **[最新版のダウンロード {{< release_ja >}}](https://vrm-addon-for-blender.info/releases/VRM_Addon_for_Blender-release.zip)**<small> / [過去のバージョン一覧](https://github.com/saturday06/VRM-Addon-for-Blender/releases)</small>
 
@@ -24,11 +24,11 @@ VRM Add-on for BlenderはBlenderにVRMのインポート、エクスポートや
 
 | [アドオンのインストール]({{< ref "installation" >}}) | [シンプルなVRMモデルを作る]({{< ref "create-simple-vrm-from-scratch" >}}) | [人型のVRMモデルを作る]({{< ref "create-humanoid-vrm-from-scratch" >}}) |
 | --- | --- | --- |
-| [![](../../images/installation.gif)]({{< ref "installation" >}}) | [![](../../images/simple.gif)]({{< ref "create-simple-vrm-from-scratch" >}}) | [![](../../images/humanoid.gif)]({{< ref "create-humanoid-vrm-from-scratch" >}}) |
+| [![](installation.gif)]({{< ref "installation" >}}) | [![](simple.gif)]({{< ref "create-simple-vrm-from-scratch" >}}) | [![](humanoid.gif)]({{< ref "create-humanoid-vrm-from-scratch" >}}) |
 
 | [物理ベースのマテリアル設定]({{< ref "material-pbr" >}}) | [アニメ風のマテリアル設定]({{< ref "material-mtoon" >}}) | |
 | --- | --- | --- |
-| [![](../../images/material_pbr.gif)]({{< ref "material-pbr" >}}) | [![](../../images/material_mtoon.gif)]({{< ref "material-mtoon" >}}) | ![](../../images/transparent.gif) |
+| [![](material_pbr.gif)]({{< ref "material-pbr" >}}) | [![](material_mtoon.gif)]({{< ref "material-mtoon" >}}) | ![](transparent.gif) |
 
 ## 概要
 

docs/website/content/create-humanoid-vrm-from-scratch.en.md → docs/website/content/create-humanoid-vrm-from-scratch/_index.en.md

@@ -1,109 +1,109 @@
 ---
 title: "Create Humanoid VRM"
 description: "We will create a simple Humanoid VRM model."
-images: ["images/humanoid.gif"]
+images: ["img/humanoid.gif"]
 ---
 
 We will create a simple Humanoid VRM model.
 
-![](../../images/humanoid.gif)
+![](humanoid.gif)
 
 After starting Blender, place the mouse cursor on the 3D Viewport and press the `n` key.
 
-![](../images/humanoid1.png)
+![](1.en.png)
 
 This will open a Sidebar from the right side. Select the `VRM` tab and click the `Create VRM Model` button.
 
-![](../images/humanoid2.png)
+![](2.en.png)
 
 Then an armature suitable for VRM output will be created automatically. An armature represents the bone structure of a 3D model.
 This add-on uses armature to represent the skeletal structure of the human figure in VRM.
 
-![](../images/humanoid3.png)
+![](3.en.png)
 
 We will use the default Cube as a torso.
 
-Select the Cube in the 3D Viewport, select the tab with the "<img src="../../images/object_property_tab_icon.png">" icon in the lower right corner, go to `Transform` > `Scale`, and set all values to `0.2` to make it small enough to be used as a torso.
+Select the Cube in the 3D Viewport, select the tab with the "![](object_property_tab_icon.png)" icon in the lower right corner, go to `Transform` > `Scale`, and set all values to `0.2` to make it small enough to be used as a torso.
 
-![](../images/humanoid4.png)
+![](4.en.png)
 
 We associate the torso with the bones of the armature. Go to `Relations`, and set `Parent` to `Armature`, `Parent Type` to `Bone`, and `Parent Bone` to `spine`. The torso will move to the spine of the 3D model.
 
-![](../images/humanoid5.png)
+![](5.en.png)
 
 The next step is to create the head, press `Shift + a` in the 3D viewport to bring up an additional menu, select `Mesh` -> `UV Sphere`.
 
-![](../images/humanoid6.png)
+![](6.en.png)
 
 A `Sphere` will be added.
 
-![](../images/humanoid7.png)
+![](7.en.png)
 
 It is too big so we will shrink it.
 
-Select the tab with the "<img src="../../images/object_property_tab_icon.png">" icon in the lower right corner, go to `Transform` > `Scale`, and set all values to `0.25`.
+Select the tab with the "![](object_property_tab_icon.png)" icon in the lower right corner, go to `Transform` > `Scale`, and set all values to `0.25`.
 
-![](../images/humanoid8.png)
+![](8.en.png)
 
 Associate this sphere with the armature's bone. Go to `Relations`, and set `Parent` to `Armature`, `Parent Type` to `Bone`, and `Parent Bone` to `head`. The sphere will move to the head of the 3D model.
 
-![](../images/humanoid9.png)
+![](9.en.png)
 
 Next, we will add the limbs: in the 3D viewport, press `Shift + a` to bring up the Add menu, and select `Mesh` -> `Ico Sphere`.
 
-![](../images/humanoid10.png)
+![](10.en.png)
 
 The `Icosphere` will be added, and at the same time, you will see `> Add Ico Sphere` in the lower-left corner of the 3D viewport. Click on this message.
 
-![](../images/humanoid11.png)
+![](11.en.png)
 
 You can then set up the new Ico Sphere to be added. We feel that the radius is too large so we will change the radius value to `0.1 m`.
 
-![](../images/humanoid12.png)
+![](12.en.png)
 
-Select the tab with the "<img src="../../images/object_property_tab_icon.png">" icon in the lower right corner, go to `Relations`, set `Parent` to `Armature`, set `Parent Type` to `Bone`, and set `Parent Bone` to `upper_arm.L`. The sphere will move to the left upper arm of the 3D model.
+Select the tab with the "![](object_property_tab_icon.png)" icon in the lower right corner, go to `Relations`, set `Parent` to `Armature`, set `Parent Type` to `Bone`, and set `Parent Bone` to `upper_arm.L`. The sphere will move to the left upper arm of the 3D model.
 
-![](../images/humanoid13.png)
+![](13.en.png)
 
 Add the Ico sphere as before, and now associate it with the `hand.L` bone. The Ico sphere will move to the left hand.
 
-![](../images/humanoid14.png)
+![](14.en.png)
 
 Similarly, we will associate it with the `upper_arm.R` bone.
 
-![](../images/humanoid15.png)
+![](15.en.png)
 
 Associate with the `hand.R` bone.
 
-![](../images/humanoid16.png)
+![](16.en.png)
 
 Associate with the `upper_leg.L` bone.
 
-![](../images/humanoid17.png)
+![](17.en.png)
 
 Associate with the `lower_leg.L` bone.
 
-![](../images/humanoid18.png)
+![](18.en.png)
 
 Associate with the `upper_leg.R` bone.
 
-![](../images/humanoid19.png)
+![](19.en.png)
 
 Finally, associate it with the `lower_leg.R` bone.
 
-![](../images/humanoid20.png)
+![](20.en.png)
 
 Save this model as a VRM. Select `File` → `Export` → `VRM (.vrm)` from the menu.
 
-![](../images/simple2.png)
+![](21.en.png)
 
 Enter the filename and destination when the File View window appears and press `Export VRM`.
 
-![](../images/humanoid21.png)
+![](22.en.png)
 
 If successful, the VRM file will be saved to the specified location.
 
-![](../../images/humanoid.gif)
+![](humanoid.gif)
 
 You can check the operation on this page.
 

docs/website/content/create-humanoid-vrm-from-scratch.ja.md → docs/website/content/create-humanoid-vrm-from-scratch/_index.ja.md

@@ -1,107 +1,107 @@
 ---
 title: "人型のVRMモデルを作る"
 description: "シンプルな人型のVRMモデルを作ります。"
-images: ["images/humanoid.gif"]
+images: ["img/humanoid.gif"]
 ---
 
 シンプルな人型のVRMモデルを作ります。
 
-![](../../images/humanoid.gif)
+![](humanoid.gif)
 
 Blenderを起動したら、3Dビューポートにマウスカーソルを置き、 `n` キーを押してください。
 
-![](../images/humanoid1.png)
+![](1.ja.png)
 
 すると右側からサイドバーが開くので `VRM` のタブを選択し `VRMモデルを作成` ボタンを押してください。
 
-![](../images/humanoid2.png)
+![](2.ja.png)
 
 するとVRM出力に適したアーマチュアが自動で作られます。アーマチュアとは3Dモデルのボーンの構造を
 表すデータで、このアドオンではVRMの人型の骨格を表すためにアーマチュアを使います。
 
-![](../images/humanoid3.png)
+![](3.ja.png)
 
 デフォルトで置いてある立方体を胴体にします。ただこのままでは胴体とするには大きすぎるので小さくします。
-まずは3Dビューポートで立方体を選択します。次に右下の「<img src="../../images/object_property_tab_icon.png">」アイコンのタブを選び
+まずは3Dビューポートで立方体を選択します。次に右下の「![](object_property_tab_icon.png)」アイコンのタブを選び
 `トランスフォーム` から `スケール` の値を全て `0.2` にします。これで胴体として使えそうな大きさになります。
 
-![](../images/humanoid4.png)
+![](4.ja.png)
 
 胴体をアーマチュアのボーンに関連付けます。`関係` から `ペアレント` を `アーマチュア` または `Armature` にし、 `親タイプ` を`ボーン` とし、`親ボーン` を `spine` に設定してください。胴体が3Dモデルの腰あたりに移動します。
 
-![](../images/humanoid5.png)
+![](5.ja.png)
 
 次は頭を作ります。3Dビューポート内にカーソルを置いた状態で、キーボードの `Shift` キーを押したまま `a` キーを押してください。するとオブジェクトの追加メニューが表示されるため `メッシュ` → `UV球` を選択してください。
 
-![](../images/humanoid6.png)
+![](6.ja.png)
 
 `球` あるいは `Sphere` が追加されます。
 
-![](../images/humanoid7.png)
+![](7.ja.png)
 
-これを頭として使いたいのですが、大きすぎるので縮小します。追加された球を選択し、右下の「<img src="../../images/object_property_tab_icon.png">」アイコンのタブを選び`トランスフォーム` から `スケール` の値を全て `0.25` にします。
+これを頭として使いたいのですが、大きすぎるので縮小します。追加された球を選択し、右下の「![](object_property_tab_icon.png)」アイコンのタブを選び`トランスフォーム` から `スケール` の値を全て `0.25` にします。
 
-![](../images/humanoid8.png)
+![](8.ja.png)
 
 この球をアーマチュアのボーンに関連付けます。`関係` から `ペアレント` を `アーマチュア` または `Armature` にし、 `親タイプ` を`ボーン` とし、 `親ボーン` を `head` に設定してください。球が3Dモデルの頭あたりに移動します。
 
-![](../images/humanoid9.png)
+![](9.ja.png)
 
 次は手足を追加します。3Dビューポート内にカーソルを置いた状態で、キーボードの `Shift` キーを押したまま `a` キーを押してください。するとオブジェクトの追加メニューが表示されるため `メッシュ` → `ICO球` を選択してください。
 
-![](../images/humanoid10.png)
+![](10.ja.png)
 
 `ICO球` あるいは `Icosphere` が追加されますが、同時に3Dビューポート左下に `> ICO球を追加` という表示が出ます。こちらをクリックします。
 
-![](../images/humanoid11.png)
+![](11.ja.png)
 
 すると、新しく追加するICO球の設定をすることができます。半径が大きすぎると感じたので、半径の値を `0.1 m` に変更します。
 
-![](../images/humanoid12.png)
+![](12.ja.png)
 
-ICO球をアーマチュアの左手上腕のボーンに関連付けます。ICO球を選択し、右下の「<img src="../../images/object_property_tab_icon.png">」アイコンのタブを選び、 `関係` から `ペアレント` を `アーマチュア` または `Armature` にし、`親タイプ`を `ボーン` とし、`親ボーン` を `upper_arm.L` に設定してください。ICO球が3Dモデルの左ひじあたりに移動します。
+ICO球をアーマチュアの左手上腕のボーンに関連付けます。ICO球を選択し、右下の「![](object_property_tab_icon.png)」アイコンのタブを選び、 `関係` から `ペアレント` を `アーマチュア` または `Armature` にし、`親タイプ`を `ボーン` とし、`親ボーン` を `upper_arm.L` に設定してください。ICO球が3Dモデルの左ひじあたりに移動します。
 
-![](../images/humanoid13.png)
+![](13.ja.png)
 
 先ほどと同様にICO球を追加し、次は `hand.L` ボーンに関連付けます。左手あたりにICO球が配置されます。
 
-![](../images/humanoid14.png)
+![](14.ja.png)
 
 同様に、今度は `upper_arm.R` ボーンに関連付けます。
 
-![](../images/humanoid15.png)
+![](15.ja.png)
 
 同様に `hand.R` ボーンに関連付けます。
 
-![](../images/humanoid16.png)
+![](16.ja.png)
 
 同様に `upper_leg.L` ボーンに関連付けます。
 
-![](../images/humanoid17.png)
+![](17.ja.png)
 
 同様に `lower_leg.L` ボーンに関連付けます。
 
-![](../images/humanoid18.png)
+![](18.ja.png)
 
 同様に `upper_leg.R` ボーンに関連付けます。
 
-![](../images/humanoid19.png)
+![](19.ja.png)
 
 最後に `lower_leg.R` ボーンに関連付けます。
 
-![](../images/humanoid20.png)
+![](20.ja.png)
 
 このモデルをVRMとして保存します。メニューの `ファイル` → `エクスポート` → `VRM (.vrm)` を選択します。
 
-![](../images/simple2.png)
+![](21.ja.png)
 
 ファイル保存用のウィンドウが出るので、ファイル名と保存先を入力し `Export VRM` を押します。
 
-![](../images/humanoid21.png)
+![](22.ja.png)
 
 成功するとVRMファイルが指定された場所に保存されます。
 
-![](../../images/humanoid.gif)
+![](humanoid.gif)
 
 こちらのページで動作確認ができます。