티스토리 꾸미기

 

1) 스킨 선택 하기

저는 첫번째로 카테고리 리스트가 펼쳐져 있었으면 좋겠고, 간편하게 편집할 수 있게 *스킨위자드를 지원 했으면 좋겠다고 생각했습니다. 전에 poster형? 스킨을 선택해서 카테고리를 펼치게 하려다가 엉첨 고생했습니다. 대부분의 사람들은 ##_category_##를 수정하는데 저는 찾아봐도 없고 ##_category_list_##??이런 것만 있어서 list도 지워보고 열심히 며칠동안 카테고리 펼치기를 도전하다가 이미 카테고리가 펼쳐져있는 스킨을 선택하기로 했습니당! 그래도 얻은 사실이라고는 category와 category_list가 다르다는 것입니다!

*스킨위자드란? 스킨위자드 지원이 없으면 html로 다 수정해서 편집해야함.

 

<category>                               <category_list>

category랑 category_list의 차이 입니다 ㅎ 쵸큼? 차이가 느껴지시죠 ㅎㅎ

저는 pure black 스킨을 선택 했습니다.

 

2) 스킨 위자드 수정

관리자 -> 꾸미기 -> 스킨 편집

먼저 왼쪽 빨간색으로 칠한 공간의 색깔을 바꾸고 싶을 때는

스킨위자드 -> 배경 -> 배경색상을 원하는 것을 선택 합니다.

(저는 보라색으로 하도록 하겠습니당)

 

 

그다음에 위 빨간색으로 칠한 부분의 색깔을 노란색으로 바꿔보도록 하겠습니다

스킨위자드 -> 타이틀 -> 이미지 사용 체크 해제 -> 원하는 배경색 선택

 

이번에는 노란색으로 바꾼 부분의 넓이를 넓혀보도록 하겠습니다.

스킨 위자드 -> 텍스트 -> 원하는 높이를 지정(숫자가 커질 수록 높이가 커짐)

또한 블로그 타이틀에 쓸 글자색상과 글꼴 크기도 수정할 수 있습니다!

 

그 다음으로는 글씨가 써져있는 하얀색 바탕을 늘려보도록 하겠습니다.

스킨 위자드 -> 게시글 -> 글영역 넓이를 조절합니다!

(마찬가지로 글꼴과 글씨 크기 등을 수정할 수 있습니다.)

 

3) 사이드바 수정

 

이제 티스토리의 사이드바를 수정해보도록 하겠습니다.

저는 사진, 검색, 카테고리, 최근에 올라온 글, 달력 이렇게 넣고 싶었습니다.

티스토리 관리자 -> 꾸미기 -> 사이드바

사이드바1에 게시하고 싶은 모듈을 남기고 다른것은 빼주세요(-)

미리보기도 지원되니 변경사항 저장 하기 전에 미리보기로 확인도 해주세요!

지금까지 열심히 만든 스킨을 스킨등록으로 저장해주세요!

저는 보라색 배경에 노란색 포인트니 노보스킨이라고 저장해 놓겠습니다.

노보스킨이 잘 저장된 것을 확인할 수 있습니다.

 

4) 사진 넣기

 

그 다음 T기본이미지에서 제가 넣고 싶은 사진으로 바꾸겠습니다.

 

HTML 수정으로 들어 갑니다.

Ctrl+F를 이용해서 s_sidebar을 찾습니다.

저희가 건드려야 할 부분은 <!-- 블로그 이미지 모듈 --> 입니다.

<!-- -->는 html에서 주석을 뜻 합니다.

우선 추가할 사진을 올려야 합니다.

우선 파일업로드를 클릭합니다.

ppppp 사진이 올라간게 보이시죠? 이름을 잘 기억해둡니다.

사진 유형은 GIF로 바꾸는 것이 좋습니다.

<img src="./images/ppppp.GIF"/>

이제 중요한 작업입니다.

<div id="blogImage">...</div>사이에 아래와 같은 문구를 넣어줍니다.

즉 <img src=본인 사진이름>으로 넣어 주면 됩니다.

적용 -> 새로 고침을 누르면 사진이 적용되는 것을 볼 수 있습니다.

이렇게 하면 제가 추가한 사진과 기본 티스토리 이미지 2개가 올라가게 됩니다.

기본 티스토리 이미지를 삭제 해주고 싶으면 아래와 따라 합니다!

기존의 <img = src="https://tistory1.daumcdn.net/tistory/3027629/attach/e626d7b3d0a248f7a4970c0b756a801f"... 이 문구를 삭제하면 됩니다.

그러면 제가 넣고 싶은 사진만 남게 됩니다!

 

[티스토리 블로그 관련 게시글]

* 티스토리 꾸미기 관련 분류, 배경 색상, 블로그 타이틀, 사이드바, 사진 넣는 방법 => https://seul96.tistory.com/36 flatinum 스킨 편집 방법 및 인스타그램, 유튜브 등 링크 연결하는 방법 => https://seul96.tistory.com/209 Odyssey 인스타그램, 페이스북, 유튜브, 틱톡, 깃허브 등 링크 연결하는 방법 => https://seul96.tistory.com/277 * 애드센스 수익관련 티스토리 회원가입 부터 애드센스 승인까지 => https://seul96.tistory.com/175 애드센스 수입 높이는 꿀 팁 => https://seul96.tistory.com/177 애드센스 PIN 번호가 안올 때 해결 방법 => https://seul96.tistory.com/196 애드센스 vs 애드핏 vs 텐핑 vs 데이블 비교 => https://seul96.tistory.com/263 블로그가 갑자기 하락할 때 하락원인 파악 후 해결 => https://seul96.tistory.com/279 * 티스토리 플러그인 사용 관련 유튜브 동영상 이전발행글 첨부 => https://seul96.tistory.com/280 아이콘/이모티콘 사용 및 링크색 변환 => https://seul96.tistory.com/281 구글/네이버 애널리틱스, 서치콘솔 사용 => https://seul96.tistory.com/282 스팸방지 플러그인 사용 => https://seul96.tistory.com/284 sns 로그인 후 댓글달기 추가 방법 => https://seul96.tistory.com/285 다음 및 드래그 검색, 카테고리 추가 => https://seul96.tistory.com/286 통계 그래프, 배너/태그 입력 플러그인 사용 => https://seul96.tistory.com/287 반은형 웹스킨/이미지 최적화 플러그인 사용 => https://seul96.tistory.com/295 소스코드 강조, 태그 입력기 플러그인 사용 => https://seul96.tistory.com/296