カスタムブロック作成手順のベタープラクティス

2021年11月13日（土）にオンライン開催されたMTDDC Meetup TOKYO 2021のセッションで使用したスライドです。

1. Hello! ΧελϜϒϩοΫ࡞੒खॱͷ
   ϕλʔϓϥΫςΟε MTDDC Meetup TOKYO 2021
2. #mtddc ࡾ౓ͷ൧ΑΓ৯΂Δ͜ͱɺ
   ͦͯ͠ҿΉ͜ͱ͕޷͖ גࣜձࣾδϟΫελϙδγϣϯɹ୅දऔక໾ʗσΟϨΫλʔ
   ೥݄૑ۀɺ೥݄๏ਓԽʢ๏ਓظ໨ʣ .PWBCMF
   5ZQFΛϓϥοτϑΥʔϜʹ΢ΣϒαΠτΛߏங
   ೥ɹ1SP/FUʢγοΫεɾΞύʔτࣾύʔτφʔʣՃໍ
   ೥ɹ.5՜ҔΛελʔτ
   ೥ɹ.5%%$
   .FFUVQ
   )0,,"*%0
   ։࠵
   ೥ɹ.5%%$
   .FFUVQ
   )0,,"*%0
   ։࠵ ੢ࢁɹହ࢙
   ʢʹ͠΍·ɹ΍͢;Έʣ
3. #mtddc σΟϨΫλʔɹ໊
   σβΠφʔɹ໊
   .5ςϯϓϨʔτΤϯδχΞɹ໊ ओͳۀ຿
   ɾ΢ΣϒαΠτߏங
   ɾ΢ΣϒίϯαϧςΟϯά
   ɾࣗࣾ։ൃ੡඼ൢച
   ɾ΢ΣϒγεςϜ։ൃ
   ɾҹ࡮෺σβΠϯ
4. #mtddc ࣗࣾϓϩμΫτ
   4,&-&50/
   $"35
   ͷ։ൃɾൢച .5Ϋϥ΢υରԠʂ
5. #mtddc %ZOBNJD1SFWJFX *NBHF6QMPBE6UJMJUZ .PWBCMF
   5ZQF
   ༻ϓϥάΠϯͷ։ൃɾൢച
6. #mtddc %BTICPBSE6UJMJUZ
   GPS
   NPWBCMFUZQFOFU
7. #mtddc ຊ೔ͷΞδΣϯμ
8. #mtddc  ϒϩοΫΤσΟλͱΧελϜϒϩοΫ
    σϑΥϧτϒϩοΫͷ)5.-ʹ͋ΘͤΔ͔ 
 σβΠϯ͞Εͨ)5.-ʹ͋ΘͤΔ͔
    ΧελϜεΫϦϓτͱNU#MPDL&EJUPS#MPDLT
    ΧελϜεΫϦϓτΛར༻ͨ͠ 
 ΧελϜϒϩοΫ࡞੒खॱ
    ӡ༻͠΍͍͢ϒϩοΫΤσΟλ
9. #mtddc ϒϩοΫΤσΟλͱΧελϜϒϩοΫ
10. #mtddc ϒϩοΫΤσΟλͰར༻Ͱ͖ΔϒϩοΫ ϓϦηοτ͞Ε͍ͯΔ΋ͷ
    ʢσϑΥϧτϒϩοΫʣ ςΩετϒϩοΫ
    ը૾
    ϑΝΠϧ
    )5.- P&NCFE
    ܩઢ
    ςʔϒϧ
    ϚϧνΧϥϜ ΦϦδφϧͰ৽͘͠࡞Δ΋ͷ
    ʢΧελϜϒϩοΫʣ ΧελϜεΫϦϓτ NU#MPDL&EJUPS#MPDLT
11. #mtddc σϑΥϧτϒϩοΫͷ)5.-ʹ͋ΘͤΔ͔ 
 σβΠϯ͞Εͨ)5.-ʹ͋ΘͤΔ͔
12. #mtddc σϑΥϧτϒϩοΫʢྫɿϚϧνΧϥϜʣΛར༻͢Δ <div class="mt-be-columns" style="display: fl ex" > <div class="mt-be-column" > <h2>ޗഐ͸ೣͰ͋Δ</h2 > <p>ޗഐ͸ೣͰ͋Δɻ໊લ͸·ͩແ͍ɻͲ͜Ͱɾɾɾɹ</p> </div > <div class="mt-be-column" > <p > <img src="https://example.movabletype.io/.assets/cat.jpg " alt="͵͜͞· " width="640 " height="640 " class="asset asset-image " style="max-width:100%;height:auto;display:block" > </p > </div > </div> )5.-ߏ଄ΛมߋͰ͖ͳ͍ͨΊɺ
    ͜ͷ)5.-ʹ͋ΘͤͯελΠϧʢσβΠϯʣΛ༻ҙ͢Δ
13. #mtddc ΧελϜϒϩοΫΛ࢖͍ͨ͘ͳΔ <div class="mt-be-columns" style="display: fl ex" > <div class="mt-be-column" > <h2>ޗഐ͸ೣͰ͋Δ</h2 > <p>ޗഐ͸ೣͰ͋Δɻ໊લ͸·ͩແ͍ɻͲ͜Ͱɾɾɾɹ</p> </div > <div class="mt-be-column" > <p > <img src="https://example.movabletype.io/.assets/cat.jpg " alt="͵͜͞· " width="640 " height="640 " class="asset asset-image " style="max-width:100%;height:auto;display:block" > </p > </div > </div> ผͷDMBTTΛೖΕ͍ͨ TUZMFଐੑ͸ආ͚͍ͨ IʹDMBTTΛ௥Ճ͍ͨ͠ ೖΕࢠͷEJWΛ௥Ճ͍ͨ͠ σβΠϯ͞Εͨ)5.-Λ४උ͠ɺ
    ͦΕʹ͋Θͤͨ)5.-ߏ଄Λ࡞Δ
14. #mtddc ϒϩοΫΤσΟλͰར༻Ͱ͖ΔϒϩοΫ ϓϦηοτ͞Ε͍ͯΔ΋ͷ
    ʢσϑΥϧτϒϩοΫʣ ςΩετϒϩοΫ
    ը૾
    ϑΝΠϧ
    )5.- P&NCFE
    ܩઢ
    ςʔϒϧ
    ϚϧνΧϥϜ ΦϦδφϧͰ৽͘͠࡞Δ΋ͷ
    ʢΧελϜϒϩοΫʣ ΧελϜεΫϦϓτ NU#MPDL&EJUPS#MPDLT ࠓ೔ɺ͓࿩͢Δ෦෼
15. #mtddc ΧελϜεΫϦϓτͱ NU#MPDL&EJUPS#MPDLT
16. #mtddc ϒϩοΫΤσΟλͰར༻Ͱ͖ΔϒϩοΫ ϓϦηοτ͞Ε͍ͯΔ΋ͷ
    ʢσϑΥϧτϒϩοΫʣ ςΩετϒϩοΫ
    ը૾
    ϑΝΠϧ
    )5.- P&NCFE
    ܩઢ
    ςʔϒϧ
    ϚϧνΧϥϜ ΦϦδφϧͰ৽͘͠࡞Δ΋ͷ
    ʢΧελϜϒϩοΫʣ ΧελϜεΫϦϓτ NU#MPDL&EJUPS#MPDLT
17. #mtddc ΧελϜεΫϦϓτ NU#MPDL&EJUPS#MPDLT ‣ +BWB4DSJQUͰෳࡶͳՃ޻Λߦ͏͜ͱ͕Ͱ͖Δ
    ‣ ฤूը໘Ͱ΋ग़ྗͱಉ݁͡ՌΛදࣔ͢Δ͜ͱ͕Ͱ͖Δ
    ‣ ΧελϜεΫϦϓτΛมߋͯ͠΋ग़ྗͨ͠಺༰͸มߋ͞Εͳ͍ ‣ .5λάΛ૊Έ߹ΘͤͨΧελϚΠζΛߦ͏͜ͱ͕Ͱ͖Δ
    ‣ ͭͷιʔε͔Βɺෳ਺ͷग़ྗΛಘΔ͜ͱ͕Ͱ͖Δ
    ‣ .5.-ͷมߋͰޙ͔Βग़ྗͨ͠಺༰ΛมߋͰ͖Δ
18. #mtddc ΧελϜεΫϦϓτ NU#MPDL&EJUPS#MPDLT ‣ +BWB4DSJQUͰෳࡶͳՃ޻Λߦ͏͜ͱ͕Ͱ͖Δ
    ‣ ฤूը໘Ͱ΋ग़ྗͱಉ݁͡ՌΛදࣔ͢Δ͜ͱ͕Ͱ͖Δ
    ‣ ΧελϜεΫϦϓτΛมߋͯ͠΋ग़ྗͨ͠಺༰͸มߋ͞Εͳ͍ ‣ .5λάΛ૊Έ߹ΘͤͨΧελϚΠζΛߦ͏͜ͱ͕Ͱ͖Δ
    ‣ ͭͷιʔε͔Βɺෳ਺ͷग़ྗΛಘΔ͜ͱ͕Ͱ͖Δ
    ‣ .5.-ͷมߋͰޙ͔Βग़ྗͨ͠಺༰ΛมߋͰ͖Δ K2VFSZͰ΋0, ׬੒ޙ͕ΠϝʔδͰ͖Δ
19. #mtddc ϒϩοΫΤσΟλͰར༻Ͱ͖ΔϒϩοΫ ϓϦηοτ͞Ε͍ͯΔ΋ͷ
    ʢσϑΥϧτϒϩοΫʣ ςΩετϒϩοΫ
    ը૾
    ϑΝΠϧ
    )5.- P&NCFE
    ܩઢ
    ςʔϒϧ
    ϚϧνΧϥϜ ΦϦδφϧͰ৽͘͠࡞Δ΋ͷ
    ʢΧελϜϒϩοΫʣ ΧελϜεΫϦϓτ NU#MPDL&EJUPS#MPDLT ࠓ೔ɺ͓࿩͢Δ෦෼
20. #mtddc ΧελϜεΫϦϓτΛར༻ͨ͠ 
 ΧελϜϒϩοΫ࡞੒खॱ
21. #mtddc ΧελϜϒϩοΫͷ৽ن࡞੒ʢجຊʣ
22. #mtddc αϯϓϧʢ׬੒൛ʣ IUUQTXXXOJKQIJTUPSZPGNUEEDDPNQMFUFIUNM ࠓճ͸
    .PWBCMF5ZQFOFU
    Ͱ࡞੒͠·͢
23. #mtddc )5.-ΛϒϩοΫ୯Ґʹ෼͚Δ 01 STEP
24. #mtddc <div class="timeline"> <div class="block"> <div class="year">2010 </div> <div class="detail"> <dl class="group"> <dt class="month">11.06</dt> <dd class="description"> <a href="http://mtddc.d-s-b.jp/2010/">MTDDC Meetup FUKUSHIMA 2010</a> </dd> </dl> <div class="comment"> <p> Movable Type MTDDC Mee <div class="img-block left"> < fi gure class="img-block__img"> <img src="https://www.ni4.jp/demo_html/2010_fukushima.png" alt="" width="1 </ fi gure> <div class="img-block__text"> MTDDC Meetup FUKUSHIMA 2010 </div> </div> </div> </div> </div> <div class="block"> <div class="year">2011 </div> <div class="detail"> <dl class="group"> <dt class="month">04.16</dt> <dd class="description">MTDDC Meetup NAGOYA 2011</dd> <dt class="month">06.25</dt> <dd class="description"> <a href="https://www.movabletype.jp/blog/mtddc_meetup_tokyo_2011.html">M </dd> </dl>
25. #mtddc <div class="timeline"> <div class="block"> <div class="year">2010 </div> <div class="detail"> <dl class="group"> <dt class="month">11.06</dt> <dd class="description"> <a href="http://mtddc.d-s-b.jp/2010/">MTDDC Meetup FUKUSHIMA 2010</a> </dd> </dl> <div class="comment"> <p> Movable Type MTDDC Mee <div class="img-block left"> < fi gure class="img-block__img"> <img src="https://www.ni4.jp/demo_html/2010_fukushima.png" alt="" width="1 </ fi gure> <div class="img-block__text"> MTDDC Meetup FUKUSHIMA 2010 </div> </div> </div> </div> </div> <div class="block"> <div class="year">2011 </div> <div class="detail"> <dl class="group"> <dt class="month">04.16</dt> <dd class="description">MTDDC Meetup NAGOYA 2011</dd> <dt class="month">06.25</dt> <dd class="description"> <a href="https://www.movabletype.jp/blog/mtddc_meetup_tokyo_2011.html">M </dd> </dl>
26. #mtddc <div class="timeline"> <div class="block"> <div class="year">2010 </div> <div class="detail"> <dl class="group"> <dt class="month">11.06</dt> <dd class="description"> <a href="http://mtddc.d-s-b.jp/2010/">MTDDC Meetup FUKUSHIMA 2010</a> </dd> </dl> <div class="comment"> <p> Movable Type MTDDC Mee <div class="img-block left"> < fi gure class="img-block__img"> <img src="https://www.ni4.jp/demo_html/2010_fukushima.png" alt="" width="1 </ fi gure> <div class="img-block__text"> MTDDC Meetup FUKUSHIMA 2010 </div> </div> </div> </div> </div> <div class="block"> <div class="year">2011 </div> <div class="detail"> <dl class="group"> <dt class="month">04.16</dt> <dd class="description">MTDDC Meetup NAGOYA 2011</dd> <dt class="month">06.25</dt> <dd class="description"> <a href="https://www.movabletype.jp/blog/mtddc_meetup_tokyo_2011.html">M </dd> </dl> EJWCMPDL
27. #mtddc Πϕϯτ։࠵೔ͱͦͷ಺༰ ςΩετ ը૾ͱςΩετ ίϝϯτ Πϕϯτ։࠵೥ λΠϜϥΠϯશମ ࡞੒͢ΔϒϩοΫ
28. #mtddc Πϕϯτ։࠵೔ͱͦͷ಺༰ ςΩετ ը૾ͱςΩετ ίϝϯτ Πϕϯτ։࠵೥ λΠϜϥΠϯશମ ࡞੒͢ΔϒϩοΫ ಉ͡೥ͷผͷ೔ʹ
    Πϕϯτ͕։࠵͞Ε͍ͯΔ ը૾഑ஔ͕ύλʔϯ͋Δ
29. #mtddc ϒϩοΫ୯ҐͰΧελϜϒϩοΫΛ࡞Δ 02 STEP
30. #mtddc ಺ଆ͔Β࡞͍ͬͯ͘ Πϕϯτ։࠵೔ͱͦͷ಺༰ ςΩετ ը૾ͱςΩετ ίϝϯτ Πϕϯτ։࠵೥ λΠϜϥΠϯશମ
31. #mtddc <div class="timeline"> <div class="block"> <div class="year">2010 </div> <div class="detail"> <dl class="group"> <dt class="month">11.06</dt> <dd class="description"> <a href="http://mtddc.d-s-b.jp/2010/">MTDDC Meetup FUKUSHIMA 2010</a> </dd> </dl> <div class="comment"> <p> Movable Type MTDDC Mee <div class="img-block left"> < fi gure class="img-block__img"> <img src="https://www.ni4.jp/demo_html/2010_fukushima.png" alt="" width="1 </ fi gure> <div class="img-block__text"> MTDDC Meetup FUKUSHIMA 2010 </div> </div> ᶃ
    Πϕϯτ։࠵೔ͱͦͷ಺༰
32. #mtddc ᶃ
    Πϕϯτ։࠵೔ͱͦͷ಺༰
33. #mtddc ᶃ
    Πϕϯτ։࠵೔ͱͦͷ಺༰ ϒϩοΫɿ
    ςΩετ
    આ໌ɹɹɿ
    ։࠵೔
    Ϋϥε໊ɿ
    NPOUI ϙΠϯτ ςΩετͷϒϩοΫཁૉͷλά͸
    Q
    IʙI
    QSF
    ͔Βબ୒
34. #mtddc ᶃ
    Πϕϯτ։࠵೔ͱͦͷ಺༰ ϒϩοΫɿ
    ςΩετϒϩοΫ
    આ໌ɹɹɿ
    Ͱ͖͝ͱ
    Ϋϥε໊ɿ
    EFTDSJQUJPO ϙΠϯτ ςΩετϒϩοΫ͸
    ϒϩοΫཁૉ΍૷০Λ
    ೖྗ࣌ʹઃఆՄೳ
35. #mtddc ᶃ
    Πϕϯτ։࠵೔ͱͦͷ಺༰ ։࠵೔ͱͰ͖͝ͱɺ͋Γ·͢ʢݟ͑ͳ͍͚Ͳʣ
36. #mtddc <dl class="group"> <dt class="month">11.06</dt> <dd class="description"> <a href="http://mtddc.d-s-b.jp/2010/">MTDDC Meetup FUKUSHIMA 2010</a> </dd> </dl> <div class="comment"> <p> Movable Type MTDDC Mee <div class="img-block left"> < fi gure class="img-block__img"> <img src="https://www.ni4.jp/demo_html/2010_fukushima.png" alt="" width="1 </ fi gure> <div class="img-block__text"> MTDDC Meetup FUKUSHIMA 2010 </div> </div> </div> </div> </div> <div class="block"> <div class="year">2011 </div> <div class="detail"> <dl class="group"> <dt class="month">04.16</dt> ᶄ
    ίϝϯτ಺ͷςΩετͱը૾
37. #mtddc ᶄ
    ίϝϯτ಺ͷςΩετ ϒϩοΫɿ
    ςΩετϒϩοΫ
    આ໌ɹɹɿ
    ͳ͠
    Ϋϥε໊ɿ
    ͳ͠ ϙΠϯτ
38. #mtddc ᶄ
    ίϝϯτ಺ͷը૾ ϒϩοΫɿ
    υϩοϓμ΢ϯ
    આ໌ɹɹɿ
    ը૾ͷ഑ஔ
    Ϋϥε໊ɿ
    QPTJUJPO
    Φϓγϣϯɿ
    OPOF
    SJHIU
    MFGU ϙΠϯτ
39. #mtddc ᶅ
    ίϝϯτ಺ͷը૾ ϒϩοΫɿ
    υϩοϓμ΢ϯ
    આ໌ɹɹɿ
    ը૾ͷ഑ஔ
    Ϋϥε໊ɿ
    QPTJUJPO ϙΠϯτ
40. #mtddc ᶄ
    ίϝϯτ಺ͷը૾ ϒϩοΫɿ
    ը૾
    આ໌ɹɹɿ
    ͳ͠
    Ϋϥε໊ɿ
    JNHCMPDL@@JNH ϙΠϯτ
41. #mtddc ᶄ
    ίϝϯτ಺ͷը૾ ϒϩοΫɿ
    ςΩετϒϩοΫ
    આ໌ɹɹɿ
    ͳ͠
    Ϋϥε໊ɿ
    JNHCMPDL@@UFYU ϙΠϯτ
42. #mtddc ᶄ
    ίϝϯτ಺ͷը૾ ίϯςφཁૉͰแΉɿ
    0/
    Ϋϥε໊ɿ
    JNHCMPDL ϙΠϯτ <div class="img-block left"> < fi gure class="img-block__img"> <img src="https://www.ni4.jp/demo_html/ </ fi gure> <div class="img-block__text"> MTDDC Meetup FUKUSHIMA 2010 </div> </div>
43. #mtddc <dl class="group"> <dt class="month">11.06</dt> <dd class="description"> <a href="http://mtddc.d-s-b.jp/2010/">MTDDC Meetup FUKUSHIMA 2010</a> </dd> </dl> <div class="comment"> <p> Movable Type MTDDC Mee <div class="img-block left"> < fi gure class="img-block__img"> <img src="https://www.ni4.jp/demo_html/2010_fukushima.png" alt="" width="1 </ fi gure> <div class="img-block__text"> MTDDC Meetup FUKUSHIMA 2010 </div> </div> </div> </div> </div> <div class="block"> <div class="year">2011 </div> <div class="detail"> <dl class="group"> <dt class="month">04.16</dt> ᶅ
    ίϝϯτ
44. #mtddc ᶅ
    ίϝϯτ ίϯςφཁૉͰแΉɿ
    0/
    Ϋϥε໊ɿ
    DPNNFOU
    ϒϩοΫͷ௥Ճͱ࡟আɿ
    0/ ϙΠϯτ ௥ՃՄೳͳϒϩοΫ
    ɾςΩετ
    ɾը૾
45. #mtddc <div class="timeline"> <div class="block"> <div class="year">2010 </div> <div class="detail"> <dl class="group"> <dt class="month">11.06</dt> <dd class="description"> <a href="http://mtddc.d-s-b.jp/2010/">MTDDC Meetup FUKUSHIMA 2010</a> </dd> </dl> <div class="comment"> <p> Movable Type MTDDC Mee <div class="img-block left"> < fi gure class="img-block__img"> <img src="https://www.ni4.jp/demo_html/2010_fukushima.png" alt="" width="1 </ fi gure> <div class="img-block__text"> MTDDC Meetup FUKUSHIMA 2010 </div> </div> ᶆ
    Πϕϯτ։࠵೥
46. #mtddc ᶆ
    Πϕϯτ։࠵೥ ϙΠϯτ ϒϩοΫɿ
    ςΩετ
    આ໌ɹɹɿ
    ։࠵೥
    Ϋϥε໊ɿ
    ZFBS
47. #mtddc ᶆ
    Πϕϯτ։࠵೥ ϙΠϯτ ௥ՃՄೳͳϒϩοΫ
    ɾ݄೔
    ɾίϝϯτ ίϯςφཁૉͰแΉɿ
    0/
    Ϋϥε໊ɿ
    CMPDL
    ϒϩοΫͷ௥Ճͱ࡟আɿ
    0/
48. #mtddc ᶆ
    Πϕϯτ։࠵೥ ϙΠϯτ ௥ՃՄೳͳϒϩοΫ
    ɾ݄೔
    ɾίϝϯτ ίϯςφཁૉͰแΉɿ
    0/
    Ϋϥε໊ɿ
    CMPDL
    ϒϩοΫͷ௥Ճͱ࡟আɿ
    0/ <div class="timeline"> <div class="block"> <div class="year">2010 </div> <div class="detail"> <dl class="group"> <dt class="month">11.06</dt> <dd class="description"> <a href="http://mtddc.d-s-b.jp/2010/">MTDDC Meetup FUKUSH </dd> </dl> <div class="comment"> <p> Movable Type <div class="img-block left"> < fi gure class="img-block__img"> <img src="https://www.ni4.jp/demo_html/2010_fukushima.pn </ fi gure> <div class="img-block__text"> MTDDC Meetup FUKUSHIMA 2010 </div> </div>
49. #mtddc <div class="timeline"> <div class="block"> <div class="year">2010 </div> <div class="detail"> <dl class="group"> <dt class="month">11.06</dt> <dd class="description"> <a href="http://mtddc.d-s-b.jp/2010/">MTDDC Meetup FUKUSHIMA 2010</a> </dd> </dl> <div class="comment"> <p> Movable Type MTDDC Mee <div class="img-block left"> < fi gure class="img-block__img"> <img src="https://www.ni4.jp/demo_html/2010_fukushima.png" alt="" width="1 </ fi gure> <div class="img-block__text"> MTDDC Meetup FUKUSHIMA 2010 </div> </div> ᶇ
    λΠϜϥΠϯશମ
50. #mtddc ᶇ
    λΠϜϥΠϯશମ ϙΠϯτ ௥ՃՄೳͳϒϩοΫ
    ɾ೥ ίϯςφཁૉͰแΉɿ
    0/
    Ϋϥε໊ɿ
    UJNFMJOF
    ϒϩοΫͷ௥Ճͱ࡟আɿ
    0/
51. #mtddc ΧελϜϒϩοΫͷʮೖΕࢠߏ଄ʯ 03 STEP
52. #mtddc ͜͜·Ͱ࡞ͬͨϒϩοΫΛ࢖ͬͯΈΑ͏
53. #mtddc ౤ߘઃఆ
54. #mtddc ౤ߘઃఆ ʮϒϩοΫΤσΟλͷදࣔઃఆʯʹ͋Δ
    ʮ΢Σϒϖʔδʯͷ෦෼Ͱ
    ʮλΠϜϥΠϯʯͷΈΛ0/ʹ͢Δ
55. #mtddc ΢Σϒϖʔδͷ࡞੒ ΢ΣϒϖʔδͰ࢖͑ΔϒϩοΫ͸
    ʮλΠϜϥΠϯʯͷΈͳͷͰɺ
    ௥ՃϘλϯʹ͸͜ͷΑ͏ʹදࣔ͞ΕΔ
56. #mtddc ΢Σϒϖʔδͷ࡞੒ λΠϜϥΠϯͷϒϩοΫͰ
    ௥ՃͰ͖Δͷ͸೥ͷϒϩοΫͷΈ
57. #mtddc ΢Σϒϖʔδͷ࡞੒ λΠϜϥΠϯͷϒϩοΫʹ௥ՃͰ͖ΔͷΛ
    ೥ͷϒϩοΫ͚ͩʹઃఆ͓͍ͯͨͨ͠Ί
58. #mtddc ΢Σϒϖʔδͷ࡞੒ ։࠵೥ͷϒϩοΫͰ
    ௥ՃͰ͖Δͷ͸݄೔ͱίϝϯτͷΈ
59. #mtddc ΢Σϒϖʔδͷ࡞੒ ଓ͍ͯίϝϯτͷϒϩοΫΛ௥Ճ
60. #mtddc ΢Σϒϖʔδͷ࡞੒ ίϝϯτͷϒϩοΫͰ
    ௥ՃͰ͖Δͷ͸ςΩετͱը૾ͷϒϩοΫͷΈ
61. #mtddc ΢Σϒϖʔδͷ࡞੒ ֤ϒϩοΫʹೖྗ͍ͯ͘͠
62. #mtddc ΢Σϒϖʔδͷ࡞੒ ͜ͷঢ়ଶ͔ΒϓϨϏϡʔ͢Δͱɾɾɾ
63. #mtddc $44͕ਖ਼͘͠ద༻͞Ε͍ͯͳ͍
64. #mtddc <div class="timeline"> <div class="block"> <p class="year">2010 </p> <p class="month">11.06</p> <p class="description"> <a href="http://mtddc.d-s-b.jp/2010/">MTDDC Meetup FUKUSHIMA 2010</a> </p> <div class="comment"> <p> Movable Type MTDDC Meetup <div class="img-block"> <p class="position">left</p> <p class="img-block__img"> <img src="https://www.ni4.jp/.assets/2010_fukushima.png" alt="" width="1099" height="685" class="asset a </p> <p class="img-block__text"> MTDDC Meetup FUKUSHIMA 2010 80 <br> <br> <a href="http://mtddc.d-s-b.jp/2010/report/">MTDDC Meetup FUKUSHIMA </a> </p> )5.-λά͕ҧ͏͔ΒɺελΠϧ͕ద༻͞Εͳ͍ ϒϩοΫͷλά͕ҧ͏
    ඞཁͳϒϩοΫ͕ͳ͍
65. #mtddc ΧελϜεΫϦϓτΛॻ͘ 04 STEP
66. #mtddc ΧελϜεΫϦϓτΛॻ͘ λΠΠϜϥΠϯͷϒϩοΫʹ
    ·ͱΊͯεΫϦϓτΛॻ͘
    ʢೖΕࢠߏ଄ͷ৔߹ɺ਌ϒϩοΫʹॻ͘ʣ
67. #mtddc <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="*****************************************" crossorigin="anonymous"></script> <script> $(function(){ if (document.body.dataset.hasCompiledHtml) { return; } // HTML var html = document.querySelector('.timeline').outerHTML; MTBlockEditorSetCompiledHtml(html); }); </script> ΧελϜεΫϦϓτΛॻ͘ ࢲ͕͍ͭ΋࢖͏ςϯϓϨʔτ +BWB4DSJQU ɾK2VFSZΛ࢖༻
    ɾ਌ϒϩοΫͷ)5.-Λ·Δͬͱग़ྗ
    ɹ
    ͪͳΈʹɺࢲͷ+BWB4DSJQUεΩϧ͸௿͍Ͱ͢ʜ
68. #mtddc // $('.year').replaceWith(function() { var year = $(this).text(); $(this).replaceWith('<div class="year">' + year + '</div>') }); // $('img').removeAttr('style class'); $('.img-block__img').replaceWith(function() { var img = $(this).html(); $(this).replaceWith('< fi gure class="img-block__img">' + img + '</ fi gure>') }); ࠓճॻ͍͍ͯΔ಺༰ʢൈਮʣ QλάΛEJW΍ fi HVSFʹஔ͖׵͑ TUZMFଐੑ΍DMBTTଐੑΛ࡟আ
69. #mtddc // $('.img-block').each(function(){ var position = $(this). fi nd('.position').text(); $(this).addClass(position);}); $('.position').remove(); // $('.block').wrapInner('<div class="detail">'); $('.detail').wrapInner('<dl class="group">'); // $('.block').each(function(){ $(this). fi nd('.year').insertBefore($(this). fi nd(".detail")); }); $('.block').each(function(){ $(this). fi nd('.comment').insertAfter($(this). fi nd(".group")); }); ࠓճॻ͍͍ͯΔ಺༰ʢൈਮʣ ը૾഑ஔ༻ͷDMBTTΛ਌ϒϩοΫʹ͚ͭΔ ϒϩοΫͰғͬͨΓɺॱংΛೖΕସ͑ͨΓ
70. #mtddc ͋ΒͨΊͯ΢Σϒϖʔδͷฤूը໘Λ։͘ ϓϨϏϡʔʹ΋൓ө͞ΕΔͷͰ
    ͏·͘ಈ͔ͳͯ͘΋
    ։ൃऀπʔϧͰ֬ೝͰ͖Δ
71. #mtddc ͜͜·Ͱͷ಺༰ͰϓϨϏϡʔͯ͠ΈΔ
72. #mtddc <div class="timeline"> <div class="block"> <div class="year">2010 </div> <div class="detail"> <dl class="group"> <dt class="month">11.06</dt> <dd class="description"> <a href="http://mtddc.d-s-b.jp/2010/">MTDDC Meetup FUKUSHIMA 2010</a> </dd> </dl> <div class="comment"> <p> Movable Type MTDDC Meetup <div class="img-block left"> < fi gure class="img-block__img"> <img src="https://www.ni4.jp/.assets/2010_fukushima.png?" alt="" width="1099" height="685"> </ fi gure> <div class="img-block__text"> MTDDC Meetup FUKUSHIMA 2010 80 <br> <br> )5.-λά͕ॻ͖׵͑ΒΕɺελΠϧ͕ద༻͞Ε͍ͯΔ ਖ਼͍͠ϒϩοΫͷλά
    ඞཁͳϒϩοΫ͕ἧ͏
73. #mtddc ฤूը໘ͰͷϓϨϏϡʔͱΤσΟλ$44 05 STEP
74. #mtddc ͜ͷ··Ͱ΋ྑ͍͚ΕͲɺݟͨ໨͕ҧ͏ͷͰΘ͔Γʹ͍͘
75. #mtddc ؅ཧը໘ͷΤσΟλʹద༻Ͱ͖Δ$44Λ௥Ճ IUUQTNPWBCMFUZQFOFUTVQQPSUEFTJHOFEJUDTTIUNM ৄ͘͠͸ʮΤσΟλ
    $44
    Λར༻͢ΔʯΛࢀর
76. #mtddc ؅ཧը໘ͷΤσΟλʹద༻͞ΕΔ$44Λ௥Ճ
77. #mtddc ؅ཧը໘ͷΤσΟλͰ΄΅ϓϨϏϡʔͰ͖Δ
78. #mtddc ͋ͱ͸ʮ೥ʯผͷͰ͖͝ͱΛ௥Ճ͍͚ͯͩ͘͠
79. #mtddc ͋ͱ͸ʮ೥ʯผͷͰ͖͝ͱΛ௥Ճ͍͚ͯͩ͘͠
80. #mtddc αϯϓϧʢ׬੒൛ʣ IUUQTXXXOJKQIJTUPSZPGNUEEDDPNQMFUFIUNM
81. #mtddc ࣮ࡍʹ͜ͷΧελϜϒϩοΫͰߏஙͨ͠ྫ גࣜձࣾγʔζɾϥϘ ձࣾԊֵ ΩϟϦΞύε
82. #mtddc ӡ༻͠΍͍͢ϒϩοΫΤσΟλ
83. #mtddc ϒϩοΫΤσΟλ͡Όͳͯ͘΋ྑ͍ͷͰ͸ʜ !
84. #mtddc )5.-ϒϩοΫΛ࡞ͬͯɺ)5.-ΛషΓ෇͚Δ
85. #mtddc )5.-ϒϩοΫΛ࡞ͬͯɺ)5.-ΛషΓ෇͚Δ
86. #mtddc ͜ΕͰ΋Ͱ͖ͪΌ͍·͢ )5.-ϒϩοΫΛ࡞ͬͯɺ)5.-ΛషΓ෇͚Δ
87. #mtddc ΢ΣϒϖʔδΛฤू͢Δਓ͕
    )5.-Λॻ͚ΔͳΒ
    ϒϩοΫΤσΟλ͡Όͳͯ͘΋ྑͦ͞͏ʜʁ
88. #mtddc ϒϩοΫΤσΟλΛར༻͠ɺࣗ෼ͨͪͰߋ৽͍ͯ͠Δ
    ฐࣾΫϥΠΞϯτͷօ͞Μ
89. #mtddc ϒϩοΫΤσΟλΛར༻͠ɺࣗ෼ͨͪͰߋ৽͍ͯ͠Δ
    ฐࣾΫϥΠΞϯτͷօ͞Μ &$ػೳͱ࿈ܞͨ͠঎඼ϖʔδ ਺ेϖʔδʹ౉Δίϯςϯπ ݚमࢿྉʢಈըʣͷܝࡌ
90. ΧελϜϒϩοΫ࡞੒खॱͷ
    ϕλʔϓϥΫςΟε גࣜձࣾδϟΫελϙδγϣϯɹ୅දऔక໾ɹ੢ࢁɹହ࢙
    
    .5%%$
    .FFUVQ
    50,:0
     See you! 1IPUP
    CZ
    .BUU
    )VETPO
    PO
    6OTQMBTI