티스토리 스킨 제작 시 치환자를 써야하기에 에디터를 사용하는 것보다 티스토리 안에 있는 'HTML/CSS 편집'을 사용하는 것이 편리합니다. 그런데 이 도구를 사용하려면 스킨이 저장되어 있어야 합니다. 앞서 작성했던 index.xml 포함 이번에 소개할 skin.html과 style.css 가 꼭 있어야 합니다. 여기서 처음부터 skin.html과 style.css를 'HTML/CSS 편집'에서 작성하면 좋겠지만 아무런 내용도 없는 파일은 스킨 저장이 되지 않기에 저는 레이아웃을 정하면서 skin.html과 style.css 내용을 채웠습니다.


skin.html


<!doctype html>

<html lang="ko">

<head>

    <title>[##_page_title_##]</title>

    <meta charset="utf-8">

    <meta name="description" content="[##_desc_##]">

    <meta name="author" content="[##_blogger_##]">

    <meta name="keywords" content="티스토리, 로그래밍, HTML, CSS">

    <meta name="robots" content="티스토리, 프로그래밍, HTML, CSS">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="alternate" type="application/rss+xml" title="[##_title_##]" href="[##_rss_url_##]" >

    <link href="./style.css" rel="stylesheet" type="text/css">

    <script src="./images/prefixfree.min.js"></script>

    <!--[if lt IE 9]>

<script src="./images/html5shiv.js"></script>

    <![endif]-->

</head>

<body>

<s_t3>

<header></header>


<div id="article"><article></article></div>


<aside></aside>

<footer></footer>

</s_t3>

</body>

</html>


관련글 : HTML 문서 기본 구조 !doctype, html, head, body 

관련글 : style과 link, 그리고 CSS 선택자

관련글 : HTML5 시맨틱 태그 header, nav, section, article, aside, footer


빨간색으로 표시한 부분은 치환자 및 꼭 넣어야 하는 태그들입니다. 그외 구성요소는 위에 링크들을 보시면 아실 수 있습니다.


style.css


@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);

*{margin:0; padding:0; font-family: 'Nanum Gothic', sans-serif; color:black; text-decoration:none;}


header{

    width:100%;

    background-color:black;

    

    height:100px;

}

#article{

    width:100%;

    float:left;

    margin-right:-340px;

    

    height:100px;

    background-color:yellow;

}

article{

    margin-right:340px;

}

aside{

    width:340px;

    float:right;

    

    height:100px;

    background-color:green;

}

footer{

    clear:both;

    width:100%;

    

    height:100px;

    background-color:blue;

}


사실 flex로 레이아웃을 지정하려고 했지만 문제점이 발생되어 float로 레이아웃을 만들었습니다.

빨간색으로 표시한 부분처럼 설정해놓으면 aside는 340px 너비 고정, article 너비 값만 유동적인 2단 레이아웃을 만들 수 있습니다.



위에 설정값대로 스킨을 저장하면 이렇게 뜰 텐데요. 이렇다보니 운영중인 블로그에서 하기에는...;;; 

저같은 경우도 따로 블로그를 새로 만들어서 스킨 테스트로 사용하고 있습니다.


스킨등록시 index.xml, skin.html, style.css 파일이 필수이다. 하나라도 없으면 스킨 등록이 안된다.
이 중에서 가장 먼저 알아볼 것은 index.xml이다. 이에 대한 설명은 tistory.com/guide/skin/step5에 있지만..
작성한 내용이 어디로 입력되는지 궁금해서 알아보다가 알게 된 내용을 포스팅 하게 되었다.


<?xml version="1.0" encoding="utf-8"?>

<skin>

<information></information>

<author></author>

<default></default>

</skin>


가장 큰 단위로는 information, author, default가 있다.


information

<information>

<name>Mini</name>

<version>1.0</version>

<description><!CDATA[ 2단 레이아웃으로 가장 기본인 글의 초점을 맞추었습니다. ]]</description>

<license><!CDATA[ 재배포 금지, 저작권 표시하에 자유롭게 수정이 가능합니다. ]]</license>

</information>


author

<author>

<name>Minimelody</name>

<homepage>http://minimelody.tistory.com</homepage>

<email>minimelodi@naver.com</email>

</author>


default

<default>

<showListOnCategory>1</showListOnCategory> (카테고리 - 0 : 숨김, 1 : 보임)

<showListOnArchive>1</showListOnArchive> (글보관함 - 0 : 숨김, 1 : 보임)

<tree>

<activeColor>000000</activeColor>

<activeBgColor>eeeeee</activeBgColor>

<color>000000</color>

<bgColor>ffffff</bgColor>

<labelLength>27</labelLength>

<showValue>1</showValue> (카테고리 글 수 - 0 : 숨김, 1 : 보임)

</tree>

</default>


<default>

<contentWidth>760</contentWidth>

</default>


<default>

<itemsOnGuestbook>10</itemsOnGuestbook>

<expandComment>1</expandComment> (댓글 - 0 : 닫힘, 1 : 펼침)

<expandTrackback>0</expandTrackback>(트랙백 - 0 : 닫힘, 1 : 펼침)


<recentEntries>5</recentEntries> 

<lengthOfRecentEntry>27</lengthOfRecentEntry>

<recentComments>5</recentComments>

<lengthOfRecentComment>30</lengthOfRecentComment> 

<recentTrackbacks>5</recentTrackbacks>

<lengthOfRecentTrackback>30</lengthOfRecentTrackback> 

<lengthOfRecentNotice>25</lengthOfRecentNotice>

<lengthOfLink>30</lengthOfLink>

<tagsInCloud>30</tagsInCloud>

<sortInCloud>3</sortInCloud> (1 : 인기순, 2 : 이름순, 3 : 임의순)

</default>


<default>

<commentMessage>

<none></none>

<single></single>

</commentMessage>

<trackbackMessage>

<none></none>

<single></single>

</trackbackMessage>

</default>


트랙백은 물론, 댓글 조차도 설정하지 않았다. 댓글 조차 설정하지 않은 이유는 HTML/CSS 편집을 해도 여기에 설정한 값이 나타나서이다. 처음에는 이걸 잘 몰라서 멋대로 작성되는 바람에 짜증이 날 정도였으니. 결국 이게 문제인 걸 알고는 아예 삭제했다.


현재 '구글 애드센스로 돈 벌기'라는 책을 읽고 티스토리에 반영하고 있는데요. 가장 큰 고민이 '스킨'이었습니다. 기존 스킨 중에서는 '수익 극대화에 최적화된 4가지 레이아웃'에서 소개된 첫번째 레이아웃에 적합한 것이 없드라구요..


그래서 결국 직접 제작하기로 결심하고
HTML과 CSS를 공부하기에 이르렀습니다....


그리고 미완성이지만 어쨌든 완성한 첫번째 스킨 입니다.



보시다시피 애드센스 광고가 적합한 위치에 제대로 들어가 있습니다.
현재 디자인 되어 작동하는 기능은 가장 기본인 글과 카테고리 부분입니다.


좀 더 작업을 하고 오픈을 할까 하다가 이 기능만으로도 동작하는 데 무리가 없어 바로 오픈 했는데요.


저작권 표시하에 자유롭게 수정이 가능합니다. 단, 재배포 금지!
아직 반응형 스킨이 아니라 모바일웹은 ON으로 해주셔야 됩니다.


구글이나 다음은 잘 검색되지만.. 역시나 네이버 ㅠㅠ..

이번 포스팅이 계속 검색 되지 않는 것을 보니 스킨을 중간에 바꾸면 검색되지 않는다는게 사실인가 봅니다.


처음 티스토리로 왔을 때를 생각하면서 다시 힘내보겠지만.. 이제 막 포스팅들이 검색되기 시작했는데

다시 시작하려니 암울하기도 하고.. 앞으로의 포스팅들도 검색되지 않는 다고 생각하니 힘빠지지만..


그래도 방법을 찾아가는 게 맞다 판단하고 밀어붙이려고 합니다.


이후 포스팅은 스킨 제작 과정을 낱낱히 밝혀내려고 하는데요.

스킨 제작하는 데 도움이 되셨으면 좋겠습니다.


  1. 티스토리 잼나는 블로그 입니다.

  2. 딸래미아빠 2017.11.08 21:06 신고

    다운은 어디서 받아요??

    • 미니멜로디 2017.11.08 23:27 신고

      죄송합니다ㅠ 이 스킨은 사용하다보니 부족한 게 많아서 현재 새 스킨 제작중입니다. 빠르면 내일.. 이번주내로 제작완료하고
      새롭게 올릴 예정입니다. 무료스킨으로 제공할 예정이니 그때 확인해보시고 괜찮다 싶으면 다운받게끔 올려놓을게요!

  3. 딸래미아빠 2017.11.09 07:47 신고

    네^^

+ Recent posts