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

ܳज़৘ใԋश 8FC 5VNCMSΛ࢖͏̏ ΧελϜ)5.-ςʔϚͷ࡞੒ ೥݄೔ ౦ژ᥁ज़େֶܳज़৘ใηϯλʔ ".$ ୲౰ɿాॴ३

ࠓ೔ͷ಺༰ ‣ 5VNCMSͷΧελϜ)5.-ςʔϚͷ࡞੒ ‣ ͭ·Γɺ5VNCMSͷςʔϚΛ·ͬ͞Βͳঢ়ଶ͔Β࡞ͬͯΈΔ ‣ ໨ࢦͤςʔϚൢച

5VNCMSͷΧελϜ)5.-ςʔϚͷ࡞੒

5VNCMSͷΧελϜ)5.-ςʔϚͷ࡞੒ ‣ 5VNCMSͷςʔϚΛ׬શʹ·ͬ͞Βͳঢ়ଶ͔Β࡞Δ͜ͱ΋Մೳ ‣ ࠷΋ৄ͍͠υΩϡϝϯτ͸ɺ5VNCMSͷαΠτʹ͋Δࢿྉ ‣ IUUQXXXUVNCMSDPNEPDTFODVTUPN@UIFNFT

5VNCMSͷΧελϜ)5.-ςʔϚͷ࡞੒ ‣ ΧελϚΠζͷը໘Λදࣔ͢Δʹ͸ ‣ %BTICPBSEͰɺΧελϚΠζ͢ΔϒϩάΛબ୒͠ɺ$VTUPNJ[F5IFNFϘλϯΛԡ ͢

5VNCMSͷΧελϜ)5.-ςʔϚͷ࡞੒ ‣ දࣔ͞ΕΔΧελϚΠζը໘ͷࠨίϥϜͷαϜωΠϧ௚Լʹ͋Δɺ&EJU)5.-Ϙλϯ Λԡ͢

5VNCMSͷΧελϜ)5.-ςʔϚͷ࡞੒ ‣ ͜͜ʹදࣔ͞ΕΔ)5.- ͱ಺แ͞ΕΔ$44 Λฤू͍ͯ͘͠

5IVNCMSͷΧελϜ)5.-ςʔϚͷ࡞੒ ‣ ΧελϜ)5.-ͷ֬ೝ༻ʹɺશͯͷछྨͷ౤ߘΛςετ༻ϒϩάʹ͓ͯ͘͠ ‣ 5FYU 1IPUP 2VPUF -JOL $IBU "VEJP
7JEFP

7BSJBCMFͱ#MPDL

7BSJBCMF ม਺ ͱ#MPDL ϒϩοΫ ‣ ΧελϜ)5.-࡞੒ͰॏཁͱͳΔ5VNCMSઐ༻ͷͭͷԋࢉࢠ ‣ )5.-ͷதʹຒΊࠐΜͰ࢖༻͢Δ ‣ 7BSJBCMF
ม਺ ‣ λΠτϧ΍هड़ͳͲɺಛఆͷσʔλΛૠೖ͢Δ ‣ #MPDLɹ ‣ σʔλͷू·ΓΛૠೖ͢Δ ‣ ΠϯσοΫεϖʔδɺݸผͷهࣄɺφϏήʔγϣϯͳͲ {ʬVariable໊ʭ} {block:ʬBlock໊ʭ} ... {/block:ʬBlock໊ʭ}

7BSJBCMFͱ#MPDL ‣ 7BSJBCMFͷهड़ྫ <h1>{Title}</h1> <h2>{PostTitle}</h2> <p>{Description}</p>

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}

5VNCMSςϯϓϨʔτͷߏ଄

5VNCMSςϯϓϨʔτͷߏ଄ html head body {Title} {block:SearchPage} {block:Posts} {block:Pagination} {block:Photo} {block:Quote}
{block:Video} {block:Audio} {block:Text}

{block:Video} {block:Audio} {block:Text} ϒϩάͷλΠτϧΛදࣔ

{block:Video} {block:Audio} {block:Text} ϒϩάͷλΠτϧΛදࣔ ݕࡧ݁ՌΛදࣔ

{block:Video} {block:Audio} {block:Text} ϒϩάͷλΠτϧΛදࣔ ݕࡧ݁ՌΛදࣔ ༷ʑͳλΠϓͷ౤ߘΛදࣔ

{block:Video} {block:Audio} {block:Text} ϒϩάͷλΠτϧΛදࣔ ݕࡧ݁ՌΛදࣔ ༷ʑͳλΠϓͷ౤ߘΛදࣔ ςΩετ

{block:Video} {block:Audio} {block:Text} ϒϩάͷλΠτϧΛදࣔ ݕࡧ݁ՌΛදࣔ ༷ʑͳλΠϓͷ౤ߘΛදࣔ ςΩετ ࣸਅ

{block:Video} {block:Audio} {block:Text} ϒϩάͷλΠτϧΛදࣔ ݕࡧ݁ՌΛදࣔ ༷ʑͳλΠϓͷ౤ߘΛදࣔ ςΩετ ࣸਅ Ҿ༻

{block:Video} {block:Audio} {block:Text} ϒϩάͷλΠτϧΛදࣔ ݕࡧ݁ՌΛදࣔ ༷ʑͳλΠϓͷ౤ߘΛදࣔ ςΩετ ࣸਅ Ҿ༻ ϏσΦ

{block:Video} {block:Audio} {block:Text} ϒϩάͷλΠτϧΛදࣔ ݕࡧ݁ՌΛදࣔ ༷ʑͳλΠϓͷ౤ߘΛදࣔ ςΩετ ࣸਅ Ҿ༻ ϏσΦ Ի

{block:Video} {block:Audio} {block:Text} ϒϩάͷλΠτϧΛදࣔ ݕࡧ݁ՌΛදࣔ ༷ʑͳλΠϓͷ౤ߘΛදࣔ ϖʔδૹΓػೳ ςΩετ ࣸਅ Ҿ༻ ϏσΦ Ի

ϛχϚϜͳ)5.-ͷ࡞੒ ‣ ·ͣɺΧελϜ)5.-ͷ࣮ݧͱͯ͠ϛχϚϜͳ)5.-Λ࡞੒ͯ͠Έ·͢ ‣ ϛχϚϜͳ)5.-͔Βঃʑʹຊ֨తͳςʔϚ΁ͱൃల͍͖͍ͤͯͨ͞ ‣ ·ͣ͸ɺ5VNCMSͷλΠτϧͱઆ໌Λදࣔͯ͠Έ·͠ΐ͏

ϛχϚϜͳ)5.-ͷ࡞੒ ‣ 5VNCMSͷλΠτϧͱઆ໌Λදࣔ <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" />
<title>{Title}</title> </head> <body> <h1>{Title}</h1> <p>{Description}</p> </body> </html>

ϛχϚϜͳ)5.-ͷ࡞੒ ‣ λΠτϧͱઆ໌͕දࣔ͞ΕΔ

ϛχϚϜͳ)5.-ͷ࡞੒ ‣ ࣍ʹ౤ߘΛදࣔ͠·͠ΐ͏ ‣ ౤ߘը໘͸ɺ1PTUTϒϩοΫͷதʹɺछྨʹԠͯ͡ϙετͷϒϩοΫΛ഑ஔ͍ͯ͘͠ ‣ ·ͣ͸ɺ1IPUP ࣸਅ ͷ౤ߘͰ࣮ݧ

ϛχϚϜͳ)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>

ϛχϚϜͳ)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: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>

ϛχϚϜͳ)5.-ͷ࡞੒ ‣ ࣸਅͷΩϟϓγϣϯ΋දࣔ

ϛχϚϜͳ)5.-ͷ࡞੒ ‣ ͜ͷཁྖͰશͯͷ౤ߘͷλΠϓΛ໢ཏ͍ͯ͘͠ ‣ 5FYU ‣ 1IPUP ‣ 2VPUF ‣
-JOL ‣ $IBU ‣ 7JEFP ‣ "VEJP ‣ ͪΐͬͱ௕͍ͷͰɺԼهͷ63-͔Βμ΢ϯϩʔυ ‣ http://goo.gl/oe0jG

ϛχϚϜͳ)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}"/>

ϛχϚϜͳ)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}

ϛχϚϜͳ)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}

ϛχϚϜͳ)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}

ϛχϚϜͳ)5.-ͷ࡞੒ ‣ ͞ΒʹࣸਅͷΩϟϓγϣϯ΋දࣔͯ͠ΈΔ </div> </body> </html>

ϛχϚϜͳ)5.-ͷ࡞੒ ‣ ࣮ࡍʹϖʔδΛ։͍ͯΈͯɺ౤ߘͨ͠શͯλΠϓ͕දࣔ͞Ε͍ͯΔ͜ͱΛ֬ೝ

$44Λ௥Ճ

$44Λ௥Ճ ‣ $44͸ɺ)5.-ϑΝΠϧͷIFBEཁૉ಺ʹ௚઀௥Ճ͢Δ ‣ TUZMFཁૉͰғΜͰɺͦͷதʹ$44Λهड़͢Δ ‣ ؆୯ͳαϯϓϧͰղઆ͠·͢

$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; }

$44Λ௥Ճ ‣ ϖʔδʹσβΠϯ͕෇Ճ͞Εͨ

$44Λ௥Ճ ‣ ͜ͷํ๏Ͱɺ͜Ε·ͰֶΜͰ͖ͨ)5.-ͱ$44ͷ஌ࣝΛۦ࢖ͯ͠ɺ5VNCMSΛΧελ ϚΠζ͍ͯ͘͠ ‣ ࣍ि͞Βʹࡉ͔ͳςΫχοΫʹ͍ͭͯ୳ٻ͍͖ͯ͠·͢

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

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

More Decks by Atsushi Tadokoro

Other Decks in Technology

Featured

Transcript

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