gatsby-starter-figure-blog demo

画像比較スライダーテスト

  1. 🏷️
  2. 日本語
  3. プログラミング
  4. Gatsby
  5. Markdown
  6. react-compare-slider
美遊、イリヤ、クロエ

画像比較スライダーテスト記事。

react-compare-slider によって実現しています。

変換するパターン

![Focus on Miyu](./images/compare-left.jpg "left")
![Focus on Chloe](./images/compare-right.jpg "right")
Focus on Chloe
Focus on Miyu
![Focus on Chloe](./images/compare-right.jpg "right")
![Focus on Miyu](./images/compare-left.jpg "left")
Focus on Chloe
Focus on Miyu
ABC.
ABC.
![Focus on Miyu](./images/compare-left.jpg "left")
![Focus on Chloe](./images/compare-right.jpg "right")
ABC. ABC.
Focus on Chloe
Focus on Miyu
![Focus on Miyu](./images/compare-left.jpg "left")
DEF.
DEF.
![Focus on Chloe](./images/compare-right.jpg "right")
Focus on Chloe
Focus on Miyu
![Focus on Miyu](./images/compare-left.jpg "left")
![Focus on Chloe](./images/compare-right.jpg "right")
GHI.
GHI.
Focus on Chloe
Focus on Miyu
GHI. GHI.
ABC.
ABC.
![Focus on Miyu](./images/compare-left.jpg "left")
DEF.
DEF.
![Focus on Chloe](./images/compare-right.jpg "right")
GHI.
GHI.
ABC. ABC.
Focus on Chloe
Focus on Miyu
GHI. GHI.
ABC.
`code`
ABC.
![Focus on Miyu](./images/compare-left.jpg "left")
DEF.
`code`
DEF.
![Focus on Chloe](./images/compare-right.jpg "right")
GHI.
`code`
GHI.
ABC. code ABC.
Focus on Chloe
Focus on Miyu
GHI. code GHI.
![Focus on Miyu](./images/compare-left.jpg "left: ABC")
![Focus on Chloe](./images/compare-right.jpg "right: DEF")
Focus on Chloe
Focus on Miyu
![Focus on Miyu](./images/compare-left.jpg "left")
![Focus on Miyu](./images/compare-left.jpg "left")
![Focus on Chloe](./images/compare-right.jpg "right")
Focus on Chloe
Focus on Miyu
![Focus on Miyu](./images/compare-left.jpg "left")
![Focus on Chloe](./images/compare-right.jpg "right")
![Focus on Miyu](./images/compare-left.jpg "left")
Focus on Chloe
Focus on Miyu

変換しないパターン

![Focus on Miyu](./images/compare-left.jpg)
![Focus on Chloe](./images/compare-right.jpg)

Focus on Miyu Focus on Chloe 

- ![Focus on Miyu](./images/compare-left.jpg "left")
- ![Focus on Chloe](./images/compare-right.jpg "right")
![Focus on Miyu](./images/compare-left.jpg "left")
![Focus on Chloe](./images/compare-right.jpg "left")

Focus on Miyu Focus on Chloe 

![Focus on Miyu](./images/compare-left.jpg "right")
![Focus on Chloe](./images/compare-right.jpg "right")

Focus on Miyu Focus on Chloe 

![Focus on Miyu](./images/compare-left.jpg "left")
![Focus on Chloe](./images/compare-right.jpg "left")

Focus on Miyu Focus on Chloe

縦長画像チェック

ABC.
ABC.
![sample1](./images/P6050098.jpg "left")
DEF.
DEF.
![sample2](./images/sample-portrait.jpg "right")
GHI.
GHI.
ABC. ABC.
sample2
sample1
GHI. GHI.
Bio
Bio icon

tenpaMk2

🇯🇵インドアクソオタク。

Tag cloud
  1. Doll
  2. English
  3. Figure
  4. Gatsby
  5. isNSFW
  6. Markdown
  7. Programming
  8. react-compare-slider
  9. Twitter
  10. YouTube
  11. ドール
  12. フィギュア
  13. プログラミング
  14. 日本語
Archive list

  1. 2023年

    22

    1. 4月

      22

  2. 2022年

    6

    1. 12月

      4

    2. 4月

      2

External links
  1. tenpaMk2's blog
  2. Asahiwa.jp(よつばとフィギュア)
  3. ふぃぎゅる！
  4. fig-memo
  5. Analographicsworks
  6. 雪の降る空に
  7. mattintosh note
  8. affilabo.com
  9. QP's blog
  10. F9のフィギュア棚
  11. 葵的 美少女フィギュアの世界
  12. よよのデジタルショーケース
  13. an-gallery
  14. フィギュアレン
  15. FREETIME