初めてのGutenberg 使ってみた！

#1 WP ZoomUPでお話したGuterbergの基礎のお話です。

https://wpzoom.connpass.com/event/100153/

Transcript

1. ॳΊͯͷ(VUFOCFSH
   ࢖ͬͯΈͨʂ
   ଜ্௚ࢠ
   81;PPN61ɹ
   

   View Slide

2. (VUFOCFSH άʔςϯϕϧΫ
   
   ϛχηγϣϯ
   ॳΊͯͷํʹ͸
   ΩιͷΩι
   طʹ͝ଘ஌ͷํʹ͸
   ෮श
   

   View Slide

3. ΞδΣϯμ
   (VUFOCFSH׏ג⡦رٌ
   ⢪׏ג׫׋䠬䟝
   ⢪ְ倯ךֶׁ׵ְ
   

   View Slide

4. ΞδΣϯμ
   (VUFOCFSH׏ג⡦
   ⢪׏ג׫׋䠬䟝
   ⢪ְ倯ךֶׁ׵ְ
   (VUFOCFSH׏ג⡦رٌ
   

   View Slide

5. (VUFOCFSHͱ͸
   8PSE1SFTTך
   倜׃ְؒر؍ة٦
   7FSחז׏׋׵垥彊䵧鯹✮㹀
   ˟植㖈
   խ8PSE1SFTTכ7FS
   

   View Slide

6. 8PSE1SFTTͷ
   ΤσΟλʔ͸
   

   View Slide

7. ࠓ·Ͱ
   

   View Slide

8. ೥͘Β͍΄΅ಉ͡ܗͩͬͨ
   

   View Slide

9. ΋ͬͱ࣌୅ʹଈͨ͠
   ΤσΟλʔͷܗ͕
   ͋ΔͷͰ͸ʁ
   ௚ײతʹ࢖͑Δ
   ͱ͍͏͜ͱͰ
   

   View Slide

10. ϒϩοΫ
    
    ֦ுੑͷ͋Δฤू
    ͕Ͱ͖ΔΑ͏ʹ͠Α͏ʂ
    ͱݺ͹ΕΔ͔ͨ·ΓΛجຊʹͯ͠
    

    View Slide

11. ࢝·ͬͨͷ͕
    (VUFOCFSHͷ։ൃʂ
    

    View Slide

12. ೖྗͷײ͕͡
    ࣅ͍ͯΔαʔϏε
    

    View Slide

13. %SPQCPY1BQFS .FEJVN /PUF
    

    View Slide

14. (VUFOCFSHͷฤूը໘
    

    View Slide

15. (VUFOCFSHͷฤूը໘
    

    View Slide

16. (VUFOCFSHͷฤूը໘
    歗⫷
    鋅⳿׃
    俑畍
    نةٝ
    ׉ך➭ְ׹ְ׹
    ԼʹͲΜͲΜʰϒϩοΫʱͱݺ͹ΕΔɺίϯςϯπΛͷ͔ͨ·ΓΛ௥Ճ͍͖ͯ͠·͢ɻ
    

    View Slide

17. Πϝʔδͱͯ͠͸
    

    View Slide

18. 81;PPN61פ״ֲֿ׉
    鎸䙀ׅץֹ痥♧㔐ח׀⿫⸇ְ׋׌ֹծ
    ֮׶ָהֲ׀ְׂתׅ
    Ϙλϯ
    81;PPN61
    ͜ΜͳϖʔδΛ࡞Γ͍ͨͱ͖
    

    View Slide

19. 8FCل٦آ
    ·ͬ͞Βͳϖʔδʹ
    

    View Slide

20. 81;PPN61 歗⫷
    ը૾ϒϩοΫʢ͜͜Ͱ͸Χόʔը૾ϒϩοΫʣ
    

    View Slide

21. 81;PPN61פ״ֲֿ׉
    81;PPN61
    鋅⳿׃
    ݟग़͠ϒϩοΫ
    

    View Slide

22. 81;PPN61פ״ֲֿ׉
    鎸䙀ׅץֹ痥♧㔐ח׀⿫⸇ְ׋׌ֹծ
    ֮׶ָהֲ׀ְׂתׅ
    81;PPN61
    俑畍媮衅
    ஈམϒϩοΫ
    

    View Slide

23. 81;PPN61פ״ֲֿ׉
    鎸䙀ׅץֹ痥♧㔐ח׀⿫⸇ְ׋׌ֹծ
    ֮׶ָהֲ׀ְׂתׅ
    Ϙλϯ
    81;PPN61
    نةٝ
    ϘλϯϒϩοΫ
    

    View Slide

24. 81;PPN61פ״ֲֿ׉
    鎸䙀ׅץֹ痥♧㔐ח׀⿫⸇ְ׋׌ֹծ
    ֮׶ָהֲ׀ְׂתׅ
    Ϙλϯ
    81;PPN61 歗⫷
    鋅⳿׃
    نةٝ
    ϒϩοΫΛ௥Ճͯ͠΢ΣϒϖʔδΛ࡞Δ
    俑畍媮衅
    

    View Slide

25. %FNP
    

    View Slide

26. (VUFOCFSH
    Ӷҙ
    ։ൃத
    

    View Slide

27. Ͳ͏΍ͬͨΒ
    (VUFOCFSHΛࢼͤΔͷʁ
    

    View Slide

28. ํ๏͸
    ̎ͭ
    

    View Slide

29. IUUQTKBXPSEQSFTTPSHHVUFOCFSH
    ɹɹମݧϖʔδͰೖྗͯ͠ΈΔ
    
    

    View Slide

30. ϓϥάΠϯΛΠϯετʔϧ
    IUUQTKBXPSEQSFTTPSHQMVHJOTHVUFOCFSH
    
    

    View Slide

31. (VUFOCFSHΛࢼ͢ͷʹ
    Φεεϝͷ
    ςʔϚ
    

    View Slide

32. IUUQTHJUIVCDPNPOPDPNHVUFOCFSHDIBMMFOHF
    ʰ(VUFOCFSH$IBMMFOHFʱ
    ʰ(VUFOCFSHͰ࡞ΔϥϯσΟϯάϖʔδʱ
    8PSE$BNQ0TBLB
    খ໺ོ࢜
    ͞Μ
    

    View Slide

33. IUUQTTOPXNPOLFZJODPSH
    ʰ4OPX.POLFZʱ
    

    View Slide

34. ͥͻࢼͯ͠Έͯ
    ͍ͩ͘͞
    ·ͩ࢖ͬͨ͜ͱͳ͍Α
    ͱ͍͏ํ͸
    

    View Slide

35. ΞδΣϯμ
    ⢪ְ倯ךֶׁ׵ְ
    (VUFOCFSH׏ג⡦رٌ
    ⢪׏ג׫׋䠬䟝
    

    View Slide

36. ࢖ͬͯΈͨײ૝
    ྑͦ͞͏
    ͳΜ͔
    

    View Slide

37. ࢖ͬͯΈͨײ૝
    Ұ൪࠷ॳʹݟͨͱ͖͸ೖྗը໘͕ਅͬനա͗ͯͲ͏͠Α͏͔ͱࢥͬͨ
    

    View Slide

38. ࢖ͬͯΈͨײ૝
    Α͘ݟͯΈΔͱ
    

    View Slide

39. ࢖ͬͯΈͨײ૝
    ʰλΠτϧΛ௥Ճʱͷཝ͕͋Γ
    

    View Slide

40. ࢖ͬͯΈͨײ૝
    λΠτϧΛೖྗ͢ΔͱύʔϚϦϯΫͷมߋཝ͕ग़͖ͯͨΓ
    λΠϜϥά͋Δ͔ΒؾΛ͚ͭͯʂʂʂ
    

    View Slide

41. ࢖ͬͯΈͨײ૝
    Լʹ͸࣍ʹԿΛ͢΂͖͔ͷࢦ͕ࣔग़͖ͯ·͢
    

    View Slide

42. ࢖ͬͯΈͨײ૝
    (VUFOCFSH͸ඞཁͳ͍΋ͷ͸Ӆ͠
    ඞཁͳ΋ͷ͸ඞཁͳ࣌ʹग़͢
    

    View Slide

43. ࢖ͬͯΈͨײ૝
    )5.-΍ಛผͳϓϩάϥϛϯάͷ஌͕ࣝͳͯ͘΋
    ϘλϯΛ͚ͭͨΓը໘Λ෼ׂͰ͖ΔͳͲɺ
    ΍Γ͍ͨ͜ͱ͕Ͱ͖Δ
    

    View Slide

44. ΞδΣϯμ
    (VUFOCFSH׏ג⡦
    رٌ⢪׏ג׫׋䠬䟝
    ⢪ְ倯ךֶׁ׵ְ
    

    View Slide

45. ΞδΣϯμ
    (VUFOCFSH׏ג⡦
    رٌ⢪׏ג׫׋䠬䟝
    ⢪ְ倯ךֶׁ׵ְ
    ⢪ְ倯ךֶׁ׵ְ
    

    View Slide

46. ࢖͍ํͷ͓͞Β͍
    歗⫷
    鋅⳿׃
    俑畍
    نةٝ
    ׉ך➭ְ׹ְ׹
    

    View Slide

47. จষΛೖΕ͍ͨ৔߹
    

    View Slide

48. จষΛೖΕ͍ͨ৔߹
    ͦͷ··ςΩετΛଧͭ
    ςΩετͷೖྗΛͯ͠Έ·͢Αɻ
    

    View Slide

49. จষҎ֎Λ
    ೖΕ͍ͨ৔߹
    ը૾ ݟग़͠ Ϙλϯ
    

    View Slide

50. ํ๏͸
    ̎ͭ
    

    View Slide

51. 
    ϘλϯΛԡͯ͠
    ϒϩοΫͷछྨΛબΜͰ
    ௥Ճ͢Δ
    

    View Slide

52. 
    εΫϩʔϧͨ͠Β
    ͍ͬͺ͍ग़ͯ͘Δ
    

    View Slide

53. 
    ʮʯʮʢϒϩοΫछྨʣʯ
    ͱೖྗͯ͠ɺ
    ໨తͷϒϩοΫछྨΛݺͼग़ͯ͠બͿ
    

    View Slide

54. ϒϩοΫछྨͷҰཡ͕දࣔ͞ΕΔ
    

    View Slide

55. ϒϩοΫͷछྨΛߜΓࠐΉ͜ͱ͕Ͱ͖Δ
    

    View Slide

56. ৄࡉઃఆ͍ͨ͠ͱ͖
    

    View Slide

57. จষશମͷઃఆΛ͍ͨ͠ͱ͖
    

    View Slide

58. (VUFOCFSHϛχηογϣϯ͸Ҏ্Ͱ͢
    

    View Slide

59. (VUFOCFSHʹ͍ͭͯͷ
    2"
    ࣭໰͕͋Δํ͸͍Ζ͍Ζฉ͍ͯΈ͍ͯͩ͘͞
    ίʔφʔ
    ࣍͸
    

    View Slide

60. WordCamp Miami 2018
    GUTENPUU
    ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide