Tumblrを使う３ - カスタムHTMLテーマの作成

Transcript

1. ܳज़৘ใԋश 8FC
   
   5VNCMSΛ࢖͏̏
   ΧελϜ)5.-ςʔϚͷ࡞੒ ೥݄೔
   ౦ژ᥁ज़େֶ
   ܳज़৘ใηϯλʔ ".$
   ୲౰ɿాॴ३
2. ࠓ೔ͷ಺༰ ‣ 5VNCMSͷΧελϜ)5.-ςʔϚͷ࡞੒
   ‣ ͭ·Γɺ5VNCMSͷςʔϚΛ·ͬ͞Βͳঢ়ଶ͔Β࡞ͬͯΈΔ
   ‣ ໨ࢦͤςʔϚൢച
   
3. 5VNCMSͷΧελϜ)5.-ςʔϚͷ࡞੒
4. 5VNCMSͷΧελϜ)5.-ςʔϚͷ࡞੒ ‣ 5VNCMSͷςʔϚΛ׬શʹ·ͬ͞Βͳঢ়ଶ͔Β࡞Δ͜ͱ΋Մೳ
   ‣ ࠷΋ৄ͍͠υΩϡϝϯτ͸ɺ5VNCMSͷαΠτʹ͋Δࢿྉ
   ‣ IUUQXXXUVNCMSDPNEPDTFODVTUPN@UIFNFT
5. 5VNCMSͷΧελϜ)5.-ςʔϚͷ࡞੒ ‣ ΧελϚΠζͷը໘Λදࣔ͢Δʹ͸
   ‣ %BTICPBSEͰɺΧελϚΠζ͢ΔϒϩάΛબ୒͠ɺ$VTUPNJ[F
   5IFNFϘλϯΛԡ ͢
6. 5VNCMSͷΧελϜ)5.-ςʔϚͷ࡞੒ ‣ දࣔ͞ΕΔΧελϚΠζը໘ͷࠨίϥϜͷαϜωΠϧ௚Լʹ͋Δɺ&EJU
   )5.-Ϙλϯ Λԡ͢
7. 5VNCMSͷΧελϜ)5.-ςʔϚͷ࡞੒ ‣ ͜͜ʹදࣔ͞ΕΔ)5.- ͱ಺แ͞ΕΔ$44 Λฤू͍ͯ͘͠
8. 5IVNCMSͷΧελϜ)5.-ςʔϚͷ࡞੒ ‣ ΧελϜ)5.-ͷ֬ೝ༻ʹɺશͯͷछྨͷ౤ߘΛςετ༻ϒϩάʹ͓ͯ͘͠
   ‣ 5FYU
   1IPUP
   2VPUF
   -JOL
   $IBU
   "VEJP
   7JEFP
9. 7BSJBCMFͱ#MPDL
10. 7BSJBCMF ม਺ ͱ#MPDL ϒϩοΫ ‣ ΧελϜ)5.-࡞੒ͰॏཁͱͳΔ5VNCMSઐ༻ͷͭͷԋࢉࢠ
    ‣ )5.-ͷதʹຒΊࠐΜͰ࢖༻͢Δ
    ‣ 7BSJBCMF
    ม਺
    ‣ λΠτϧ΍هड़ͳͲɺಛఆͷσʔλΛૠೖ͢Δ
    ‣ #MPDLɹ
    ‣ σʔλͷू·ΓΛૠೖ͢Δ
    ‣ ΠϯσοΫεϖʔδɺݸผͷهࣄɺφϏήʔγϣϯͳͲ {ʬVariable໊ʭ} {block:ʬBlock໊ʭ} ... {/block:ʬBlock໊ʭ}
11. 7BSJBCMFͱ#MPDL ‣ 7BSJBCMFͷهड़ྫ <h1>{Title}</h1> <h2>{PostTitle}</h2> <p>{Description}</p>
12. 7BSJBCMFͱ#MPDL ‣ #MPDLͷهड़ྫ {block:Posts} {block:Photo} <li class="post photo"> <img src="{PhotoURL-500}" alt="{PhotoAlt}"/> {block:Caption} <div class="caption">{Caption}</div> {/block:Caption} </li> {/block:Photo} {/block:Posts}
13. 5VNCMSςϯϓϨʔτͷߏ଄
14. 5VNCMSςϯϓϨʔτͷߏ଄ html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text}
15. 5VNCMSςϯϓϨʔτͷߏ଄ html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ϒϩάͷλΠτϧΛදࣔ
16. 5VNCMSςϯϓϨʔτͷߏ଄ html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ϒϩάͷλΠτϧΛදࣔ ݕࡧ݁ՌΛදࣔ
17. 5VNCMSςϯϓϨʔτͷߏ଄ html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ϒϩάͷλΠτϧΛදࣔ ݕࡧ݁ՌΛදࣔ ༷ʑͳλΠϓͷ౤ߘΛදࣔ
18. 5VNCMSςϯϓϨʔτͷߏ଄ html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ϒϩάͷλΠτϧΛදࣔ ݕࡧ݁ՌΛදࣔ ༷ʑͳλΠϓͷ౤ߘΛදࣔ ςΩετ
19. 5VNCMSςϯϓϨʔτͷߏ଄ html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ϒϩάͷλΠτϧΛදࣔ ݕࡧ݁ՌΛදࣔ ༷ʑͳλΠϓͷ౤ߘΛදࣔ ςΩετ ࣸਅ
20. 5VNCMSςϯϓϨʔτͷߏ଄ html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ϒϩάͷλΠτϧΛදࣔ ݕࡧ݁ՌΛදࣔ ༷ʑͳλΠϓͷ౤ߘΛදࣔ ςΩετ ࣸਅ Ҿ༻
21. 5VNCMSςϯϓϨʔτͷߏ଄ html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ϒϩάͷλΠτϧΛදࣔ ݕࡧ݁ՌΛදࣔ ༷ʑͳλΠϓͷ౤ߘΛදࣔ ςΩετ ࣸਅ Ҿ༻ ϏσΦ
22. 5VNCMSςϯϓϨʔτͷߏ଄ html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ϒϩάͷλΠτϧΛදࣔ ݕࡧ݁ՌΛදࣔ ༷ʑͳλΠϓͷ౤ߘΛදࣔ ςΩετ ࣸਅ Ҿ༻ ϏσΦ Ի
23. 5VNCMSςϯϓϨʔτͷߏ଄ html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote} {block:Video} {block:Audio} {block:Text} ϒϩάͷλΠτϧΛදࣔ ݕࡧ݁ՌΛදࣔ ༷ʑͳλΠϓͷ౤ߘΛදࣔ ϖʔδૹΓػೳ ςΩετ ࣸਅ Ҿ༻ ϏσΦ Ի
24. ϛχϚϜͳ)5.-ͷ࡞੒ ‣ ·ͣɺΧελϜ)5.-ͷ࣮ݧͱͯ͠ϛχϚϜͳ)5.-Λ࡞੒ͯ͠Έ·͢
    ‣ ϛχϚϜͳ)5.-͔Βঃʑʹຊ֨తͳςʔϚ΁ͱൃల͍͖͍ͤͯͨ͞
    ‣ ·ͣ͸ɺ5VNCMSͷλΠτϧͱઆ໌Λදࣔͯ͠Έ·͠ΐ͏
25. ϛχϚϜͳ)5.-ͷ࡞੒ ‣ 5VNCMSͷλΠτϧͱઆ໌Λදࣔ <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>{Title}</title> </head> <body> <h1>{Title}</h1> <p>{Description}</p> </body> </html>
26. ϛχϚϜͳ)5.-ͷ࡞੒ ‣ λΠτϧͱઆ໌͕දࣔ͞ΕΔ
27. ϛχϚϜͳ)5.-ͷ࡞੒ ‣ ࣍ʹ౤ߘΛදࣔ͠·͠ΐ͏
    ‣ ౤ߘը໘͸ɺ1PTUTϒϩοΫͷதʹɺछྨʹԠͯ͡ϙετͷϒϩοΫΛ഑ஔ͍ͯ͘͠
    ‣ ·ͣ͸ɺ1IPUP ࣸਅ ͷ౤ߘͰ࣮ݧ
28. ϛχϚϜͳ)5.-ͷ࡞੒ ‣ 1IPUP ࣸਅ ͷ౤ߘΛදࣔ <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>{Title}</title> </head> <body> <h1>{Title}</h1> <p>{Description}</p> <div id="posts"> {block:Posts} {block:Photo} <div class="post photo"> <img src="{PhotoURL-500}" alt="{PhotoAlt}"/> </div> {/block:Photo} {/block:Posts} </div> </body> </html>
29. ϛχϚϜͳ)5.-ͷ࡞੒ ‣ ࣸਅͷ౤ߘ͕දࣔ͞Εͨ
30. ϛχϚϜͳ)5.-ͷ࡞੒ ‣ ͞ΒʹࣸਅͷΩϟϓγϣϯ΋දࣔͯ͠ΈΔ <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>{Title}</title> </head> <body> <h1>{Title}</h1> <p>{Description}</p> <div id="posts"> {block:Posts} {block:Photo} <div class="post photo"> <img src="{PhotoURL-500}" alt="{PhotoAlt}"/> {block:Caption} <div class="caption">{Caption}</div> {/block:Caption} </div> {/block:Photo} {/block:Posts} </div> </body> </html>
31. ϛχϚϜͳ)5.-ͷ࡞੒ ‣ ࣸਅͷΩϟϓγϣϯ΋දࣔ
32. ϛχϚϜͳ)5.-ͷ࡞੒ ‣ ͜ͷཁྖͰશͯͷ౤ߘͷλΠϓΛ໢ཏ͍ͯ͘͠
    ‣ 5FYU
    ‣ 1IPUP
    ‣ 2VPUF
    ‣ -JOL
    ‣ $IBU
    ‣ 7JEFP
    ‣ "VEJP
    ‣ ͪΐͬͱ௕͍ͷͰɺԼهͷ63-͔Βμ΢ϯϩʔυ
    ‣ http://goo.gl/oe0jG
33. ϛχϚϜͳ)5.-ͷ࡞੒ ‣ શͯͷ౤ߘλΠϓΛ໢ཏͨ͠)5.- <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>{Title}</title> </head> <body> <h1>{Title}</h1> <p>{Description}</p> <div id="posts"> {block:Posts} {block:Text} <li class="post text"> {block:Title} <h3><a href="{Permalink}">{Title}</a></h3> {/block:Title} {Body} </li> {/block:Text} {block:Photo} <li class="post photo"> <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
34. ϛχϚϜͳ)5.-ͷ࡞੒ ‣ શͯͷ౤ߘλΠϓΛ໢ཏͨ͠)5.- {block:Caption} <div class="caption">{Caption}</div> {/block:Caption} </li> {/block:Photo} {block:Photoset} <li class="post photoset"> {Photoset-500} {block:Caption} <div class="caption">{Caption}</div> {/block:Caption} </li> {/block:Photoset} {block:Quote} <li class="post quote"> "{Quote}" {block:Source} <div class="source">{Source}</div> {/block:Source} </li> {/block:Quote}
35. ϛχϚϜͳ)5.-ͷ࡞੒ ‣ શͯͷ౤ߘλΠϓΛ໢ཏͨ͠)5.- {block:Link} <li class="post link"> <a href="{URL}" class="link" {Target}>{Name}</a> {block:Description} <div class="description">{Description}</div> {/block:Description} </li> {/block:Link} {block:Chat} <li class="post chat"> {block:Title} <h3><a href="{Permalink}">{Title}</a></h3> {/block:Title} <ul class="chat"> {block:Lines} <li class="{Alt} user_{UserNumber}"> {block:Label} <span class="label">{Label}</span> {/block:Label} {Line}
36. ϛχϚϜͳ)5.-ͷ࡞੒ ‣ શͯͷ౤ߘλΠϓΛ໢ཏͨ͠)5.- {/block:Lines} </ul> </li> {/block:Chat} {block:Video} <li class="post video"> {Video-500} {block:Caption} <div class="caption">{Caption}</div> {/block:Caption} </li> {/block:Video} {block:Audio} <li class="post audio"> {AudioPlayerBlack} {block:Caption} <div class="caption">{Caption}</div> {/block:Caption} </li> {/block:Audio}
37. ϛχϚϜͳ)5.-ͷ࡞੒ ‣ ͞ΒʹࣸਅͷΩϟϓγϣϯ΋දࣔͯ͠ΈΔ </div> </body> </html>
38. ϛχϚϜͳ)5.-ͷ࡞੒ ‣ ࣮ࡍʹϖʔδΛ։͍ͯΈͯɺ౤ߘͨ͠શͯλΠϓ͕දࣔ͞Ε͍ͯΔ͜ͱΛ֬ೝ
39. $44Λ௥Ճ
40. $44Λ௥Ճ ‣ $44͸ɺ)5.-ϑΝΠϧͷIFBEཁૉ಺ʹ௚઀௥Ճ͢Δ
    ‣ TUZMFཁૉͰғΜͰɺͦͷதʹ$44Λهड़͢Δ
    ‣ ؆୯ͳαϯϓϧͰղઆ͠·͢
41. $44Λ௥Ճ ‣ IFBEཁૉ಺ʹ$44Λ௥Ճͨ͠ελΠϧͷྫ html { background-color:#eeeeee; } body { background-color:#ffffff; width:720px; margin:0 auto; padding:2em 4em; border-top:6px solid #3399cc; color:#444444; font-family:sans-serif; } .post { padding:1em; border-bottom:1px dotted #cccccc; } a { color:#666666; text-decoration:underline; } h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color:#3399cc; text-decoration:none; }
42. $44Λ௥Ճ ‣ ϖʔδʹσβΠϯ͕෇Ճ͞Εͨ
43. $44Λ௥Ճ ‣ ͜ͷํ๏Ͱɺ͜Ε·ͰֶΜͰ͖ͨ)5.-ͱ$44ͷ஌ࣝΛۦ࢖ͯ͠ɺ5VNCMSΛΧελ ϚΠζ͍ͯ͘͠
    ‣ ࣍ि͞Βʹࡉ͔ͳςΫχοΫʹ͍ͭͯ୳ٻ͍͖ͯ͠·͢