Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

ノーコード編集領域を作れる!MovableType.net 「かんたんデザイン編集機能」徹底解説

hayase
November 24, 2024

ノーコード編集領域を作れる!MovableType.net 「かんたんデザイン編集機能」徹底解説

MTDDC Meetup Tokyo 2024 のセッション資料です。

hayase

November 24, 2024
Tweet

More Decks by hayase

Other Decks in Business

Transcript

  1. 03 ࣗݾ঺հ ૣ੉ɹকҰ IUUQTIBZBTFUW γοΫεɾΞύʔτגࣜձࣾ ੡඼اըγχΞϚωδϟʔ w .5 .PWBCMF5ZQF ྺ೥໨

    w ԕڑ཭πʔΩχετʢἚ৓ʣ w ςϨϫʔΫͰϫʔϧυϏδωεαςϥΠτີணऔࡐ w υϩʔϯඈ͹ͯ͠ࢢͷެࣜ؍ޫಈը࡞੒ w ԻָϥΠϒͷԋग़༻ιϑτͳͲ͍Ζ͍Ζ࡞੒ w ੈքΏΔϛϡʔδοΫڠձʹࢀՃ
  2. 04 ຊ ೔ ͷ ༧ ఆ  ͔ΜͨΜσβΠϯฤूͷ֓ཁ  ࣮૷͢ΔͨΊͷجຊ

     ۩ମతͳ׆༻ɾهड़ྫ  ޮ཰తͳαΠτ੍࡞ɾӡӦͷϙΠϯτ
  3. 06 ͔ΜͨΜσβΠϯฤूػೳͱ͸ʁ w ςϯϓϨʔτ಺Ͱ͔ΜͨΜσβΠϯฤूػೳͰ ฤूͰ͖ΔՕॴΛࢦఆՄೳ w σβΠϯͷ֤ςϯϓϨʔτʹରͯ͠ઃఆͰ͖Δ w ΧελϜϑΟʔϧυͷมߋ΍ςϯϓϨʔτΛ ௚઀ฤू͢ΔΑ͏ͳ෦෼ΛݮΒͯ͠ɺ

    ઐ༻ͷ6*ͰαΠτσβΠϯ͕มߋͰ͖ΔΑ͏ʹͰ͖Δ w ίϯςϯπ؅ཧऀʴ͔ΜͨΜσβΠϯฤूػೳΛ ࣋ͭ৽ݖݶʮ͔ΜͨΜσβΠϯฤूऀʯΛ௥Ճ αΠτσβΠϯͷ೚ҙͷՕॴΛ ϊʔίʔυͰฤूͰ͖ΔΑ͏ʹ͢Δ ࢓૊Έ
  4. 09 υΩϡϝϯτ w ͔ΜͨΜσβΠϯฤू IUUQTNPWBCMFUZQFOFUTVQQPSUEFTJHOFBTZEFTJHOIUNM w ͔ΜͨΜσβΠϯฤू࢓༷ৄࡉ IUUQTNPWBCMFUZQFOFUTVQQPSUEFTJHOFBTZEFTJHOEFUBJMIUNM w ͔ΜͨΜσβΠϯฤूίϯϙʔωϯτར༻ྫ

    IUUQTNPWBCMFUZQFOFUTVQQPSUEFTJHOFBTZEFTJHOTBNQMFIUNM w ΤϯδχΞ͕ղઆʂ৽ςʔϚʮ'VTJPO$PSQPSBUFʯ੍࡞ͷϙΠϯτ ʢςʔϚ࡞੒ऀ޲͚ʣᶄ͔ΜͨΜσβΠϯฤूฤ IUUQTNPWBCMFUZQFOFUCMPHGVTJPODPSQSBUFTJUFFEJUPSIUNM
  5. 10 جຊతͳߟ͑ํ w ͔ΜͨΜσβΠϯฤूը໘ͷӈଆʹ ઃఆύωϧΛදࣔ w ֤ςϯϓϨʔτฤूը໘ͷԼʹ ઃఆύωϧͷฤूϑΟʔϧυΛ௥Ճ w ଐੑ஋

    ϞσΟϑΝΠΞ  FEJUPSUZQF Λઃఆ͢Δ͜ͱͰ ฤूՄೳͳίϯϙʔωϯτͱͯ͠ ৼΔ෣͏ .5λάNU7BSͷม਺Λ(6*ͰઃఆͰ͖Δ
  6. 12 NU7BSͷॏཁͳଐੑ஋ w OBNF ඞਢ߲໨ ม਺໊ w EFGBVMU σϑΥϧτͷ஋ɻม਺ʹ஋͕อଘ͞Ε͍ͯͳ͍৔߹ʹઃఆ͞Εͨ஋ͱͯ͠ࢀর͞Ε·͢ɻ ͜ͷ஋͸ຊ൪ͷ؀ڥͰ΋ಉ༷ʹࢀর͞Ε·͢ɻ

    w FEJUPSUZQF ඞਢ߲໨ ͔ΜͨΜσβΠϯฤूը໘Ͱ͜ͷNU7BSʹ஋Λઃఆ͢ΔͨΊʹ࢖͏ΤσΟλΛ ࢦఆ͠·͢ɻΤσΟλͷछྨʹ͍ͭͯ͸ޙड़͠·͢ɻ w FEJUPSMBCFM ͜ͷίϯϙʔωϯτͷ໊শͰɺӈ্ͷϝχϡʔ΍ೖྗϑΟʔϧυͷϥϕϧͱͯ͠ར༻͞Ε·͢ɻ w FEJUPSEFTDSJQUJPO ͜ͷίϯϙʔωϯτͷิ଍આ໌ͰɺೖྗϑΟʔϧυͷԼଆʹઃఆͨ͠಺༰͕දࣔ͞Ε·͢ɻ
  7. w FEJUPS ม਺஋͸ग़ྗ͞ΕͣɺΧελϜཁૉ͕ૠೖ͞Ε·͢ɻຊ൪؀ڥͰ͸Կ΋ग़ྗ͠·ͤΜɻ w UFYU ม਺஋͸ग़ྗ͞ΕɺͦͷલޙʹΧελϜཁૉ༻ͷίϝϯτϊʔυ͕ૠೖ͞Ε·͢ɻ ຊ൪؀ڥͰ͸ม਺஋ͷΈ͕ग़ྗ͞Ε·͢ɻ w BUUSJCVUF ม਺஋͕)5.-ཁૉͷଐੑ஋ͱͯ͠ग़ྗ͞ΕΔ৔߹Λ૝ఆͨ͠ϞʔυͰ͢ɻ

    ม਺஋ͷޙʹΧελϜཁૉ༻ͷଐੑ஋Λૠೖ͠·͢ɻ ຊ൪؀ڥͰ͸ม਺஋ͷΈ͕ग़ྗ͞Ε·͢ɻ 13 NU7BSͷॏཁͳଐੑ஋ FEJUPSNPEF σϑΥϧτ͸FEJUPSͰ͢ɻม਺஋ͱΧελϜཁૉͷग़ྗํ๏Λઃఆ͠·͢ɻ
  8. 14 FEJUPSUZQFͷछྨ w UFYU ೖྗϑΟʔϧυͱͯ͠JOQVUཁૉ͕දࣔ͞Ε·͢ɻ JOQVUཁૉͷUZQFଐੑ஋͸UFYUͱͳΓ·͢ɻ w IJEEFO IJEEFOλΠϓͷJOQVUཁૉΛૠೖ͠·͢ɻ ը໘্ʹ͸දࣔ͞Ε·ͤΜɻ

    w DPMPS ೖྗϑΟʔϧυͱͯ͠JOQVUཁૉ͕දࣔ͞Ε·͢ɻ UZQFଐੑ஋͸DPMPSͱͳΓ·͢ɻΫϦοΫ͢ΔͱΧϥʔ ϐοΧʔ͕දࣔ͞Εͯɺ৭Λબ୒͢Δ͜ͱ͕Ͱ͖·͢ɻ
  9. 17 FEJUPSUZQFͷछྨ w UFYUBSFB ೖྗϑΟʔϧυͱͯ͠UFYUBSFBཁૉ͕දࣔ͞Ε·͢ɻ FEJUPSFEJUPSΛSJDIUFYUʹઃఆ͢Δͱɺ ೖྗϑΟʔϧυ͕ϦονςΩετΤσΟλʹͳΓ·͢ɻ w DPOUFOUFEJUBCMF FEJUPSNPEF͕UFYUͷ৔߹ʹར༻Ͱ͖·͢ɻࢦఆͨ͠ཁૉΛ

    ௚઀ฤूՄೳͳঢ়ଶʹ͠·͢ɻDPOUFOUFEJUBCMFͷཁૉ͸ɺ ϑΥʔΧε͕֎Εͨͱ͖ʹDPOUFOUFEJUBCMFͷঢ়ଶ͔Βݩͷ ঢ়ଶʹ໭Γɺม਺஋͕อଘ͞Ε·͢ɻ FEJUPSFEJUPSΛSJDIUFYUʹઃఆ͢Δͱɺ ฤूʹϦονςΩετΤσΟλΛར༻Ͱ͖·͢ɻ
  10. 19 %0.ͷߋ৽ʹؔ͢Δଐੑ஋ w FEJUPSVQEBUFTFMFDUPS ߋ৽ର৅ͱ͢ΔཁૉΛಛఆ͢ΔͨΊͷ$44ηϨΫλΛઃఆ͠·͢ɻ ઃఆͰ͖Δ$44ηϨΫλ͸RVFSZ4FMFDUPS"MMͷ࢓༷ʹै͍·͢ɻ ෳ਺ͷηϨΫλʔ͸ɺΧϯϚͰ۠੾ͬͯࢦఆ͢Δ͜ͱ͕Ͱ͖·͢ɻ w FEJUPSVQEBUFBUUSJCVUF ม਺஋͕ߋ৽͞Εͨͱ͖ʹߋ৽͢Δ%0.ཁૉͷଐੑΛઃఆ͠·͢ɻ

    ଐੑ஋͸ΧϯϚ۠੾ΓͰෳ਺ࢦఆ͢Δ͜ͱ΋Ͱ͖·͢ɻʢྫɿUFYU TUZMFDPMPSʣ w FEJUPSVQEBUFGFUDI Λࢦఆ͢Δͱɺอଘσʔλʹอଘͨ͠ޙʹϓϨϏϡʔը໘ͷ)5.-Λऔಘͯ͠ɺ औಘͨ͠಺༰Λجʹ%0.Λߋ৽͠·͢ɻ %0.ͷߋ৽ʹ͸਺ඵͷ͕͔͔࣌ؒΔͨΊɺଈ࠲ʹߋ৽͍ͨ͠Օॴʹ͸ෆ޲͖Ͱ͢ɻ ͔ΜͨΜσβΠϯฤूը໘্Ͱઃఆͨ͠஋Λ ϦΞϧλΠϜʹ൓ө͢ΔͨΊͷଐੑ஋
  11. 22 ᶃςΩετΤϦΞͷهड़ྫ ઃఆύωϧͷهड़ name="header__description"ɹ default="<p>اۀΛΠϝʔδͨ͠…</p>" editor:type="textarea"ɹ editor:label="Ωϟονίϐʔ֓ཁ" editor:mode="editor"ɹ editor:editor="richtext" editor:register="0"ɹ

    editor:update:required="1" <$mt:Var $> ม਺ͷ໊લ ϓϨʔϯςΩετ͔ϦονςΩετΛઃఆ ม਺஋ͱΧελϜཁૉͷग़ྗํ๏Λઃఆ ඞਢʹ͢Δ͔ͷઃఆ ӈ্ͷฤू߲໨ϦετʹೖΕΔ͔ઃఆ ม਺ͷॳظ஋Λઃఆ ςΩετΤϦΞΛදࣔ දࣔ͞ΕΔϥϕϧ
  12. 23 ᶃςΩετΤϦΞͷهड़ྫ name="header__description"ɹdefault="<p>اۀΛΠϝʔδ…</p>" editor:type="contenteditable"ɹeditor:label="Ωϟονίϐʔ֓ཁ" editor:mode="text"ɹeditor:button:position="-15, -20" editor:editor="richtext"ɹeditor:button:mode="before" editor:update:required="1" <$mt:Var $>

    ม਺ͷ໊લ ฤूϘλϯͷදࣔҐஔΛ਺஋Ͱௐ੔ ม਺஋ͱΧελ Ϝཁૉͷग़ྗํ๏Λઃఆ ฤूϘλϯͷҐஔΛલ͔ޙΖͰࢦఆ ϓϨʔϯςΩετ͔ϦονςΩετΛઃఆ ม਺ͷॳظ஋Λઃఆ ςΩετΛฤूՄೳͳঢ়ଶʹ͢Δ දࣔ͞ΕΔϥϕϧ ฤूඞਢʹ͢Δ͔ͷઃఆ ςϯϓϨʔτ্ͷهड़
  13. 25 ᶄը૾ͷهड़ྫ name="asset_id"ɹeditor:type="image" editor:mode="editor"ɹeditor:update:selector=".jumbotron__indexImg" editor:update:attribute="style:backgroundImage" editor:label="ϝΠϯը૾"ɹeditor:description="τοϓϖʔδ…" editor:register="0" <$mt:Var $> ม਺ͷ໊લ

    ߋ৽͢Δ%0.ཁૉͷଐੑΛઃఆ ઃఆ߲໨ͷઆ໌ දࣔ͞ΕΔϥϕϧ λΠϓΛJNBHFʢը૾ʣʹઃఆ ม਺஋ͱΧελϜཁૉͷग़ྗํ๏Λઃఆ ߋ৽ର৅ͷ$44ηϨΫλΛઃఆ ӈ ্ ͷ ฤ ू ߲ ໨ Ϧ ε τ ʹ ೖ Ε Δ ͔ ͷ ઃ ఆ ઃఆύωϧͷهड़
  14. 26 ᶄը૾ͷهड़ྫ name="asset_id"ɹeditor:type="image" editor:mode="editor" editor:update:selector=".jumbotron__indexImg" editor:update:attribute="style:backgroundImage" editor:label="ϝΠϯը૾"ɹeditor:button:position="-270,5" <$mt:Var $> ม਺ͷ໊લ

    ߋ৽ର৅ͷ$44ηϨΫλΛઃఆ ߋ৽͢Δ%0.ཁૉͷଐੑΛઃఆ λΠϓΛJNBHFʢը૾ʣʹઃఆ ม਺஋ͱΧελϜཁૉͷग़ྗํ๏Λઃఆ දࣔ͞ΕΔϥϕϧ ςϯϓϨʔτ্ͷهड़ ฤूϘλϯͷදࣔҐஔΛUPQͱMFGUͷ஋Ͱௐ੔ UPQΛϚΠφεʹ͢Δͱ্ʹMFGUΛϚΠφεʹ͢ΔͱࠨʹҠಈ
  15. 29 ᶅϦετͷهड़ྫ name="webpage_ids"ɹeditor:type="list" editor:mode="editor"ɹeditor:label="΢Σϒϖʔδදࣔ" editor:description="τοϓʙ"ɹ editor:update:selector=".pagemenu__bgwrap" editor:register="0" editor:update:parent:selector=".pagemenu > .row"ɹeditor:update:fetch="1"

    <$mt:Var $> ม਺ͷ໊લ ઃఆ߲໨ͷઆ໌ ӈ্ͷฤू߲໨Ϧ ετʹೖΕΔ͔ͷઃఆ ߋ৽ର৅ͷ$44ηϨΫλΛઃఆ λΠϓΛϦετʹઃఆ ม਺஋ͱΧελϜཁૉͷग़ྗํ๏Λઃఆ දࣔ͞ΕΔϥϕϧ Ϧετ߲໨Λૠೖ͢Δ਌ཁૉΛࢦఆ ઃఆύωϧͷهड़ ϓϨϏϡʔը໘ͷ)5.-Λऔಘͯ͠ औಘͨ͠಺༰Λجʹ%0.Λߋ৽͢Δ
  16. 30 ᶅϦετͷهड़ྫ name="webpage_ids"ɹeditor:type="list" editor:mode="editor"ɹeditor:label="΢Σϒϖʔδදࣔ" editor:description="τοϓ…"ɹeditor:update:selector=".pagemenu__bgwrap" editor:update:parent:selector=".pagemenu > .row" editor:update:fetch="1" <$mt:Var

    $> ม਺ͷ໊લ ઃఆ߲໨ͷઆ໌ ߋ৽ର৅ͷ$44ηϨΫλΛઃఆ Ϧετ߲໨Λૠೖ͢Δ਌ཁૉΛࢦఆ λΠϓΛϦετʹઃఆ ม਺஋ͱΧελ Ϝཁૉͷग़ྗํ๏Λઃఆ දࣔ͞ΕΔϥϕϧ ϓϨϏϡʔը໘ͷ)5.-Λऔಘͯ͠औಘͨ͠಺༰Λجʹ%0.Λߋ৽͢Δ ςϯϓϨʔτ্ͷهड़
  17. 31 ᶅϦετͷهड़ྫ <section class="pagemenu"> <div class="row mt-row"> <mt:If name="webpage_ids"> <mt:Pages

    ids="$webpage_ids"> <div class="col-sm-12 mt-col-sm-12 pagemenu__bgwrap" <mt:If name="pagemenu__bgwrap"> data-mt-site-editor-pagemenu__bgwrap="1"</mt:If> <mt:If tag="CustomFieldValue" identifier="main_image_page"> style="background-image: url(<mt:CustomFieldAsset identifier="main_image_page"> <$mt:AssetThumbnailURL width="800"$></mt:CustomFieldAsset>)" </mt:If> > … ςϯϓϨʔτ্ͷ.5λάͷهड़
  18. 32 ᶆϩΰը૾ͷهड़ྫ ϔομʔͷϩΰը૾ͷมߋ w ैདྷ͸ΧελϜϑΟʔϧυͰ࣮ݱɺ·ͨ͸ ςϯϓϨʔτʹ௚઀هࡌ͢Δέʔε͕ଟ͍ w ϑολʔͷϩΰը૾΋ಉ࣌ʹߋ৽ w ը૾Λઃఆ͠ͳ͍৔߹͸αΠτͷ

    λΠτϧΛදࣔ͢Δ w ςʔϚʮ4UZMJTI$PSQPSBUFʯͰ͸ɺ ϑολʔͱը૾Λڞ௨ͯ͠ར༻͠ɺ ը૾͕ઃఆ͞Εͳ͍έʔεʹ͸ αΠτͷλΠτϧΛදࣔ͢Δ࣮૷
  19. 33 ᶆϩΰը૾ͷهड़ྫ name="logo"ɹeditor:type="image" editor:mode="editor"ɹeditor:update:attribute="src" editor:update:selector=".mt-navbar-brand img, .footerlogo__wrap img" editor:label="ϩΰը૾"ɹeditor:description="αΠτ໊…" editor:if:value="<img>"ɹeditor:if:empty="$blog_name"

    <$mt:Var $> ม਺ͷ໊લ ߋ৽ର৅ͷ$44ηϨΫλΛઃఆ ઃఆ߲໨ͷઆ໌ දࣔ͞ΕΔϥϕϧ λΠϓΛJNBHFʢը૾ʣʹઃఆ ม਺஋ͱΧελϜཁૉͷग़ྗํ๏Λઃఆ ߋ৽͢Δ%0.ཁૉͷଐੑΛઃఆ ม਺஋͕ଘࡏ΋͘͠͸ۭͷ৔߹ʹɺࢦఆ͞Εͨ৔ॴʹઃఆ஋ͱͯ͠౉͞Εͨ)5.-Λૠೖ ઃఆύωϧͷهड़
  20. 34 ᶆϩΰը૾ͷهड़ྫ ςϯϓϨʔτ্ͷ.5λάͷهड़ <mt:SetVarBlock name="blog_name"> <$mt:BlogName encode_html="1"$> </mt:SetVarBlock> <!-- mt-site-editor-logo

    --> <mt:If name="logo"> <img src="<mt:Asset id="$logo"><$mt:AssetURL$></mt:Asset>" alt="<$mt:BlogName encode_html="1"$>"> <mt:Else> <!-- mt-site-editor-logo-if-empty --><$mt:BlogName encode_html="1"$><!-- /mt-site-editor-logo-if-empty —> </mt:If> <!-- /mt-site-editor-logo --> ม਺஋͕ଘࡏ΋͘͠͸ۭͷ৔߹ʹɺࢦఆ͞Εͨ৔ॴʹઃఆ஋ͱͯ͠౉͞Εͨ)5.-Λૠೖ͢Δ FEJUPSOBNF͕MPHPͷͨΊɺNUTJUFFEJUPSMPHPʹͳΔ
  21. 35 υΩϡϝϯτ w ͔ΜͨΜσβΠϯฤू IUUQTNPWBCMFUZQFOFUTVQQPSUEFTJHOFBTZEFTJHOIUNM w ͔ΜͨΜσβΠϯฤू࢓༷ৄࡉ IUUQTNPWBCMFUZQFOFUTVQQPSUEFTJHOFBTZEFTJHOEFUBJMIUNM w ͔ΜͨΜσβΠϯฤूίϯϙʔωϯτར༻ྫ

    IUUQTNPWBCMFUZQFOFUTVQQPSUEFTJHOFBTZEFTJHOTBNQMFIUNM w ΤϯδχΞ͕ղઆʂ৽ςʔϚʮ'VTJPO$PSQPSBUFʯ੍࡞ͷϙΠϯτ ʢςʔϚ࡞੒ऀ޲͚ʣᶄ͔ΜͨΜσβΠϯฤूฤ IUUQTNPWBCMFUZQFOFUCMPHGVTJPODPSQSBUFTJUFFEJUPSIUNM ͔ΜͨΜσβΠϯฤूίϯϙʔωϯτར༻ྫ΍׆༻ϒϩάʹ ܝࡌͷ֤ύʔπΛྲྀ༻͢Δ͜ͱͰଟ͘ͷύλʔϯΛ࣮ݱͰ͖·͢
  22. 38 ޮ཰తͳӡӦͷͨΊͷઃܭ w χϡʔεͳͲͷ࣌ܥྻͳ΋ͷ͸هࣄͰ࡞੒ɺձࣾ֓ཁͳͲͷݻఆతͳϖʔδ͸ ΢ΣϒϖʔδͰ࡞੒ w هࣄɾ΢ΣϒϖʔδͰ͸ϒϩοΫΤσΟλͷΧελϜϒϩοΫΛ׆༻ͯ͠ αΠτʹ߹ΘͤͨϒϩοΫΛ༻ҙ w τοϓϖʔδͷΩϟονίϐʔ΍αΠτશମʹؔΘΔ΋ͷ͸

    ͔ΜͨΜσβΠϯฤूͰมߋ w ͔ΜͨΜσβΠϯͷมߋՕॴ͸ɺαΠτӡ༻ʹ͋Θ࣮ͤͯ૷͢Δ w هࣄɾ΢Σϒϖʔδʴ͔ΜͨΜσβΠϯฤू͕৮ΕΔݖݶ ʮ͔ΜͨΜσβΠϯฤूऀʯΛར༻͢Δ ͔ΜͨΜσβΠϯฤूɹʹɹςϯϓϨʔτ ϒϩοΫΤσΟλɹɹɹʹɹهࣄɾ΢Σϒϖʔδ Λ࢖͍෼͚Δʂ