Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Atsushi Tadokoro

June 25, 2014
Tweet

More Decks by Atsushi Tadokoro

Other Decks in Technology

Transcript

  1. 7BSJBCMF ม਺ ͱ#MPDL ϒϩοΫ ‣ ΧελϜ)5.-࡞੒ͰॏཁͱͳΔ5VNCMSઐ༻ͷͭͷԋࢉࢠ ‣ )5.-ͷதʹຒΊࠐΜͰ࢖༻͢Δ ‣ 7BSJBCMF

    ม਺  ‣ λΠτϧ΍هड़ͳͲɺಛఆͷσʔλΛૠೖ͢Δ ‣ #MPDLɹ ‣ σʔλͷू·ΓΛૠೖ͢Δ ‣ ΠϯσοΫεϖʔδɺݸผͷهࣄɺφϏήʔγϣϯͳͲ {ʬVariable໊ʭ} {block:ʬBlock໊ʭ} ... {/block:ʬBlock໊ʭ}
  2. 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}
  3. 5VNCMSςϯϓϨʔτͷߏ଄ html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote}

    {block:Video} {block:Audio} {block:Text} ϒϩάͷλΠτϧΛදࣔ ݕࡧ݁ՌΛදࣔ
  4. 5VNCMSςϯϓϨʔτͷߏ଄ html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote}

    {block:Video} {block:Audio} {block:Text} ϒϩάͷλΠτϧΛදࣔ ݕࡧ݁ՌΛදࣔ ༷ʑͳλΠϓͷ౤ߘΛදࣔ
  5. 5VNCMSςϯϓϨʔτͷߏ଄ html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote}

    {block:Video} {block:Audio} {block:Text} ϒϩάͷλΠτϧΛදࣔ ݕࡧ݁ՌΛදࣔ ༷ʑͳλΠϓͷ౤ߘΛදࣔ ςΩετ
  6. 5VNCMSςϯϓϨʔτͷߏ଄ html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote}

    {block:Video} {block:Audio} {block:Text} ϒϩάͷλΠτϧΛදࣔ ݕࡧ݁ՌΛදࣔ ༷ʑͳλΠϓͷ౤ߘΛදࣔ ςΩετ ࣸਅ
  7. 5VNCMSςϯϓϨʔτͷߏ଄ html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote}

    {block:Video} {block:Audio} {block:Text} ϒϩάͷλΠτϧΛදࣔ ݕࡧ݁ՌΛදࣔ ༷ʑͳλΠϓͷ౤ߘΛදࣔ ςΩετ ࣸਅ Ҿ༻
  8. 5VNCMSςϯϓϨʔτͷߏ଄ html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote}

    {block:Video} {block:Audio} {block:Text} ϒϩάͷλΠτϧΛදࣔ ݕࡧ݁ՌΛදࣔ ༷ʑͳλΠϓͷ౤ߘΛදࣔ ςΩετ ࣸਅ Ҿ༻ ϏσΦ
  9. 5VNCMSςϯϓϨʔτͷߏ଄ html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote}

    {block:Video} {block:Audio} {block:Text} ϒϩάͷλΠτϧΛදࣔ ݕࡧ݁ՌΛදࣔ ༷ʑͳλΠϓͷ౤ߘΛදࣔ ςΩετ ࣸਅ Ҿ༻ ϏσΦ Ի
  10. 5VNCMSςϯϓϨʔτͷߏ଄ html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote}

    {block:Video} {block:Audio} {block:Text} ϒϩάͷλΠτϧΛදࣔ ݕࡧ݁ՌΛදࣔ ༷ʑͳλΠϓͷ౤ߘΛදࣔ ϖʔδૹΓػೳ ςΩετ ࣸਅ Ҿ༻ ϏσΦ Ի
  11. ϛχϚϜͳ)5.-ͷ࡞੒ ‣ 5VNCMSͷλΠτϧͱઆ໌Λදࣔ <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" />

    <title>{Title}</title> </head> <body> <h1>{Title}</h1> <p>{Description}</p> </body> </html>
  12. ϛχϚϜͳ)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>
  13. ϛχϚϜͳ)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>
  14. ϛχϚϜͳ)5.-ͷ࡞੒ ‣ ͜ͷཁྖͰશͯͷ౤ߘͷλΠϓΛ໢ཏ͍ͯ͘͠ ‣ 5FYU ‣ 1IPUP ‣ 2VPUF ‣

    -JOL ‣ $IBU ‣ 7JEFP ‣ "VEJP ‣ ͪΐͬͱ௕͍ͷͰɺԼهͷ63-͔Βμ΢ϯϩʔυ ‣ http://goo.gl/oe0jG
  15. ϛχϚϜͳ)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}"/>
  16. ϛχϚϜͳ)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}
  17. ϛχϚϜͳ)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}
  18. ϛχϚϜͳ)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}
  19. $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; }