반응형 티스토리 스킨 개조기

블로그 관리 2014. 4. 23. 00:59

Origin- http://onasaju.tistory.com/251 (방문하시면 블로그 운영에 필요한 많은 정보를 얻을 수 있습니다.)

여기에 옮겨진 글은 혹시 사라지면 하고 염려되어 .....

준비물

FastBoot v1.5 스킨 | 다운로드

기존에 사용하던 티스토리 스킨 다운로드(관리자 > 스킨 > 스킨 다운로드)

텍스트 에디터인 SublimeText | 다운로드

구글의 크롬 브라우저 | 다운로드

기존 사용하던 내용을 옮기는 방법

우선은 서브라임텍스트를 설치하고 실행 해 주세요! 그리고 다운받은 두 스킨이 있는 폴더를 모두 선택해서 '드래그앤드롭'으로 서브라임 텍스트의 왼쪽 사이드 바에 추가 해 주세요!

추가하고 나면 해당 폴더내에 있는 파일 및 서브폴더가 목록에 추가가 되는데요. 우리가 여기서 주로 보게 될 파일은 skin.html 입니다. 사용자마다 사용하는 플러그인, 위젯, 스크립트, 태그 들이 다르기 때문에 공통적인 사항과 개인적으로 사용하고 있는 항목들을 옮기고 수정하는 것을 보여 드리겠습니다.

우선은 각 스킨의 폴더에 있는 목록에서 skin.html을 더블클릭해서 활성화 시켜 주세요! 이전 포스트에서도 설명 했지만, 'FastBoot v1.3' 반응형 스킨은 초보자들도 다운받아서 바로 사용할 수 있도록 제작 되어서 수정 해주어야 할 부분이 거의 없을 정도로 초보 사용자에 초점을 맞춰 제작 되었습니다.

반대로 해석하면, 있어야 할 사항들이 제외되서 새롭게 추가를 해줘야 한다는 얘기로도 해석이 가능 합니다. 중요하다면 중요하고, 중요하지 않다면 중요하지 않은 사항들 입니다. 필요한 사람들만 관련 태그를 추가 해 주면 되겠습니다.

메타 태그 작성(수정)

저는 <head>...</head>에 구글 웹로그 분석, 구글 웹마스터 도구, bing 웹 마스터 도구, 네이버 애널리틱스, 등의 소스 코드들이 삽입 되어 있어서 '복사' 후 '붙혀넣기' 하는 방식으로 삽입 해 줬습니다. 기존에 사용하던 스킨에서 소스 코드를 붙혀넣고 사용했던 분들은 추가적인 설명 없이도 잘 할 수 있다는 전제하에 생략 하도록 하겠습니다.

<html lang="ko"> fastboot의 skin.html 상단에 있는 HTML 태그에 랭귀지(언어)를 한국어로 된 페이지라고 선언을 해 주었습니다. 이렇게 선언을 해 주지 않으면 기본값으로는 'en' 영어로 브라우저가 인식을 하게 됩니다.

이렇게 해당 웹 문서를 구성하고 있는 언어를 선언 해 주지 않아도 똑똑한 브라우저들은 자동으로 해당 웹페이지에서 사용되는 언어를 인식 한다고 합니다. 그리고 <head>아래에 기존 스킨에서 사용하던 meta 태그 및 스크립트 소스 코드들을 붙혀넣기 해 주세요! 을 달아서 구분 지어주는 것은 필수 요소인거 아시죠?

메타 네임 어썰? 이라고 하는 것은 현재 블로그에 컨텐츠를 포스트를 작성한 저자, 작자를 표기하는 태그 입니다. 당연히 블로거 주인이 저자가 되겠죠? 티스토리에서는 이 부분에 대해서도 치환자를 제공하고 있습니다.

##_blogger_## 는 티스토리 블로그에서 사용하고 있는 이름 혹은 필명이 됩니다.

skin.html 상단에는 head 태그 안에 들어가야 하는 요소들을 붙혀넣어 주고, 하단 /body 태그 위에는 기존 스킨에서 사용하던 플러그인 스크립트들을 붙혀넣어 주세요! 물론 기존에 사용하던 플러그인 스크립트들이 없다면 생략해도 되는 사항 입니다.

저는 디스커스 소셜 댓글, 페이스북 소셜 플러그인, spot im 채팅방 플러그인 소스 코드들을 /body 위에 붙혀넣기 하고, 관련 HTML 태그는 적절한 위치에 삽입 해 줬습니다.

디스커스 댓글이 보여지는 태그는 '태그트레일'이 시작되는 요소 위에 넣어 줬습니다. 찾아보니 본문 영역 바로 아래가 태그트레일이 있는 곳 이더라고요.

<!--F 포스트 본문 내용 -->
<div class="article">
##_article_rep_desc_##
</div>
<!--F 태그트레일 -->
<s_tag_label>

태그트레일 주석 위에, 본문 영역이 끝나는 /div 아래에 디스커스 댓글 태그를 넣어 주면, 본문 하단부에 이쁘게 자리잡게 됩니다. 다른 요소들도 이와같은 방법으로 찾아서 적절한 위치에 기존에 사용하던 소스 코드들과 태그를 붙혀넣기 해 줄 수 있습니다.

기존 스킨에서 사용하던 CSS 스타일시트 추가하기!

기존에서 사용자가 직접 만든 스타일시트를 사용하고 있었다면, 이러한 CSS 들도 옮겨줘야 하는데요. 그렇지 않으면 해당 스타일시트에 최적화 시켜서 작성했던 기존의 게시물의 내용물이 다르게 보여질 수 있기 때문 입니다.

FastBoot 스킨에서 적용된 스타일시트를 수정 할때는 그냥 검색해서 수정을 해 주고, 사용자가 지정하고 싶은 스타일시트를 새롭게 추가하고자 할 때는 주석을 달아서 구분지어 주는 것이 좋습니다.

/* onasaju가 추가한 스타일시트 시작*/
.stylesheet {property:value;}
/* onasaju가 추가한 스타일시트 끝 */

FastBoot 스킨에서는 본문 영역(포스트, 기사)이 아래와 같이 치환자와 함께 아티클이라는 클래스 명으로 지정되어 있습니다.

<div class="article">
##_article_rep_desc_##
</div>

새롭게 추가하고자 할 때는 주석을 달아서 구분지어 주는 것이 좋습니다.

본문 영역에 추가하고싶은 스타일속성이 있다면 .article p {color:blue;} 이와 같은 방식으로 추가할 수 있습니다. 이렇게 추가하게 되면 본문 영역에서 사용되는 p(단락) 태그에 사용되는 텍스트 글자의 색상이 파란색으로 변경이 되는 구조 입니다.

제 블로그에서 본문 영역에 사용되는 태그 관련 몇가지 스타일시트 속성을 공개 하겠습니다. 필요하신분들은 사용하셔도 되며, 스타일시트의 속성과 값에 대해서 기본적인 지식이 있으신 분들은 수정해서 사용하셔도 됩니다.

/* =========== Onasaju Style Start =========== */
/* 네비게이션 바 기본값 */
.navbar-default{
  border:none; 
  background-color: #F08DC8 !important; /* 상단 메뉴바의 색상이 현재 제 블로그는 핑크색이죠? 메뉴바의 색상을 변경할 때 사용하세요!
}
/*strong tag color */
.article strong {color: #800000;} /* 스트롱 태그가 사용되는 텍스트의 색상을 어두운 빨강으로 지정 했습니다. */
/*pre tag */
.article pre { /*지금과 같은 소스코드를 입력할 때 사용하는 pre 태그의 스타일 속성과 값 입니다. */
  font: 14px/22px normal helvetica, sans-serif;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  border-left: 10px solid #ccc;
  background-color: darkgrey;
  color: black;
  overflow: auto;
}
/* h2 태그 */
.article h2 { 
  font-size: 18px; /* 글자 크기 */
  border-bottom: 1px dotted #000; /* 아래쪽에 경계선 점선, 색상은 검정 */
  border-left: 10px solid #008000; /* 왼쪽 경계선 두께 10픽셀, 실선, 녹색 */
  padding: 1px 0px 10px 10px; /* 안쪽여백이며 위,우,아래,좌 순 입니다. */
  margin: 5px 0px 10px 0px; /* 바깥여백이며 순서는 위와 동일 합니다. */
  letter-spacing: 1px; /* 글자 간격 입니다. */
  word-spacing: 1px; /* 단어 간격 입니다. */
}

/* block quote */

.article blockquote {
  font: 14px/20px italic Times, serif;
  background-color: #EEEEEE;
  background-image: url(images/openquote1.gif);
  background-position: top left;
  background-repeat: no-repeat;
  border-left: 10px solid #F5A431;
  padding: 23px;
}
/* =========== Onasaju Style End =========== */

이외에도 많은 스타일시트를 기존에 사용하던 스킨에서 가져와서 붙혀넣기를 해 주었는데요. 다른 분들도 공용으로 사용할만한 스타일시트를 간추려보니 대략적으로 위와 같은 항목들이 남게 됐습니다.

blockquote 에서 사용되는 이미지 파일은 아래에 첨부하니, 다운받으셔서 '파일 업로드'를 통해 사용할 수 있습니다. 그리고 blockquote 관련 스타일 속성은 이미 존재하기 때문에, .article blockquote 로 검색해서 찾고, 수정 혹은 추가 해 줄 수 있습니다. FastBoot 스킨에서 제공하는 인용문 태그 blockquote 도 깔끔하게 구성되어 있으므로 기본값 그대로 사용하셔도 됩니다.

'블로그 관리' 카테고리의 다른 글

티스토리 동영상 올리기 (2)	2015.06.28
워드프레스 테마제작용 테마 (1)	2013.09.29
joyutil삭제하기 (0)	2013.09.27
syntax highlight (0)	2013.08.25
SKIN TEST 2 (0)	2013.08.23

ABOUT ME

한적한 인생을 꿈꾸며 한적한 인생을 꿈꾸며

'블로그 관리' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'블로그 관리' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바