skin.html 및 style.css 소스 중 일부(때론 ; 기호 하나)가 빠질 경우, 스킨 레이아웃이 이상하게 변하거나 블로그가 엉망이 되는 수가 있습니다. 꼭 집중해서 따라하세요.
그렇게 어렵다는 티스토리 블로그 초대장을 받아서 내 블로그를 개설했다. 하지만 이제부턴 힘든 노가다 작업이 기다리고 있다. 지레 겁먹지 말고 하나씩 차근차근 따라해 보자. 초보 블로거의 입장에서 무작정 내 블로그를 운영하면서 만날 수밖에 없는 시행착오를 상당부분 비켜갈 수 있을 것이다.
이 글은 블로그를 막 개설한 초보자에게 유용하다. 하나하나 따라해 가다 보면 막막하기 그지 없던 내 블로그 뼈대 세우기 및 옷 입히기가 어느 정도 완성되어 있다는 것을 알 수 있을 것이다. 그리고 끝까지 따라하다 보면 이제 스스로 내 블로그에 필요한 기능을 찾아서 스스로 해결할 수 있다.
+ 열심히 티스토리해서 베스트 블로그 되자. 베스트 블로그와는 전혀 관련이 없는 열린영어의 블로그.
+ 들어가기 전에: 티스토리 주요 링크
1) 티스토리 FAQ
2) 티스토리 포럼
3) 티스토리 고객센터
4) 티스토리 스킨가이드
+ 들어가기 전에(2): 맛보기 간단 기능
티스토리 본문글 작성시 간단하면서도 유용한 기능 중 하나가 바로 [더보기] 기능이다. 글 펼치기/접기 기능으로 생각하면 더 이해하기 쉽다. 글을 읽다 보면 굳이 읽지 않고 그냥 지나쳐도 되는 부분이 생길 수도 있다. 이때 특정 부분은 방문자들에게 선택권을 주는 기능이다.
아래를 보자. 몸 풀기 차원에서 티스토리 설정과는 관련이 없는 오늘자 클라라 한복 뉴스를 하나 퍼왔다. 아마 지금 여러분들 눈에는 그 뉴스가 보이지 않을 것이다. 그러데 [더보기] 링크를 클릭하면 기사가 밑으로 펼쳐지면서 볼 수 있다. 다시 [접기]를 클릭하면 원위치 된다. 이제 무슨 말인지 알 수 있을 것이다. 이것이 유용한 [더보기(펼치기)/접기] 기능이다. 이 기능은 간단히 글쓰기 상단에 보이는 [더보기] 아이콘만 클릭하면 된다.
즉, 글을 감추고 싶은 부분이 [이 부분 글을 감추기] 라면 해당 영역에 마우스로 블록을 설정하고, 위에 보이는 [더보기]아이콘을 클릭하면 된다. 그러면 점선 박스가 생기면서 글을 감출 수 있게 된다.
이제 부터 얘기하는 모든 내용은 [관리자] 모드(화면)에서 진행되는 것들이다. [관리자 모드]에 대해서 잘 모른다면 아래를 클릭하자.
+ 화면설정
[화면설정]이 이미 되어 있거나 알고 있는 내용이라면, [플러그인 설정]으로 건너 뛴다.
티스토리 블로그 개설 후 제일 먼저 찾아야 할 곳이 바로 화면출력 페이지이다. [관리자 모드] => [화면설정] => [화면출력] 순서대로 클릭.
1) 우선 기본화면 설정을 하자. 블로그에 처음 접속했을 때 나타나는 글의 개수를 지정하는 것이다. 기본화면 설정이 제대로 되어 있지 않으면 블로그가 지저분하게 보인다. 예를 들어, 기본화면 글 출력개수를 10개로 지정해 놓았다면 내가 블로그에 쓴 글들이 10개씩 출력이 된다. 깔끔하지가 못하다.
2) 선택화면: 블로그 개설 후 반드시 제일 먼저 설정해줘야 하는 부분이다. '선택화면'이란 특정 카테고리(메뉴)를 클릭했을 때 나타나는 결과 페이지이다. 검색결과 페이지 역시 선택화면에 속한다. 말 그대로 전체 페이지 중에서 검색방법 등에 따라 일부(특정) 페이지만 출력되는 것이다. 여러분이 검색창에 '티스토리'을 입력했을 때 나타나는 '티스토리' 단어가 포함된 게시물 목록이 바로 선택화면이다. 그런데 [선택화면]을 잘못 설정하면 블로그가 지저분하게 보이기 때문에 주의를 기울여야 한다. 예를 들어, 선택화면 옵션을 글목록 20개, 출력옵션을 <제목 + 내용>으로 설정했을 경우엔, 모두 20개의 글이 출력이 된다. 단 옵션이 <제목 + 내용>이기에 20개 글 모두 제목과 내용이 모두 출력이 되는 것이다.
무슨 말인지 모르겠다면, 다시 설명해 보자. 아래 그림은 본 블로그 [영화 속 명대사]를 클릭했을 때 나타나는 선택화면이다. 즉 영화 속 명대사 카테고리의 글제목들이다. 보다 시피 모두 70개의 명대사 중에서 그중 5개씩 묶어서 출력된다. 명대사 '제목'만 보이는 것은 옵션 설정시 <제목>만 설정했기 때문이다. 만약 <제목 + 내용>을 선택했다면, 제목과 내용이 모두 출력되면서 5개의 글 제목과 내용을 모두 한페이지에서 다 봐야 하기 때문에 정신도 없을 뿐더라 외관도 깔끔하지 못하다.
3) 펼침 설정: 댓글 펼침에 체크해 놓으면 게시물에 달린 댓글 제목과 내용이 그대로 출력이 된다. 체크를 해제하면 댓글이 몇개가 달려있다는 알림글만 노출되고 해당 알림을 클릭해야 댓글을 볼 수 있다. 게시물에 달린 댓글이 많아서 블로그 화면을 깔끔하게 처리하고 싶을 때는 [댓글 펼침]을 해제하면 된다. 트랙백도 동일하다.
4) 최근글: 내 블로그 게시물을 최신순으로 정렬해서 보여준다. 별도의 설정이 없어도 언제나 최신순으로 글이 정렬된다. 보통 5개-10개 정도로 설정해 주면 된다. 출력개수 보다 중요한 게 뒤에 보이는 글자수 조절이다. 사이드바 영역은 그 폭이 제한되어 있는데, '글자수'를 너무 높이 설정해 놓으면 아래와 같은 현상이 발생한다. 만약 사이드바 최근글 글제목이 두줄, 세줄로 겹쳐 나오는 현상이 발생하면, '글자수'를 조절해서 해결해야 한다.
5) 링크: 링크 제목 글자수 지정
6) 태크: 사이드바에 있는 '태크 클라우드'를 통해 노출되는 태그 개수 지정. 30-40개가 적당하다.
7) 최근 보관함: 글 보관함이다. 내가 작성한 글을 월 단위로 보관해서 보여준다. 7월에 30개, 8월에 10개.. 이렇게 나타난다.
+ 플러그인 설정
기본화면 설정이 끝났으면 [플러그인 설정]으로 들어간다. 플러그인 설정을 통해 비로소 내 티스토리 블로그에 생명을 불어넣게 된다. 그리고 플러그인 설정이 선행되어야만 아래에서 다룰 사이드바를 사용할 수 있다. 이제 막 개설된 내 블로그는 한없이 초라하게만 보인다. 단촐한 메뉴 몇개만 보이지 않는가. 옆동네 아무개 블로그를 방문해 보면 별의 별 기능이 다 탑재되어 있어서 그 모양새가 가히 위압적이다.
+ 마우스 오른쪽 클릭 방지: 방문자들이 내 블로그 글이나 사진을 함부러 복사해 가지(긁어 가지) 못하도록 하는 장치다. 불펌방지기능인 셈이다.
+ 지역로그(위치로그) 표시: 이 옵션을 활성화시켜야 [지역로그] 기능을 사용할 수 있다. 지역로그는 무엇이며 어떻게 사용하는지 알고 싶다면 여기를 클릭하자.
+ 유입 키워드: 관리자 화면에서 내 블로그로 유입된 키워드 확인을 할 수 있다.
+ 방문자 통계: 내 블로그를 다녀 간 방문자 통계를 간단히 확인가능.
+ 이전 글1 링크 삽입: 글을 작성하다 보면 예전에 이미 작성해 놓은 관련글을 함께 링크를 걸고 싶을 때가 있다. 그때 [이전 글]을 클릭하면 원하는 글을 링크를 걸어 놓을 수 있다.
+ Daum View: 다음뷰에 내글 보내기를 하려면 역시 설정을 해준다.
+ 관리 및 통계: 내 블로그 유입내역 및 통계를 알고 싶다면 이 플러그인을 활성화 시켜야 한다.
+ 카테고리 글 더보기2는 본문 하단에 동일한 카테고리의 글을 더 볼 수 있는 박스를 출력시키고 싶다면 이 설정에 체크를 한다. 목록개수는 출력되는 글의 개수이고, 색상은 박스의 색상이다.
+ 글 설정
이제 [글설정]으로 들어가 보자.
[관리자] => [글 설정] => [글 환경] 순서대로 클릭한다. 내 블로그 글을 다른 방문자에게 공개하고 싶다면 [공개]를 선택한다. 남들에게 보여 주기 싫다면 물론 비공개에 체크한다. 방명록 및 댓글 권한도 마찬가지다. 모든 방명록/댓글 권한을 제한하고 싶다면 [로그인 사용자]에 체크. 댓글의 경우 관리자가 댓글을 확인하고 블로그에 나타나도록 하고 싶다면 [관리자 승인 후 출력]에 한번 더 체크한다. [발행]도 있으니 확인해 두자. 내가 쓴 글을 페이스북이나 트위터 등으로 전송하고 싶을 때 [발행]에 체크하면 된다. 물론 소셜 네트워크 사이트에 가입이 되어 있어야 한다.
+ 사이드바 설정 및 배치하기
[사이드바 설정]은 티스토리 블로그를 처음 꾸밀 때 사실상 전부라고 해도 과언이 아니다. 티스토리 블로그의 기본 뼈대는 바로 사이드바 설정과 함께 시작된다. 아래는 모두 사이드바 메뉴에 관련된 것들이다. [사이드바] 메뉴를 사용할 수 있기 위해서는 위에서 이미 설명한 [플러그인 설정]에서 해당 사이드바와 관련된 플러그인을 설정해줘야 한다. 예를 들어, 사이드바에 [태그 입력기]를 사용해서 다양한 메뉴를 삽입하고 싶다면, [플러그인 설정]에서 [태그 입력기] 사용에 체크를 해줘야 한다. 플러그인 설정을 거치지 않으면 사이드바 기본 모듈에 [태그 입력기] 모듈이 보이지 않는다.
1) 빈줄 표시: 사이드바 사이에 수직으로 약간의 공간이 생기도록 한다.
2) 방문자 그래프: 내 블로그에 다녀간 방문자수를 일주일 단위로 보여주는 그래프를 보여준다.
3) 최근 포스트 모듈: 블로그에 등록된 글이 최신순으로 정렬되어 올라온다.
4) 태그목록 모듈: 내 블로그에 등록된 태그를 보여준다. 출력되는 태그 개수는 관리자 화면 '화면 설정'에서 선택이 가능하다.
5) 최근 댓글 모듈: 내 블로그에 달린 댓글들이 최신순으로 정렬되어 나타난다.
6) 공지사항 모둘: '공지'로 지정된 글을 최신순으로 정렬해서 보여준다.
7) 태그 입력기: 사이드바 영역에 속한 메뉴 중 가장 중요한 기능이다. 이 [태그 입력기]를 얼마나 잘 활용하느냐에 따라 여러분의 블로그 모양새가 결정난다.
* 사이드바 꾸미기에 관한 전반적인 자세하고도 전반적인 설명은 여기를 클릭하자.
이제 기본설정(화면설정, 사이드바 설정, 플러그인 설정 등)이 끝났으면 skin.html 및 style.css 파일을 내 입맛에 맞게 수정하도록 하자. 특히 여기부터는 수정대상이 skin.html 인지 style.css 인지 꼭 확인하고서 작업을 해야 한다. 잘못 건드렸다간 블로그가 완전히 날아가 버린다. 때론 skin.html, style.css 둘 다 수정해줘야 할 때도 있다.
우선 skin.html 및 style.css 파일 수정은 어드민(Admin)으로 잘 알려진 [관리자 모드]에서 가능하다. 보통 관리자 모드르 진입할 때는 블로그 상단이나 하단에 있는 관리자(Admin) 메뉴를 클릭한다. 다소 번거롭다. 이때 유용하게 사용할 수 있는 단축키가 바로 티스토리에서 자체 제공하는 'Q' 이다. 지금 이 글을 보고 있다면 키보드에서 Q를 눌러보자 단 한번에 관리자 모드로 진입하는 것을 경험할 수 있을 것이다.
아무튼 [관리자 모드(Admin)] => [HTML/CSS 편집] 순서대로 클릭을 하면 아래와 같은 편집창이 보일 것이다. 화면 윗부분이 skin.html 파일, 아랫 부분이 style.css 파일이다.
또한 skin.html 및 style.css 파일 속에서 특정 문자열을 찾을 때는 <CTRL + F>를 눌러서 찾는 문자열을 입력해서 찾도록 한다. 용량이 크기 때문에 그냥 스크롤하면서 눈으로 찾아내려면 힘들다. style.css 파일 속에서 'post-width' 문자열을 찾는다면, CTRL + F 를 누른 뒤, 입력창에 post-width 를 입력하고 엔터키를 친다.
그리고 style.css 파일 중 (## ~ ##) 부분은 [## ~ ##] 로 바꾸어 준다. 본 게시물 속에 보이는 모든 (##, ##) 는 각각 [##, ##] 로 바꿔줘야 한다.
skin.html 및 style.css 소스 중 일부(때론 ; 기호 하나)가 빠질 경우, 스킨 레이아웃이 이상하게 변하거나 블로그가 엉망이 되는 수가 있습니다. 꼭 집중해서 따라하세요.
+ style.css 파일 편집/수정 시 팁
style.css 파일을 열어 보면 뭔가 복잡하다. 특히 /* ~~ */ 과 같이 주석처리된 영역을 유난히 자주 볼 수 있다. style.css 파일 에서 /* */ 사이에 있는 여기서 부터라는 부분은 실행이 되지 않는다. 즉 스크립트 실행을 원치 않을 경우엔 /* */ 처리로 일단 막아 둔다. 이것은 스킨 모양 등을 수정할 때 유용하다. 아래에서 예를 들어 설명해 보자.
/* 블로그 레이아웃 */
#container {
width:/*@post-width:386*/956px/*@*/;
margin:0 auto;
padding:0;
background-color:#fff;
}
뭔가 대개 복잡하다. 그런데 /* */의 기능을 이해하고 있다면 아무 것도 아니다. 첫째 줄에 보이는 /* 블로그 레이아웃 */ 은 그 아랫 부분이 블로그 레이아웃과 관련된 내용이란 주석을 달아놓은 것이다. 즉 /* ~~ */ 으로 막혀 있기 때문에 실제 실행이 되지 않는다.
스크립트 중 아래 줄을 유심히 보자.
width:/*@post-width:386*/956px/*@*/;
얼핏 보기엔 복잡하지만 아래와 같이 풀어 쓸 수 있다.
width:
/*@post-width:386*/ => 이 부분은 실행이 되지 않는다.
956px
/*@*/ => 이 부분도 실행되지 않는다.
;
결과적으로
width: 956px; 가 전부이다. 참고로 맨 끝부분에 보이는 ; 를 모르고 빠뜨리면 해당 스크립트가 실행이 되지 않는다. style.css 파일 수정시 ; 있는지 유무를 꼭 확인한 뒤 ; 기호가 있을 경우엔 삭제해서는 안된다.
직접 적용된 예를 보면서 익히도록 하자. 아래는 style.css 파일에 있는 댓글읽기란(댓글이 출력되는 영역) 관련 내용이다. 빨간색 부분을 유심히 보자. background-color 로 시작되는 부분이 댓글일기 박스의 배경색상을 지정해 주는 부분이다. 원래 색상은 #abf200 으로 연두색 계열이다. 그런데 한번씩 내 블로그의 댓글란 배경색을 바꿔주고 싶을 때가 있다. 이때 일단 테스트를 먼저 해보는데 이때 참 유용하게 사용된다. 아래의 경우 연두색을 /* ~~ */ 으로 먼저 막아 놓고 노란색 값에 해당하는 #FFFF7E 를 추가해준 것이다. 그러면 막아 놓은 부분은 그냥 건너뛰고 바로 노란색이 적용된다.
.commentList ol li {
padding:0 0 0 25px;
margin:0;
width:/*@post-width*/868px/*@*/;
background-color:/*#abf200*/#FFFF7E;
overflow:hidden;
}
+ 티스토리 스킨 변경시 유의할 점
티스토리 스킨을 변경 후에는 꼭 글쓰기 폭을 체크해야 한다. 예를 들어 원래 500px 인 폭을 수정을 해서 700px으로 설정해 놓은 상태에서, 시험삼아 다른 스킨으로 변경했다가 다시 저장해 놓은 원래 스킨(A)으로 변경을 하게 되면 700px 가 유지가 되지 않고 500px로 원위치 된다. 따라서 반드시 스킨 변경 전후에는 글쓰기 폭을 체크하도록 한다.
+ 본문 제목 옆 날짜 감추기(없애기)
제목 옆(아래) 날짜(게시물 작성일)를 감추는 방법은 두가지가 있다.
첫째, skin.html 소스에서 <span class="date">(##_article_rep_date_##)</span> 부분을 찾아서 아래와 같이 <!-- --> 로 막아준다.
참고로 ( ) 부분은 [ ] 로 바꾸어 준다. 본 게시물 속에 보이는 모든 (##, ##) 는 각각 [##, ##] 로 바꿔줘야 한다.
<!--
<span class="date">(##_article_rep_date_##)</span>
-->
두번째 방법은, style.css 파일을 수정하는 것이다. style.css 파일에서 아래 부분을 찾아서 빨간색 줄을 추가한다.
.titleWrap .date {
font:11px verdana, sans-serif;
color:#909090;
background:url(images/title_bar.gif) no-repeat 0 2px;
padding-left:11px;
padding-right:6px;
display: none;
}
둘 중에서 본인에게 편한 방법을 택하면 된다.본문 뿐만이 아니라 방명록, 댓글 등에 달린 날짜(시간)은 모두 <!-- --> 감추기 를 통해 숨길 수 있다. 단, 피시 화면 상에서는 날짜가 사라지지만 모바일 기기(스마트폰 등)의 경우엔 날짜가 그대로 출력이 된다. 이는 모바일 스킨을 통해 별도의 소스 수정이 필요한데, 현재 티스토리에서 모바일 소스 수정은 허용하지 않고 있기 때문이다.
+ 티스토리 블로그 스킨 수정/변경시 내 블로그 모양이 이상해 졌어요!
간단한 팁이다. skin.html 이나 style.css 파일을 건드리다 보면 내 블로그 모양이 엉망이 되거나 갑자기 사라지는 경우가 있다. 대개는 아주 사소한 태그 하나를 빠뜨린 경우 이런 일이 자주 발생한다. 예를 들어 <div>, </table> 태그 등에서 > 부호를 모르고 빠뜨린 경우 등이다. 따라서 내 블로그 모양이 이상해 졌다면 일단 수정한 부분의 html 태그가 모두 정상인지 확인하자. 십중팔구 <, >와 같은 부호가 빠져 있을 테니.
+ 본문 아래 카테고리 색상/크기 변경하기
블로그 본문 상단 게시물 제목 아래에 카테고리 경로가 위치한다. 이 카테고리의 모양을 바꿔보자.
스킨 종류에 따라 글제목과 카테고리 경로 등의 배치가 다를 수 있으니 참고하자.
[관리자] => [HTML/CSS] 순서대로 클릭.
skin.html 편집창에서 article_rep_category 가 포함된 부분을 찾는다. 이 부분이 지금 내가 읽고 있는 글이 속한 현재의 카테고리(경로)를 나타내는 것이다.(아래 빨간 네모칸)
빨간 네모칸 앞 뒤에 보이는 파란 네모칸 안의 소스를 그대로 입력하거나 본인의 취향대로 색상이나 글자 크기 등을 조절하시면 된다. (style.css 파일 수정을 통해 가능한지도 모르겠으나, 그냥 skin.html 파일을 통해 수정하는 것이 편해서 이 방법을 사용했다.)
+ 사이드바 메뉴박스 제목 수정하기
아래 부분을 찾아서
<div id="recentPost" class="sbarList">
<h3>최근기사</h3>
<h3> 태그 다음 제목을 원하는 제목으로 바꿔주면 된다. 만약, '최신글 목록'이라고 타이틀을 지정해 주고 싶다면 <h3>최신글 목록</h3>라고 수정한다.
<s_sidebar_element>
<!-- 최근 포스트 모듈 -->
<div id="recentPost" class="sbarList">
<h3>최근기사</h3>
<ul>
<!-------------------- || 최근에 올라온 글 -------------------->
<s_rctps_rep>
<li>
<a href="(##_rctps_rep_link_##)"> (##_rctps_rep_title_##).</a>
<span class="cnt">(##_rctps_rep_rp_cnt_##)</span>
</li>
</s_rctps_rep>
</ul>
</div>
</s_sidebar_element>
+ 카테고리의 다른 글 보기 날짜 감추기
style.css 파일 맨 하단에 아래 부분을 추가해 준다.
.another_category td {display:none;}
+ 검색결과 날짜 감추기
style.css 파일에서 #searchList 부분을 찾아서 아래와 같이 설정해 준다.
#searchList .date {
display:none;
}
+ 본문 타이틀(제목) 밑에 밑줄 효과 주기
위와 같이 본문 제목에 밑줄효과를 주는 방법이다. 대부분의 스킨에서 본문에 밑줄효과는 지정되어 있지 않기 때문에, 아래와 같은 방법으로 효과를 구현해야 한다.
우선 style.css 파일에서 .titleWrap h2 부분을 찾은 뒤 아래 빨간색 부분을 추가한다. 특정 문자열 빨리 찾는 방법
.titleWrap h2 {
padding-top:16px;
padding-bottom:3px;
border-bottom:0;
background-image:url(./images/underline_green.gif);
background-repeat:no-repeat;
background-position:bottom left;
}
아래 보이는 밑줄 그림을 블로그에 올린다. [HTML/CSS 편집] => [파일업로드] 를 클릭한 뒤 아래 파일 중 하나를 올려 주면 된다. 단, 파일이름은 이미 올라가 있는 다른 파일 이름과 중북이 되지 않도록 주의한다. 예를 들어 아래 파일 이름이 underline_green.gif 이라면 underline_green_gomdoripooh.gif 와 같이 겹칠 확률이 거의 없는 다른 이름으로 바꾸어서 올린다. 그리고 이름을 변경했으면 위에 보이는 소스 중 background-image 부분을 아래와 같이 수정해 준다.
background-image:url(./images/underline_green_gomdoripooh.gif);
+ 키워드(Keyword) 크기, 색상 변경하기
티스토리에서 제공하는 키워드(키로그) 기능 중 해당 키워드의 모양(크기, 색깔 등)을 변경하는 기능이다.
.key1 { 으로 시작되는 부분을 찾아서 수정한다. 예를 들어 마우스 커서 모양을 '물음표'로 만들고 싶다면, cursor: help; 로 바꿔준다. 글자 크기 변경은 font-size 부분을 수정해 준다.
.key1 {
cursor:pointer;
border-bottom:1px dotted #000;
font-family: dotum, NanumGothicWeb;
font-size: 14pt;
color:#000;
}
+ 본문 링크 마우스 커서 모양 바꾸기
+ 티스토리 우측 상단 메뉴바 없애기
위 그림을 보자. 원래 빨간색 박스 안에는 티스토리 메뉴바가 위치하고 있었다. 하지만 애드센스 광고를 블로그 상단에 게재하기 위해 메뉴바를 삭제한 것이다. 왜냐하면 애드센스 광고는 드롭다운 메뉴의 영역과 겹치면 안되기 때문이다.
style.css 파일에 새로운 내용(코드) 추가할 때 팁.
+ 댓글 박스 및 트랙백 박스 배경 색상 넣기
블로그 게시물 하단에는 댓글과 트랙백이 출력된다. 이 부분에 배경색상을 바꿔주고 싶다면 style.css 파일을 수정해 준다. style.css 에서 아래 부분을 찾아 background-color 값을 바꿔주면 된다. 블로그 스킨에 따라서 소스(코드)가 다를 수 있으니, 알아서 잘 찾아 보도록 한다.
1) 댓글 박스 배경색상 수정: 아래에 보이듯 .commentList ol li { 로 시작되는 부분을 찾는다.
.commentList ol li {
padding:0 0 0 25px;
margin:0;
width:/*@post-width*/868px/*@*/;
background-color:/*#abf200*/#FFFF7E;
overflow:hidden;
}
2) 트랙백 박스 배경색상 수정: 아래 부분을 찾는다.
.trackback ol li {
margin-bottom:2px;
padding:11px 15px 10px;
background-color:#abf200;
overflow:hidden;
}
+ 간단한 구분선(점선, 실선) 삽입하기
글을 작성할 때 html 모드에서 아래와 같이 코드를 입력해 준다.
<div style="border-bottom:1px #CCCCCC solid; padding-top:0px; margin-bottom: 0px; height:1px;"></div>
<div style="border-bottom:1px #CCCCCC dotted; padding-top:0px; margin-bottom: 0px; height:1px;"></div>
그러면 아래 보이는 구분선이 생기게 된다. 실선은 solid, 점선은 dotted 에 해당.
+ 키워드(키워드), 하이퍼링크 밑줄 및 모양 다양하게 변화시키기
특정 단어에 걸린 하이퍼링크 모양은 아래와 같이 세가지 종류가 있다.
1) solid, 2) dotted, 3) dashed
이중 하나를 선택해서 border-bottom:1px dotted #000; 처럼 넣어 준다. dotted 는 '점선' 모양이란 말이다. 즉 '티스토리'란 단어에 링크가 걸릴 때 점선의 모양이 된다. solid 실선, dashed 는 파선이 된다.
/* 키워드 */
.key1 {
cursor:help;
border-bottom:1px dotted #000;
font-family: veranda, dotum;
font-size: 13pt;
color:#000;
background-color: #ffee00;
}
border-bottom:1px dotted #000;
위 라인을 설명하면 아래와 같다.
border-bottom => 링크는 아랫 부분에 걸리는 것이 일반적이기에 border-bottom 속성을 사용한다. 만약 border-top 이라고 한다면 단어 윗부분에 링크가 걸리게 된다.
1px => 링크에 걸린 선의 굵기
dotted => 링크의 모양. 즉 점선이다.
#000 => 링크의 색깔. 검정색이 된다.
이 모두들 연결할 때는 border-bottom: 1px dotted #000; 의 형태로 연결한다. 마지막에 보이는 ; 부호가 없으면 실행이 되질 않는다. ; 를 붙여줘야 한다.
+ 카테고리 옆에 새글(NEW) 아이콘 표시하기
관리자 모드로 들어가서 [카테고리 설정] => [새글 표시] 순으로 클릭 후 원하는 대로 설정해 준다.
+ 댓글창에 이미지(사진) 입력하기
##_re_input_comment_## 부분을 찾는다. 그러면 다음과 같은 코드가 보일 것이다.
<textarea name="##_rp_input_comment_##" cols="50" rows="10"></textarea>
이 코드에 style="background-image:url(./images/comment_bg_medi.png);background-repeat:no-repeat; background-position:right;" onClick="this.style.backgroundImage=''" 을 추가해 준다.
<textarea name="##_rp_input_comment_##" cols="50" rows="10" style="background-image:url(./images/comment_bg_medi.png);background-repeat:no-repeat; background-position:right;" onClick="this.style.backgroundImage=''"></textarea>
+ 본문 하단 공통영역에 콘텐츠 삽입하기
티스토리 스킨 구조상 본문 맨 마지막 부분은 [다른 글 더보기] 박스가 위치한다. 설령 포스팅 내용이 끝이 났다고 해도 'SNS 아이콘', '다른 글 더보기' 등의 메뉴가 강제적으로 본문 다음에 출력이 된다. 따라서 여기서 본문이라 함은 본문 그 자체와 관련 영역 모두를 포함한다고 볼 수 있다. 때론 본문과 본문 하단에 특정 콘텐츠나 애드센스를 삽입하고 싶을 때가 있다. </s_paging>를 찾은 뒤 그 아래에 콘텐츠를 삽입한다. 아래 그림의 경우 본문 영역 아래에 애드센스 링크 광고를 삽입한 모습이다. 정확히는 본문(본문 관련 영역)과 [댓글/트랙백] 영역 사이에 해당한다.
+ 티스토리 각 영역에 콘텐츠 삽입하기
티스토리 스킨의 구조를 이해하고 있으면 여러모로 편리하다. 잘 모르겠다면 위에서 설명한 내용을 바탕으로 티스토리 블로그 곳곳을 한번 건드려 보자.
skin.html 및 style.css 소스 중 일부(때론 ; 기호 하나)가 빠질 경우, 스킨 레이아웃이 이상하게 변하거나 블로그가 엉망이 되는 수가 있습니다. 꼭 집중해서 따라하세요.
그렇게 어렵다는 티스토리 블로그 초대장을 받아서 내 블로그를 개설했다. 하지만 이제부턴 힘든 노가다 작업이 기다리고 있다. 지레 겁먹지 말고 하나씩 차근차근 따라해 보자. 초보 블로거의 입장에서 무작정 내 블로그를 운영하면서 만날 수밖에 없는 시행착오를 상당부분 비켜갈 수 있을 것이다.
이 글은 블로그를 막 개설한 초보자에게 유용하다. 하나하나 따라해 가다 보면 막막하기 그지 없던 내 블로그 뼈대 세우기 및 옷 입히기가 어느 정도 완성되어 있다는 것을 알 수 있을 것이다. 그리고 끝까지 따라하다 보면 이제 스스로 내 블로그에 필요한 기능을 찾아서 스스로 해결할 수 있다.
+ 열심히 티스토리해서 베스트 블로그 되자. 베스트 블로그와는 전혀 관련이 없는 열린영어의 블로그.
+ 들어가기 전에: 티스토리 주요 링크
1) 티스토리 FAQ
2) 티스토리 포럼
3) 티스토리 고객센터
4) 티스토리 스킨가이드
+ 들어가기 전에(2): 맛보기 간단 기능
티스토리 본문글 작성시 간단하면서도 유용한 기능 중 하나가 바로 [더보기] 기능이다. 글 펼치기/접기 기능으로 생각하면 더 이해하기 쉽다. 글을 읽다 보면 굳이 읽지 않고 그냥 지나쳐도 되는 부분이 생길 수도 있다. 이때 특정 부분은 방문자들에게 선택권을 주는 기능이다.
아래를 보자. 몸 풀기 차원에서 티스토리 설정과는 관련이 없는 오늘자 클라라 한복 뉴스를 하나 퍼왔다. 아마 지금 여러분들 눈에는 그 뉴스가 보이지 않을 것이다. 그러데 [더보기] 링크를 클릭하면 기사가 밑으로 펼쳐지면서 볼 수 있다. 다시 [접기]를 클릭하면 원위치 된다. 이제 무슨 말인지 알 수 있을 것이다. 이것이 유용한 [더보기(펼치기)/접기] 기능이다. 이 기능은 간단히 글쓰기 상단에 보이는 [더보기] 아이콘만 클릭하면 된다.
즉, 글을 감추고 싶은 부분이 [이 부분 글을 감추기] 라면 해당 영역에 마우스로 블록을 설정하고, 위에 보이는 [더보기]아이콘을 클릭하면 된다. 그러면 점선 박스가 생기면서 글을 감출 수 있게 된다.
이제 부터 얘기하는 모든 내용은 [관리자] 모드(화면)에서 진행되는 것들이다. [관리자 모드]에 대해서 잘 모른다면 아래를 클릭하자.
+ 화면설정
[화면설정]이 이미 되어 있거나 알고 있는 내용이라면, [플러그인 설정]으로 건너 뛴다.
티스토리 블로그 개설 후 제일 먼저 찾아야 할 곳이 바로 화면출력 페이지이다. [관리자 모드] => [화면설정] => [화면출력] 순서대로 클릭.
1) 우선 기본화면 설정을 하자. 블로그에 처음 접속했을 때 나타나는 글의 개수를 지정하는 것이다. 기본화면 설정이 제대로 되어 있지 않으면 블로그가 지저분하게 보인다. 예를 들어, 기본화면 글 출력개수를 10개로 지정해 놓았다면 내가 블로그에 쓴 글들이 10개씩 출력이 된다. 깔끔하지가 못하다.
2) 선택화면: 블로그 개설 후 반드시 제일 먼저 설정해줘야 하는 부분이다. '선택화면'이란 특정 카테고리(메뉴)를 클릭했을 때 나타나는 결과 페이지이다. 검색결과 페이지 역시 선택화면에 속한다. 말 그대로 전체 페이지 중에서 검색방법 등에 따라 일부(특정) 페이지만 출력되는 것이다. 여러분이 검색창에 '티스토리'을 입력했을 때 나타나는 '티스토리' 단어가 포함된 게시물 목록이 바로 선택화면이다. 그런데 [선택화면]을 잘못 설정하면 블로그가 지저분하게 보이기 때문에 주의를 기울여야 한다. 예를 들어, 선택화면 옵션을 글목록 20개, 출력옵션을 <제목 + 내용>으로 설정했을 경우엔, 모두 20개의 글이 출력이 된다. 단 옵션이 <제목 + 내용>이기에 20개 글 모두 제목과 내용이 모두 출력이 되는 것이다.
무슨 말인지 모르겠다면, 다시 설명해 보자. 아래 그림은 본 블로그 [영화 속 명대사]를 클릭했을 때 나타나는 선택화면이다. 즉 영화 속 명대사 카테고리의 글제목들이다. 보다 시피 모두 70개의 명대사 중에서 그중 5개씩 묶어서 출력된다. 명대사 '제목'만 보이는 것은 옵션 설정시 <제목>만 설정했기 때문이다. 만약 <제목 + 내용>을 선택했다면, 제목과 내용이 모두 출력되면서 5개의 글 제목과 내용을 모두 한페이지에서 다 봐야 하기 때문에 정신도 없을 뿐더라 외관도 깔끔하지 못하다.
3) 펼침 설정: 댓글 펼침에 체크해 놓으면 게시물에 달린 댓글 제목과 내용이 그대로 출력이 된다. 체크를 해제하면 댓글이 몇개가 달려있다는 알림글만 노출되고 해당 알림을 클릭해야 댓글을 볼 수 있다. 게시물에 달린 댓글이 많아서 블로그 화면을 깔끔하게 처리하고 싶을 때는 [댓글 펼침]을 해제하면 된다. 트랙백도 동일하다.
4) 최근글: 내 블로그 게시물을 최신순으로 정렬해서 보여준다. 별도의 설정이 없어도 언제나 최신순으로 글이 정렬된다. 보통 5개-10개 정도로 설정해 주면 된다. 출력개수 보다 중요한 게 뒤에 보이는 글자수 조절이다. 사이드바 영역은 그 폭이 제한되어 있는데, '글자수'를 너무 높이 설정해 놓으면 아래와 같은 현상이 발생한다. 만약 사이드바 최근글 글제목이 두줄, 세줄로 겹쳐 나오는 현상이 발생하면, '글자수'를 조절해서 해결해야 한다.
5) 링크: 링크 제목 글자수 지정
6) 태크: 사이드바에 있는 '태크 클라우드'를 통해 노출되는 태그 개수 지정. 30-40개가 적당하다.
7) 최근 보관함: 글 보관함이다. 내가 작성한 글을 월 단위로 보관해서 보여준다. 7월에 30개, 8월에 10개.. 이렇게 나타난다.
+ 플러그인 설정
기본화면 설정이 끝났으면 [플러그인 설정]으로 들어간다. 플러그인 설정을 통해 비로소 내 티스토리 블로그에 생명을 불어넣게 된다. 그리고 플러그인 설정이 선행되어야만 아래에서 다룰 사이드바를 사용할 수 있다. 이제 막 개설된 내 블로그는 한없이 초라하게만 보인다. 단촐한 메뉴 몇개만 보이지 않는가. 옆동네 아무개 블로그를 방문해 보면 별의 별 기능이 다 탑재되어 있어서 그 모양새가 가히 위압적이다.
+ 마우스 오른쪽 클릭 방지: 방문자들이 내 블로그 글이나 사진을 함부러 복사해 가지(긁어 가지) 못하도록 하는 장치다. 불펌방지기능인 셈이다.
+ 지역로그(위치로그) 표시: 이 옵션을 활성화시켜야 [지역로그] 기능을 사용할 수 있다. 지역로그는 무엇이며 어떻게 사용하는지 알고 싶다면 여기를 클릭하자.
+ 유입 키워드: 관리자 화면에서 내 블로그로 유입된 키워드 확인을 할 수 있다.
+ 방문자 통계: 내 블로그를 다녀 간 방문자 통계를 간단히 확인가능.
+ 이전 글1 링크 삽입: 글을 작성하다 보면 예전에 이미 작성해 놓은 관련글을 함께 링크를 걸고 싶을 때가 있다. 그때 [이전 글]을 클릭하면 원하는 글을 링크를 걸어 놓을 수 있다.
+ Daum View: 다음뷰에 내글 보내기를 하려면 역시 설정을 해준다.
+ 관리 및 통계: 내 블로그 유입내역 및 통계를 알고 싶다면 이 플러그인을 활성화 시켜야 한다.
+ 카테고리 글 더보기2는 본문 하단에 동일한 카테고리의 글을 더 볼 수 있는 박스를 출력시키고 싶다면 이 설정에 체크를 한다. 목록개수는 출력되는 글의 개수이고, 색상은 박스의 색상이다.
+ 글 설정
이제 [글설정]으로 들어가 보자.
[관리자] => [글 설정] => [글 환경] 순서대로 클릭한다. 내 블로그 글을 다른 방문자에게 공개하고 싶다면 [공개]를 선택한다. 남들에게 보여 주기 싫다면 물론 비공개에 체크한다. 방명록 및 댓글 권한도 마찬가지다. 모든 방명록/댓글 권한을 제한하고 싶다면 [로그인 사용자]에 체크. 댓글의 경우 관리자가 댓글을 확인하고 블로그에 나타나도록 하고 싶다면 [관리자 승인 후 출력]에 한번 더 체크한다. [발행]도 있으니 확인해 두자. 내가 쓴 글을 페이스북이나 트위터 등으로 전송하고 싶을 때 [발행]에 체크하면 된다. 물론 소셜 네트워크 사이트에 가입이 되어 있어야 한다.
+ 사이드바 설정 및 배치하기
[사이드바 설정]은 티스토리 블로그를 처음 꾸밀 때 사실상 전부라고 해도 과언이 아니다. 티스토리 블로그의 기본 뼈대는 바로 사이드바 설정과 함께 시작된다. 아래는 모두 사이드바 메뉴에 관련된 것들이다. [사이드바] 메뉴를 사용할 수 있기 위해서는 위에서 이미 설명한 [플러그인 설정]에서 해당 사이드바와 관련된 플러그인을 설정해줘야 한다. 예를 들어, 사이드바에 [태그 입력기]를 사용해서 다양한 메뉴를 삽입하고 싶다면, [플러그인 설정]에서 [태그 입력기] 사용에 체크를 해줘야 한다. 플러그인 설정을 거치지 않으면 사이드바 기본 모듈에 [태그 입력기] 모듈이 보이지 않는다.
1) 빈줄 표시: 사이드바 사이에 수직으로 약간의 공간이 생기도록 한다.
2) 방문자 그래프: 내 블로그에 다녀간 방문자수를 일주일 단위로 보여주는 그래프를 보여준다.
3) 최근 포스트 모듈: 블로그에 등록된 글이 최신순으로 정렬되어 올라온다.
4) 태그목록 모듈: 내 블로그에 등록된 태그를 보여준다. 출력되는 태그 개수는 관리자 화면 '화면 설정'에서 선택이 가능하다.
5) 최근 댓글 모듈: 내 블로그에 달린 댓글들이 최신순으로 정렬되어 나타난다.
6) 공지사항 모둘: '공지'로 지정된 글을 최신순으로 정렬해서 보여준다.
7) 태그 입력기: 사이드바 영역에 속한 메뉴 중 가장 중요한 기능이다. 이 [태그 입력기]를 얼마나 잘 활용하느냐에 따라 여러분의 블로그 모양새가 결정난다.
* 사이드바 꾸미기에 관한 전반적인 자세하고도 전반적인 설명은 여기를 클릭하자.
이제 기본설정(화면설정, 사이드바 설정, 플러그인 설정 등)이 끝났으면 skin.html 및 style.css 파일을 내 입맛에 맞게 수정하도록 하자. 특히 여기부터는 수정대상이 skin.html 인지 style.css 인지 꼭 확인하고서 작업을 해야 한다. 잘못 건드렸다간 블로그가 완전히 날아가 버린다. 때론 skin.html, style.css 둘 다 수정해줘야 할 때도 있다.
우선 skin.html 및 style.css 파일 수정은 어드민(Admin)으로 잘 알려진 [관리자 모드]에서 가능하다. 보통 관리자 모드르 진입할 때는 블로그 상단이나 하단에 있는 관리자(Admin) 메뉴를 클릭한다. 다소 번거롭다. 이때 유용하게 사용할 수 있는 단축키가 바로 티스토리에서 자체 제공하는 'Q' 이다. 지금 이 글을 보고 있다면 키보드에서 Q를 눌러보자 단 한번에 관리자 모드로 진입하는 것을 경험할 수 있을 것이다.
아무튼 [관리자 모드(Admin)] => [HTML/CSS 편집] 순서대로 클릭을 하면 아래와 같은 편집창이 보일 것이다. 화면 윗부분이 skin.html 파일, 아랫 부분이 style.css 파일이다.
또한 skin.html 및 style.css 파일 속에서 특정 문자열을 찾을 때는 <CTRL + F>를 눌러서 찾는 문자열을 입력해서 찾도록 한다. 용량이 크기 때문에 그냥 스크롤하면서 눈으로 찾아내려면 힘들다. style.css 파일 속에서 'post-width' 문자열을 찾는다면, CTRL + F 를 누른 뒤, 입력창에 post-width 를 입력하고 엔터키를 친다.
그리고 style.css 파일 중 (## ~ ##) 부분은 [## ~ ##] 로 바꾸어 준다. 본 게시물 속에 보이는 모든 (##, ##) 는 각각 [##, ##] 로 바꿔줘야 한다.
skin.html 및 style.css 소스 중 일부(때론 ; 기호 하나)가 빠질 경우, 스킨 레이아웃이 이상하게 변하거나 블로그가 엉망이 되는 수가 있습니다. 꼭 집중해서 따라하세요.
+ style.css 파일 편집/수정 시 팁
style.css 파일을 열어 보면 뭔가 복잡하다. 특히 /* ~~ */ 과 같이 주석처리된 영역을 유난히 자주 볼 수 있다. style.css 파일 에서 /* */ 사이에 있는 여기서 부터라는 부분은 실행이 되지 않는다. 즉 스크립트 실행을 원치 않을 경우엔 /* */ 처리로 일단 막아 둔다. 이것은 스킨 모양 등을 수정할 때 유용하다. 아래에서 예를 들어 설명해 보자.
/* 블로그 레이아웃 */
#container {
width:/*@post-width:386*/956px/*@*/;
margin:0 auto;
padding:0;
background-color:#fff;
}
뭔가 대개 복잡하다. 그런데 /* */의 기능을 이해하고 있다면 아무 것도 아니다. 첫째 줄에 보이는 /* 블로그 레이아웃 */ 은 그 아랫 부분이 블로그 레이아웃과 관련된 내용이란 주석을 달아놓은 것이다. 즉 /* ~~ */ 으로 막혀 있기 때문에 실제 실행이 되지 않는다.
스크립트 중 아래 줄을 유심히 보자.
width:/*@post-width:386*/956px/*@*/;
얼핏 보기엔 복잡하지만 아래와 같이 풀어 쓸 수 있다.
width:
/*@post-width:386*/ => 이 부분은 실행이 되지 않는다.
956px
/*@*/ => 이 부분도 실행되지 않는다.
;
결과적으로
width: 956px; 가 전부이다. 참고로 맨 끝부분에 보이는 ; 를 모르고 빠뜨리면 해당 스크립트가 실행이 되지 않는다. style.css 파일 수정시 ; 있는지 유무를 꼭 확인한 뒤 ; 기호가 있을 경우엔 삭제해서는 안된다.
직접 적용된 예를 보면서 익히도록 하자. 아래는 style.css 파일에 있는 댓글읽기란(댓글이 출력되는 영역) 관련 내용이다. 빨간색 부분을 유심히 보자. background-color 로 시작되는 부분이 댓글일기 박스의 배경색상을 지정해 주는 부분이다. 원래 색상은 #abf200 으로 연두색 계열이다. 그런데 한번씩 내 블로그의 댓글란 배경색을 바꿔주고 싶을 때가 있다. 이때 일단 테스트를 먼저 해보는데 이때 참 유용하게 사용된다. 아래의 경우 연두색을 /* ~~ */ 으로 먼저 막아 놓고 노란색 값에 해당하는 #FFFF7E 를 추가해준 것이다. 그러면 막아 놓은 부분은 그냥 건너뛰고 바로 노란색이 적용된다.
.commentList ol li {
padding:0 0 0 25px;
margin:0;
width:/*@post-width*/868px/*@*/;
background-color:/*#abf200*/#FFFF7E;
overflow:hidden;
}
+ 티스토리 스킨 변경시 유의할 점
티스토리 스킨을 변경 후에는 꼭 글쓰기 폭을 체크해야 한다. 예를 들어 원래 500px 인 폭을 수정을 해서 700px으로 설정해 놓은 상태에서, 시험삼아 다른 스킨으로 변경했다가 다시 저장해 놓은 원래 스킨(A)으로 변경을 하게 되면 700px 가 유지가 되지 않고 500px로 원위치 된다. 따라서 반드시 스킨 변경 전후에는 글쓰기 폭을 체크하도록 한다.
+ 본문 제목 옆 날짜 감추기(없애기)
제목 옆(아래) 날짜(게시물 작성일)를 감추는 방법은 두가지가 있다.
첫째, skin.html 소스에서 <span class="date">(##_article_rep_date_##)</span> 부분을 찾아서 아래와 같이 <!-- --> 로 막아준다.
참고로 ( ) 부분은 [ ] 로 바꾸어 준다. 본 게시물 속에 보이는 모든 (##, ##) 는 각각 [##, ##] 로 바꿔줘야 한다.
<!--
<span class="date">(##_article_rep_date_##)</span>
-->
두번째 방법은, style.css 파일을 수정하는 것이다. style.css 파일에서 아래 부분을 찾아서 빨간색 줄을 추가한다.
.titleWrap .date {
font:11px verdana, sans-serif;
color:#909090;
background:url(images/title_bar.gif) no-repeat 0 2px;
padding-left:11px;
padding-right:6px;
display: none;
}
둘 중에서 본인에게 편한 방법을 택하면 된다.본문 뿐만이 아니라 방명록, 댓글 등에 달린 날짜(시간)은 모두 <!-- --> 감추기 를 통해 숨길 수 있다. 단, 피시 화면 상에서는 날짜가 사라지지만 모바일 기기(스마트폰 등)의 경우엔 날짜가 그대로 출력이 된다. 이는 모바일 스킨을 통해 별도의 소스 수정이 필요한데, 현재 티스토리에서 모바일 소스 수정은 허용하지 않고 있기 때문이다.
+ 티스토리 블로그 스킨 수정/변경시 내 블로그 모양이 이상해 졌어요!
간단한 팁이다. skin.html 이나 style.css 파일을 건드리다 보면 내 블로그 모양이 엉망이 되거나 갑자기 사라지는 경우가 있다. 대개는 아주 사소한 태그 하나를 빠뜨린 경우 이런 일이 자주 발생한다. 예를 들어 <div>, </table> 태그 등에서 > 부호를 모르고 빠뜨린 경우 등이다. 따라서 내 블로그 모양이 이상해 졌다면 일단 수정한 부분의 html 태그가 모두 정상인지 확인하자. 십중팔구 <, >와 같은 부호가 빠져 있을 테니.
+ 본문 아래 카테고리 색상/크기 변경하기
블로그 본문 상단 게시물 제목 아래에 카테고리 경로가 위치한다. 이 카테고리의 모양을 바꿔보자.
스킨 종류에 따라 글제목과 카테고리 경로 등의 배치가 다를 수 있으니 참고하자.
[관리자] => [HTML/CSS] 순서대로 클릭.
skin.html 편집창에서 article_rep_category 가 포함된 부분을 찾는다. 이 부분이 지금 내가 읽고 있는 글이 속한 현재의 카테고리(경로)를 나타내는 것이다.(아래 빨간 네모칸)
빨간 네모칸 앞 뒤에 보이는 파란 네모칸 안의 소스를 그대로 입력하거나 본인의 취향대로 색상이나 글자 크기 등을 조절하시면 된다. (style.css 파일 수정을 통해 가능한지도 모르겠으나, 그냥 skin.html 파일을 통해 수정하는 것이 편해서 이 방법을 사용했다.)
+ 사이드바 메뉴박스 제목 수정하기
아래 부분을 찾아서
<div id="recentPost" class="sbarList">
<h3>최근기사</h3>
<h3> 태그 다음 제목을 원하는 제목으로 바꿔주면 된다. 만약, '최신글 목록'이라고 타이틀을 지정해 주고 싶다면 <h3>최신글 목록</h3>라고 수정한다.
<s_sidebar_element>
<!-- 최근 포스트 모듈 -->
<div id="recentPost" class="sbarList">
<h3>최근기사</h3>
<ul>
<!-------------------- || 최근에 올라온 글 -------------------->
<s_rctps_rep>
<li>
<a href="(##_rctps_rep_link_##)"> (##_rctps_rep_title_##).</a>
<span class="cnt">(##_rctps_rep_rp_cnt_##)</span>
</li>
</s_rctps_rep>
</ul>
</div>
</s_sidebar_element>
+ 카테고리의 다른 글 보기 날짜 감추기
style.css 파일 맨 하단에 아래 부분을 추가해 준다.
.another_category td {display:none;}
+ 검색결과 날짜 감추기
style.css 파일에서 #searchList 부분을 찾아서 아래와 같이 설정해 준다.
#searchList .date {
display:none;
}
+ 본문 타이틀(제목) 밑에 밑줄 효과 주기
위와 같이 본문 제목에 밑줄효과를 주는 방법이다. 대부분의 스킨에서 본문에 밑줄효과는 지정되어 있지 않기 때문에, 아래와 같은 방법으로 효과를 구현해야 한다.
우선 style.css 파일에서 .titleWrap h2 부분을 찾은 뒤 아래 빨간색 부분을 추가한다. 특정 문자열 빨리 찾는 방법
.titleWrap h2 {
padding-top:16px;
padding-bottom:3px;
border-bottom:0;
background-image:url(./images/underline_green.gif);
background-repeat:no-repeat;
background-position:bottom left;
}
아래 보이는 밑줄 그림을 블로그에 올린다. [HTML/CSS 편집] => [파일업로드] 를 클릭한 뒤 아래 파일 중 하나를 올려 주면 된다. 단, 파일이름은 이미 올라가 있는 다른 파일 이름과 중북이 되지 않도록 주의한다. 예를 들어 아래 파일 이름이 underline_green.gif 이라면 underline_green_gomdoripooh.gif 와 같이 겹칠 확률이 거의 없는 다른 이름으로 바꾸어서 올린다. 그리고 이름을 변경했으면 위에 보이는 소스 중 background-image 부분을 아래와 같이 수정해 준다.
background-image:url(./images/underline_green_gomdoripooh.gif);
+ 키워드(Keyword) 크기, 색상 변경하기
티스토리에서 제공하는 키워드(키로그) 기능 중 해당 키워드의 모양(크기, 색깔 등)을 변경하는 기능이다.
.key1 { 으로 시작되는 부분을 찾아서 수정한다. 예를 들어 마우스 커서 모양을 '물음표'로 만들고 싶다면, cursor: help; 로 바꿔준다. 글자 크기 변경은 font-size 부분을 수정해 준다.
.key1 {
cursor:pointer;
border-bottom:1px dotted #000;
font-family: dotum, NanumGothicWeb;
font-size: 14pt;
color:#000;
}
+ 본문 링크 마우스 커서 모양 바꾸기
+ 티스토리 우측 상단 메뉴바 없애기
위 그림을 보자. 원래 빨간색 박스 안에는 티스토리 메뉴바가 위치하고 있었다. 하지만 애드센스 광고를 블로그 상단에 게재하기 위해 메뉴바를 삭제한 것이다. 왜냐하면 애드센스 광고는 드롭다운 메뉴의 영역과 겹치면 안되기 때문이다.
style.css 파일에 새로운 내용(코드) 추가할 때 팁.
+ 댓글 박스 및 트랙백 박스 배경 색상 넣기
블로그 게시물 하단에는 댓글과 트랙백이 출력된다. 이 부분에 배경색상을 바꿔주고 싶다면 style.css 파일을 수정해 준다. style.css 에서 아래 부분을 찾아 background-color 값을 바꿔주면 된다. 블로그 스킨에 따라서 소스(코드)가 다를 수 있으니, 알아서 잘 찾아 보도록 한다.
1) 댓글 박스 배경색상 수정: 아래에 보이듯 .commentList ol li { 로 시작되는 부분을 찾는다.
.commentList ol li {
padding:0 0 0 25px;
margin:0;
width:/*@post-width*/868px/*@*/;
background-color:/*#abf200*/#FFFF7E;
overflow:hidden;
}
2) 트랙백 박스 배경색상 수정: 아래 부분을 찾는다.
.trackback ol li {
margin-bottom:2px;
padding:11px 15px 10px;
background-color:#abf200;
overflow:hidden;
}
+ 간단한 구분선(점선, 실선) 삽입하기
글을 작성할 때 html 모드에서 아래와 같이 코드를 입력해 준다.
<div style="border-bottom:1px #CCCCCC solid; padding-top:0px; margin-bottom: 0px; height:1px;"></div>
<div style="border-bottom:1px #CCCCCC dotted; padding-top:0px; margin-bottom: 0px; height:1px;"></div>
그러면 아래 보이는 구분선이 생기게 된다. 실선은 solid, 점선은 dotted 에 해당.
+ 키워드(키워드), 하이퍼링크 밑줄 및 모양 다양하게 변화시키기
특정 단어에 걸린 하이퍼링크 모양은 아래와 같이 세가지 종류가 있다.
1) solid, 2) dotted, 3) dashed
이중 하나를 선택해서 border-bottom:1px dotted #000; 처럼 넣어 준다. dotted 는 '점선' 모양이란 말이다. 즉 '티스토리'란 단어에 링크가 걸릴 때 점선의 모양이 된다. solid 실선, dashed 는 파선이 된다.
/* 키워드 */
.key1 {
cursor:help;
border-bottom:1px dotted #000;
font-family: veranda, dotum;
font-size: 13pt;
color:#000;
background-color: #ffee00;
}
border-bottom:1px dotted #000;
위 라인을 설명하면 아래와 같다.
border-bottom => 링크는 아랫 부분에 걸리는 것이 일반적이기에 border-bottom 속성을 사용한다. 만약 border-top 이라고 한다면 단어 윗부분에 링크가 걸리게 된다.
1px => 링크에 걸린 선의 굵기
dotted => 링크의 모양. 즉 점선이다.
#000 => 링크의 색깔. 검정색이 된다.
이 모두들 연결할 때는 border-bottom: 1px dotted #000; 의 형태로 연결한다. 마지막에 보이는 ; 부호가 없으면 실행이 되질 않는다. ; 를 붙여줘야 한다.
+ 카테고리 옆에 새글(NEW) 아이콘 표시하기
관리자 모드로 들어가서 [카테고리 설정] => [새글 표시] 순으로 클릭 후 원하는 대로 설정해 준다.
+ 댓글창에 이미지(사진) 입력하기
##_re_input_comment_## 부분을 찾는다. 그러면 다음과 같은 코드가 보일 것이다.
<textarea name="##_rp_input_comment_##" cols="50" rows="10"></textarea>
이 코드에 style="background-image:url(./images/comment_bg_medi.png);background-repeat:no-repeat; background-position:right;" onClick="this.style.backgroundImage=''" 을 추가해 준다.
<textarea name="##_rp_input_comment_##" cols="50" rows="10" style="background-image:url(./images/comment_bg_medi.png);background-repeat:no-repeat; background-position:right;" onClick="this.style.backgroundImage=''"></textarea>
+ 본문 하단 공통영역에 콘텐츠 삽입하기
티스토리 스킨 구조상 본문 맨 마지막 부분은 [다른 글 더보기] 박스가 위치한다. 설령 포스팅 내용이 끝이 났다고 해도 'SNS 아이콘', '다른 글 더보기' 등의 메뉴가 강제적으로 본문 다음에 출력이 된다. 따라서 여기서 본문이라 함은 본문 그 자체와 관련 영역 모두를 포함한다고 볼 수 있다. 때론 본문과 본문 하단에 특정 콘텐츠나 애드센스를 삽입하고 싶을 때가 있다. </s_paging>를 찾은 뒤 그 아래에 콘텐츠를 삽입한다. 아래 그림의 경우 본문 영역 아래에 애드센스 링크 광고를 삽입한 모습이다. 정확히는 본문(본문 관련 영역)과 [댓글/트랙백] 영역 사이에 해당한다.
+ 티스토리 각 영역에 콘텐츠 삽입하기
티스토리 스킨의 구조를 이해하고 있으면 여러모로 편리하다. 잘 모르겠다면 위에서 설명한 내용을 바탕으로 티스토리 블로그 곳곳을 한번 건드려 보자.
+ 댓글 창 옆에 광고 달기
아래 블로그 방명록을 방문해 보면 댓글창 속 오른편에 그림이 하나 보일 것이다. 단순 이미지를 넣어도 좋고, 애드센스와 같은 광고를 댓글창 옆에 달아두어도 좋다. 무엇보다 눈에 쉽게 띄기에 광고를 클릭할 확률도 높아지게 된다. 물론 이와 같은 클릭을 유발하는 의도적인 광고배치를 금지하고 있는 업체(애드센스 등등)도 있으므로, 사전에 광고를 댓글창 옆에 달아도 괜찮은지 여부를 먼저 확인해 봐야 한다.
http://mediglish.tistory.com/guestbook
아래 내용대로 차근차근 따라해서 내 댓글창 옆에 그림이나 광고를 붙여보자.
먼저 skin.html 파일 소스 중 아래 부분을 찾아서 <!-- ~~~ --> 태그로 막는다. 즉 웹상에 나타나지 않게 만드는 것이다. 빨리 찾는 방법은 <CTRL + F> 를 누른 뒤 ##_guest_textarea_body_## 을 입력하고 엔터키를 치면 된다.
<!--
<textarea name="##_guest_textarea_body_##" cols="50" rows="10"></textarea>
-->
위 부분이 실행되는 걸 막은 뒤 아래 코드로 대체한다.
<p class="clear">
<span><textarea name="##_guest_textarea_body_##" style="width: 530px; height: 243px;"></textarea></span>
<span style="float: right; width: 250px; height: 250px; background-color: #ffffff;">
<!-- 여기에 들어갈 이미지 삽입 -->
</span>
</p>
+ 태그 인기순/이름순 정렬하기
태그 화면에서 태그 정렬 기준을 사용하면 된다. 수백, 수천개의 태그들을 '인기순 (많이 사용한 단어 순)' 및 '이름순 (가나다 순)'으로 설정할 수 있다.
[관리자 메뉴] => [화면설정] => [화면출력] => [태그 인기순/이름순] 으로 설정하면 된다.
+ 티스토리 최상단에 드롭다운 수평 메뉴바 만들기
글작성 시점에 사용한 스킨을 더이상 사용하지 않는 관계로 현재 '열린 영어와 그 적들' 블로그 스킨과는 차이가 있습니다. 하지만 원리면에서는 동일하니, 기능을 구현하는 데 별 어려움은 없으리라 생각합니다.
+ 움직이는 태그 클라우드(태그박스) 만들기
+ 사이드바 영역에 예쁜 사진 삽입하기
+ 태그 클라우드 단어에 형광펜 칠하기
올해 초 사용하던 스킨에 적용한 기능이라 지금은 본 블로그에서 보이지는 않을 것이다. 하지만 원리는 동일하기에 아래 그림을 가지고 설명을 함.
예전 스킨을 사용할 때, 블로그 하단을 보면 [블로그 인기 키워드]라는 섹션이 있었다. 티스토리에서 제공하는 키워드 기능을 약간 응용해서 본문 하단에 삽입해 넣은 것이다. (아래 그림 참고)
가만히 보면 검은 바탕에 형광펜을 입힌 듯한 키워드들(단어)이 보인다. 이것은 css 파일을 수정해서 만든 것이다. html이나 css에 익숙하지 않은 사람들이라면 어떻게 만드는지 한번쯤 궁금점을 품어 봤을 만도 하다. (글쓴이도 마찬가지)
[관리자 모드(admin)] => [HTML/CSS 편집] 순서대로 클릭해서 style.css 파일을 연다.
<CTRL + F>를 이용해서 tagbox 부분을 찾는다. tabbox 부분 수정을 통해 형광펜 디자인을 만들 수 있다.
<= 스킨 종류에 따라 조금씩 다를 수 있다.
아마 #tagbox 코드가 쭈욱 나타날 것이다. tagbox 코드 마지막 부분에 아래 소스를 추가해 준다.
참고로 cloud8 까지 정의되어 있다고 가정해서 추가부분엔 cloud9가 된다. 만약 여러분의 style.css 속 tagbox 코드가 cloud5까지 있다면, 추가되는 부분은 cloud6이 된다. cloud3까지 있으면 cloud4 가 되고. 쉽게 말해 기존에 정의된 것 외에 하나를 내 마음대로 정의해주는 것이다.
<= 주의!! 원래 있던 style.css 파일의 cloud 와 겹치지 않도록 해줘야 한다. 이를 위해 cloud 다음에 적당한 숫자를 붙여주면 좋다. 겹칠 확률이 없는 것으로. 예를 들어 cloud_101 과 같이.
#tagbox li .cloud9 {
background-color:#000; /* 형광펜 색상이다. 검은색 */
color:#47C83E; /* 키워드 색깔. 녹색 */
font-size: 12px; /* 키워드 크기 12px */
font-weight:bold;
}
#tagbox li .cloud10 {
background-color:#000; /* 형광펜 색상이다. 검은색 */
color:#ffffff; /* 키워드 색깔. 흰색 */
font-size: 14px; /* 키워드 크기 14px 로 변경 */
font-weight:bold;
}
별거 아니다. 블로그 첫페이지(메인화면)을 아래와 같이 편집해서 걸어 놓는 것이다.
이렇게 하면 블로그에 구글 애드센스 광고를 가급적 많이 삽입하고자 하는 경우 유리하다. 보통 일반적인 스킨의 경우, 블로그 첫페이지에 본문이 바로 출력되는 경우가 많다. 하지만 태터데스크 기능을 이용해서 첫페이지를 태터데스크 페이지로 만들면 구글 애드센스 광고를 1-2개 더 삽입할 수 있다. 애드센스의 콘텐츠 광고의 경우 블로그 한 페이지에 노출되는 광고수가 3개로 제한되어 있기 때문에, 이와 같이 메인 페이지를 따로 만들어 주면 광고를 그만큼 더 많이 실을 수 있는 것이다.
참고로 아래 캡쳐화면을 보면 알겠지만, 블로그 첫페이지(첫번째, 두번째), 블로그 본문 페이지(3번째)에 각각 두개씩의 구글 광고(빨간색 네모칸)가 삽입되어 있다. 만약 첫페이지를 따로 설정하지 않으면 블로그 본문 페이지가 첫페이지를 대신하는 관계로 광고가 2개 줄어들게 된다. (콘텐츠 광고와는 별개인 링크, 검색 광고까지 포함시키면 더 많은 광고를 실을 수 있지만 여기서는 일단 콘텐츠 광고만 다룬다.)
+ 티스토리 본문 영역 분할하기: 애드센스 삽입, 폭(넓이) 줄이기, 레이아웃 변경
아래 적혀있는 설명대로 따라하기 전에 반드시 기존 스킨(skin)을 백업하시기 바랍니다. 반드시!! 그리고 스킨 백업 후 다시 별도로 skin.html, style.css 파일을 한번 더 백업하시기 바랍니다.
치환자(아래 빨간색 [#으로 시작되는 부분)가 본문에 나타나지 않는 관계로 그림(이미지)로 대체하였습니다. 따라서 아래 빨간색 치환자는 직접 타이핑하거나 원래 소스에서 복사하셔야 합니다.
간혹 티스토리 스킨을 적용시켜 보면 본문 폭이 너무 넓게 퍼져서 난감한 경우가 있다. 티스토리에서 제공하는 3단 스킨의 경우, 대개 본문 폭이 570px 내외라 글 읽기에 딱 적당하다. 하지만 일부 1단 스킨이나 사용자들이 제작한 스킨의 경우 본문이 출력되는 폭이 800px 이상인 경우가 있다. 그러면 그 넓은 본문 영역에 검은 활자만이 가득 차 있게 된다. 너무 넓어서 게시물 내용만으로 본문을 다 채우기도 버거워 빈공간도 발생하곤 한다. 물론 글을 작성할 때 에디터 모드에서 사이즈를 조정해주면 되지만, 문제는 실제 본문 내용이 출력되는 공간이 원래부터 폭이 넓다는 점. 글이 옆으로 넓게 퍼져서 읽기도 난감하기도 하고. 이 경우 이 본문 공간을 잘 분할해서 효율적으로 활용하면 본문 내용 옆에 구글 광고도 배치할 수 있다만.. 그 방법을 알지 못해서 안타까워 한다. 그래서 대충 html 태그(table 태그)를 이용해서 한번 본문영역에 손을 대봤다. (이전에 사용하던 스킨이라 지금 블로그 모습과는 다르지만 원리면에서는 동일하니 별 문제는 없다.)
skin.html 파일을 건드려서 이 문제를 한번 해결해 보자.
아래 녹색 html 태그는 원래 없던 것을 새로 추가한 것이다.
실제 skin.html 을 열어보면
만 보인다.(바로 위 그림 참고) 물론 스킨의 종류나 각자 이전에 작업해 놓은 게 있으면 조금 다를 수 있지만, 아무튼
을 table 태그를 사용해서 적당히 왼편으로 이동시켜서 오른쪽에 공간을 만든다.
일단 본문내용을 찾습니다. CTRL + F 를 눌러서 아래
부분을 찾는다. 아래 소스가 복사가 안될 경우엔 첨부파일을 클릭. (단, 레이아웃 수정 작업 전, 관리자모드에서 반드시 skin.html 과 style.css 소스를 모두 백업 받아 놓습니다.)
<table width="100%">
<tr>
<!-- 테이블을 하나 만들어서 7:3 비율로 나눈다. 7 속엔 본문글이 들어가가 나머지 3속엔 광고나 다른글 보기 등의 콘텐츠가 들어가게 된다. (만약 반반씩, 즉 5:5로 나누고 싶다면 아래에서 각각 width=50%로 정의해 준다.)
-->
<td width="70%">
<table width="95%"><tr><td>
<br>
</td></tr></table>
</td>
<!-- 여기서 부터 오른쪽 여백을 새로 만든다. -->
<td width="30%">
<table width="100%">
<!-- 오른쪽 여백 첫번째 칸에 해당한다. -->
<tr><td width="100%" cellpadding="10" cellspacing="10">
넣고 싶은 내용 (1) - 블로그 본문 우측 내 인기글
<br>
넣고 싶은 내용 (2) - 블로그 본문 우측 내 최신글
</td></tr>
<!-- 오른쪽 여백 두번째 칸이다. -->
<tr><td width="100%">
<table width="100%" cellpadding="10" cellspacing="10"><tr><td width="100%">
넣고 싶은 내용 (3) - 블로그 본문 우측 <열린 영문법 특강>
<br>
넣고 싶은 내용 (4) - 블로그 본문 우측 <열린 어후/표현 특강>
</td></tr></table>
</td></tr>
</table>
</td>
</tr>
</table>
+ 티스토리 '태터데스크' 기능을 이용해 블로그 첫페이지(메인)에 광고 삽입하기
별다른 설정을 해주지 않는 한 블로그 메인화면은 가장 최근에 작성한 게시물이 차지하기 마련이다. 태터데스크 기능은 이러한 블로그 메인화면을 좀더 폼나게 만들어 주는 기능이다. 여러분이 유명 신문사 홈페이지에 접속해 보면 다양한 영역으로 기사들이 이미지(사진)과 함께 배치된 모양을 보았을 것이다. 바로 그러한 멋들어진 모양새를 내는 기능이라고 보면 된다.
아래에서는 태터데스크를 이용해서 첫페이지에 구글 애드센스를 삽입하는 방법을 알아보자. (그림의 경우 이전에 사용하던 스킨을 캡쳐한 것이기에 지금 블로그의 모습과는 다르다.)
우선 [관리자 모드] => [플러그인] => [테터데스크(첫페이지 만들기)]를 클릭한다.
그리고 블로그 Home 을 클릭하면 오른쪽 상단에 빨간 네모칸 속 박스가 생긴다. (태터데스크 설정하기)
[아이템 배치]를 클릭
[HTML 직접입력] => [아이템 배치하기] => [적용하기] 클릭
그러면 블로그 메인 하단에 아래와 같은 영역이 나타난다. 오른쪽 [설정]을 클릭.
[설정]을 클릭하면 아래에서 보듯, HTML 직접 입력란이 나타나는데, 빈칸에 구글 애드센스 광고소스를 삽입해 주면 된다. 그리고 노란색 박스 안 내용대로 따라하면 된다.
위와 같이 일단 HTML 직접입력 부터 먼저 적용해 보고, 다른 메뉴(최신글, 헤드라인 등) 만들기도 직접 시도해 보면 전체적인 감을 잡을 수 있다.
+ 마치며..
skin.html 및 style.css 소스 중 일부(때론 ; 기호 하나)가 빠질 경우, 스킨 레이아웃이 이상하게 변하거나 블로그가 엉망이 되는 수가 있습니다. 꼭 집중해서 따라하세요.
- '이전 글 링크 삽입 플러그인'은 글 본문 안에 이전에 작성해둔 글의 제목과 링크를 쉽게 삽입할 수 있도록 도와줍니다. 이전 글과 관련된 포스팅을 하면서 인용할 필요가 있을 때, 이전 글을 소개하곳 싶을 때 등 다양한 방법으로 활용해보세요! - 출처: 티스토리 공식 블로그 [본문으로]
- 카테고리 글 더보기 플러그인은 자신 또는 방문자가 보고 있는 글이 속한 카테고리의 다른 글들을 표시해주는 플러그인입니다. 카테고리 안의 다른 글을 추천하여 더 쉽게 많은 글을 만나볼 수 있게 도와줍니다. 카테고리 글 더보기 플러그인은 블로그 관리자의 [플러그인 > 플러그인 설정]에서 활성화하여 사용할 수 있습니다. 설정창에서는 블로그에서 보여줄 목록 수나 색상을 선택할 수 있습니다. Tip. 카테고리 글 더보기 플러그인은 '꾸미기' 플러그인에 해당합니다. - 출서: 티스토리 공식 블로그 [본문으로]
+ 댓글 창 옆에 광고 달기
아래 블로그 방명록을 방문해 보면 댓글창 속 오른편에 그림이 하나 보일 것이다. 단순 이미지를 넣어도 좋고, 애드센스와 같은 광고를 댓글창 옆에 달아두어도 좋다. 무엇보다 눈에 쉽게 띄기에 광고를 클릭할 확률도 높아지게 된다. 물론 이와 같은 클릭을 유발하는 의도적인 광고배치를 금지하고 있는 업체(애드센스 등등)도 있으므로, 사전에 광고를 댓글창 옆에 달아도 괜찮은지 여부를 먼저 확인해 봐야 한다.
http://mediglish.tistory.com/guestbook
아래 내용대로 차근차근 따라해서 내 댓글창 옆에 그림이나 광고를 붙여보자.
먼저 skin.html 파일 소스 중 아래 부분을 찾아서 <!-- ~~~ --> 태그로 막는다. 즉 웹상에 나타나지 않게 만드는 것이다. 빨리 찾는 방법은 <CTRL + F> 를 누른 뒤 ##_guest_textarea_body_## 을 입력하고 엔터키를 치면 된다.
<!--
<textarea name="##_guest_textarea_body_##" cols="50" rows="10"></textarea>
-->
위 부분이 실행되는 걸 막은 뒤 아래 코드로 대체한다.
<p class="clear">
<span><textarea name="##_guest_textarea_body_##" style="width: 530px; height: 243px;"></textarea></span>
<span style="float: right; width: 250px; height: 250px; background-color: #ffffff;">
<!-- 여기에 들어갈 이미지 삽입 -->
</span>
</p>
+ 태그 인기순/이름순 정렬하기
태그 화면에서 태그 정렬 기준을 사용하면 된다. 수백, 수천개의 태그들을 '인기순 (많이 사용한 단어 순)' 및 '이름순 (가나다 순)'으로 설정할 수 있다.
[관리자 메뉴] => [화면설정] => [화면출력] => [태그 인기순/이름순] 으로 설정하면 된다.
+ 티스토리 최상단에 드롭다운 수평 메뉴바 만들기
글작성 시점에 사용한 스킨을 더이상 사용하지 않는 관계로 현재 '열린 영어와 그 적들' 블로그 스킨과는 차이가 있습니다. 하지만 원리면에서는 동일하니, 기능을 구현하는 데 별 어려움은 없으리라 생각합니다.
+ 움직이는 태그 클라우드(태그박스) 만들기
+ 사이드바 영역에 예쁜 사진 삽입하기
+ 태그 클라우드 단어에 형광펜 칠하기
올해 초 사용하던 스킨에 적용한 기능이라 지금은 본 블로그에서 보이지는 않을 것이다. 하지만 원리는 동일하기에 아래 그림을 가지고 설명을 함.
예전 스킨을 사용할 때, 블로그 하단을 보면 [블로그 인기 키워드]라는 섹션이 있었다. 티스토리에서 제공하는 키워드 기능을 약간 응용해서 본문 하단에 삽입해 넣은 것이다. (아래 그림 참고)
가만히 보면 검은 바탕에 형광펜을 입힌 듯한 키워드들(단어)이 보인다. 이것은 css 파일을 수정해서 만든 것이다. html이나 css에 익숙하지 않은 사람들이라면 어떻게 만드는지 한번쯤 궁금점을 품어 봤을 만도 하다. (글쓴이도 마찬가지)
[관리자 모드(admin)] => [HTML/CSS 편집] 순서대로 클릭해서 style.css 파일을 연다.
<CTRL + F>를 이용해서 tagbox 부분을 찾는다. tabbox 부분 수정을 통해 형광펜 디자인을 만들 수 있다.
<= 스킨 종류에 따라 조금씩 다를 수 있다.
아마 #tagbox 코드가 쭈욱 나타날 것이다. tagbox 코드 마지막 부분에 아래 소스를 추가해 준다.
참고로 cloud8 까지 정의되어 있다고 가정해서 추가부분엔 cloud9가 된다. 만약 여러분의 style.css 속 tagbox 코드가 cloud5까지 있다면, 추가되는 부분은 cloud6이 된다. cloud3까지 있으면 cloud4 가 되고. 쉽게 말해 기존에 정의된 것 외에 하나를 내 마음대로 정의해주는 것이다.
<= 주의!! 원래 있던 style.css 파일의 cloud 와 겹치지 않도록 해줘야 한다. 이를 위해 cloud 다음에 적당한 숫자를 붙여주면 좋다. 겹칠 확률이 없는 것으로. 예를 들어 cloud_101 과 같이.
#tagbox li .cloud9 {
background-color:#000; /* 형광펜 색상이다. 검은색 */
color:#47C83E; /* 키워드 색깔. 녹색 */
font-size: 12px; /* 키워드 크기 12px */
font-weight:bold;
}
#tagbox li .cloud10 {
background-color:#000; /* 형광펜 색상이다. 검은색 */
color:#ffffff; /* 키워드 색깔. 흰색 */
font-size: 14px; /* 키워드 크기 14px 로 변경 */
font-weight:bold;
}
별거 아니다. 블로그 첫페이지(메인화면)을 아래와 같이 편집해서 걸어 놓는 것이다.
이렇게 하면 블로그에 구글 애드센스 광고를 가급적 많이 삽입하고자 하는 경우 유리하다. 보통 일반적인 스킨의 경우, 블로그 첫페이지에 본문이 바로 출력되는 경우가 많다. 하지만 태터데스크 기능을 이용해서 첫페이지를 태터데스크 페이지로 만들면 구글 애드센스 광고를 1-2개 더 삽입할 수 있다. 애드센스의 콘텐츠 광고의 경우 블로그 한 페이지에 노출되는 광고수가 3개로 제한되어 있기 때문에, 이와 같이 메인 페이지를 따로 만들어 주면 광고를 그만큼 더 많이 실을 수 있는 것이다.
참고로 아래 캡쳐화면을 보면 알겠지만, 블로그 첫페이지(첫번째, 두번째), 블로그 본문 페이지(3번째)에 각각 두개씩의 구글 광고(빨간색 네모칸)가 삽입되어 있다. 만약 첫페이지를 따로 설정하지 않으면 블로그 본문 페이지가 첫페이지를 대신하는 관계로 광고가 2개 줄어들게 된다. (콘텐츠 광고와는 별개인 링크, 검색 광고까지 포함시키면 더 많은 광고를 실을 수 있지만 여기서는 일단 콘텐츠 광고만 다룬다.)
+ 티스토리 본문 영역 분할하기: 애드센스 삽입, 폭(넓이) 줄이기, 레이아웃 변경
아래 적혀있는 설명대로 따라하기 전에 반드시 기존 스킨(skin)을 백업하시기 바랍니다. 반드시!! 그리고 스킨 백업 후 다시 별도로 skin.html, style.css 파일을 한번 더 백업하시기 바랍니다.
치환자(아래 빨간색 [#으로 시작되는 부분)가 본문에 나타나지 않는 관계로 그림(이미지)로 대체하였습니다. 따라서 아래 빨간색 치환자는 직접 타이핑하거나 원래 소스에서 복사하셔야 합니다.
간혹 티스토리 스킨을 적용시켜 보면 본문 폭이 너무 넓게 퍼져서 난감한 경우가 있다. 티스토리에서 제공하는 3단 스킨의 경우, 대개 본문 폭이 570px 내외라 글 읽기에 딱 적당하다. 하지만 일부 1단 스킨이나 사용자들이 제작한 스킨의 경우 본문이 출력되는 폭이 800px 이상인 경우가 있다. 그러면 그 넓은 본문 영역에 검은 활자만이 가득 차 있게 된다. 너무 넓어서 게시물 내용만으로 본문을 다 채우기도 버거워 빈공간도 발생하곤 한다. 물론 글을 작성할 때 에디터 모드에서 사이즈를 조정해주면 되지만, 문제는 실제 본문 내용이 출력되는 공간이 원래부터 폭이 넓다는 점. 글이 옆으로 넓게 퍼져서 읽기도 난감하기도 하고. 이 경우 이 본문 공간을 잘 분할해서 효율적으로 활용하면 본문 내용 옆에 구글 광고도 배치할 수 있다만.. 그 방법을 알지 못해서 안타까워 한다. 그래서 대충 html 태그(table 태그)를 이용해서 한번 본문영역에 손을 대봤다. (이전에 사용하던 스킨이라 지금 블로그 모습과는 다르지만 원리면에서는 동일하니 별 문제는 없다.)
skin.html 파일을 건드려서 이 문제를 한번 해결해 보자.
아래 녹색 html 태그는 원래 없던 것을 새로 추가한 것이다.
실제 skin.html 을 열어보면
만 보인다.(바로 위 그림 참고) 물론 스킨의 종류나 각자 이전에 작업해 놓은 게 있으면 조금 다를 수 있지만, 아무튼
을 table 태그를 사용해서 적당히 왼편으로 이동시켜서 오른쪽에 공간을 만든다.
일단 본문내용을 찾습니다. CTRL + F 를 눌러서 아래
부분을 찾는다. 아래 소스가 복사가 안될 경우엔 첨부파일을 클릭. (단, 레이아웃 수정 작업 전, 관리자모드에서 반드시 skin.html 과 style.css 소스를 모두 백업 받아 놓습니다.)
<table width="100%">
<tr>
<!-- 테이블을 하나 만들어서 7:3 비율로 나눈다. 7 속엔 본문글이 들어가가 나머지 3속엔 광고나 다른글 보기 등의 콘텐츠가 들어가게 된다. (만약 반반씩, 즉 5:5로 나누고 싶다면 아래에서 각각 width=50%로 정의해 준다.)
-->
<td width="70%">
<table width="95%"><tr><td>
<br>
</td></tr></table>
</td>
<!-- 여기서 부터 오른쪽 여백을 새로 만든다. -->
<td width="30%">
<table width="100%">
<!-- 오른쪽 여백 첫번째 칸에 해당한다. -->
<tr><td width="100%" cellpadding="10" cellspacing="10">
넣고 싶은 내용 (1) - 블로그 본문 우측 내 인기글
<br>
넣고 싶은 내용 (2) - 블로그 본문 우측 내 최신글
</td></tr>
<!-- 오른쪽 여백 두번째 칸이다. -->
<tr><td width="100%">
<table width="100%" cellpadding="10" cellspacing="10"><tr><td width="100%">
넣고 싶은 내용 (3) - 블로그 본문 우측 <열린 영문법 특강>
<br>
넣고 싶은 내용 (4) - 블로그 본문 우측 <열린 어후/표현 특강>
</td></tr></table>
</td></tr>
</table>
</td>
</tr>
</table>
+ 티스토리 '태터데스크' 기능을 이용해 블로그 첫페이지(메인)에 광고 삽입하기
별다른 설정을 해주지 않는 한 블로그 메인화면은 가장 최근에 작성한 게시물이 차지하기 마련이다. 태터데스크 기능은 이러한 블로그 메인화면을 좀더 폼나게 만들어 주는 기능이다. 여러분이 유명 신문사 홈페이지에 접속해 보면 다양한 영역으로 기사들이 이미지(사진)과 함께 배치된 모양을 보았을 것이다. 바로 그러한 멋들어진 모양새를 내는 기능이라고 보면 된다.
아래에서는 태터데스크를 이용해서 첫페이지에 구글 애드센스를 삽입하는 방법을 알아보자. (그림의 경우 이전에 사용하던 스킨을 캡쳐한 것이기에 지금 블로그의 모습과는 다르다.)
우선 [관리자 모드] => [플러그인] => [테터데스크(첫페이지 만들기)]를 클릭한다.
그리고 블로그 Home 을 클릭하면 오른쪽 상단에 빨간 네모칸 속 박스가 생긴다. (태터데스크 설정하기)
[아이템 배치]를 클릭
[HTML 직접입력] => [아이템 배치하기] => [적용하기] 클릭
그러면 블로그 메인 하단에 아래와 같은 영역이 나타난다. 오른쪽 [설정]을 클릭.
[설정]을 클릭하면 아래에서 보듯, HTML 직접 입력란이 나타나는데, 빈칸에 구글 애드센스 광고소스를 삽입해 주면 된다. 그리고 노란색 박스 안 내용대로 따라하면 된다.
위와 같이 일단 HTML 직접입력 부터 먼저 적용해 보고, 다른 메뉴(최신글, 헤드라인 등) 만들기도 직접 시도해 보면 전체적인 감을 잡을 수 있다.
+ 마치며..
skin.html 및 style.css 소스 중 일부(때론 ; 기호 하나)가 빠질 경우, 스킨 레이아웃이 이상하게 변하거나 블로그가 엉망이 되는 수가 있습니다. 꼭 집중해서 따라하세요.
- '이전 글 링크 삽입 플러그인'은 글 본문 안에 이전에 작성해둔 글의 제목과 링크를 쉽게 삽입할 수 있도록 도와줍니다. 이전 글과 관련된 포스팅을 하면서 인용할 필요가 있을 때, 이전 글을 소개하곳 싶을 때 등 다양한 방법으로 활용해보세요! - 출처: 티스토리 공식 블로그 [본문으로]
- 카테고리 글 더보기 플러그인은 자신 또는 방문자가 보고 있는 글이 속한 카테고리의 다른 글들을 표시해주는 플러그인입니다. 카테고리 안의 다른 글을 추천하여 더 쉽게 많은 글을 만나볼 수 있게 도와줍니다. 카테고리 글 더보기 플러그인은 블로그 관리자의 [플러그인 > 플러그인 설정]에서 활성화하여 사용할 수 있습니다. 설정창에서는 블로그에서 보여줄 목록 수나 색상을 선택할 수 있습니다. Tip. 카테고리 글 더보기 플러그인은 '꾸미기' 플러그인에 해당합니다. - 출서: 티스토리 공식 블로그 [본문으로]
'티스토리|애드센스' 카테고리의 다른 글
| 티스토리 상단 메뉴바(수평 메뉴) 만들기 (1) | 2013.09.24 |
|---|---|
| 티스토리 블로그에 올린 사진이 잘릴 때 (0) | 2013.09.23 |
| 테이블(박스)에 상하 공백 문제 - 테이블 줄사이 간격이 넓어질 때 (0) | 2013.09.19 |
| 애드센스 계정이 영어 페이지로 바뀌었얼 때 (0) | 2013.09.11 |
| 리얼센스 이용약관 개정안내(2013년 9월 9일 부터 적용) (0) | 2013.08.31 |
