티스토리 블로그 내맘대로 스킨 설정 변경하기

 

CSS, HTML 몰라도 내가 원하는 스킨 만들기

가독성을 높여 블로그 체류시간을 늘리고 수익 올리기

---

 

티스토리에서 무료로 배포되는 많은 스킨들 중, 내가 원하는 Format으로 되어 있는 스킨을 설정했다고 하더라도 그 외의 설정들이 마음에 들지 않을 때가 있습니다. 예를 들면 글자 폰트라던지, 글자 크기, 줄 간격, 글자 간격 등이 여기에 해당될 것 같습니다. 

하지만, 정작 CSS, HTML을 잘 모르기 때문에 설정을 변경하기란 쉬운 일이 아닙니다. 특히 처음 접하는 분들에게는 설정을 어디에서 어떻게 변경하는지도 찾기 어려울 때가 많습니다. 

그래서 오늘은 손쉽게 변경하고자 하는 위치의 CSS를 찾는 방법과, 변경하는 몇가지 방법을 알아보려고 합니다.

 

---

CSS Code 위치 쉽게 찾기

---

1. 내가 운영중인 티스토리 블로그 사이트 창을 열어줍니다.

그런 후에 아래 그림과 같이 인터넷 창 우측 상단에 있는

'점 세개(맞춤설정 및 제어)'를 클릭, 

도구 더보기 클릭,

개발자도구를 선택해줍니다. 

(단축키 : Ctrl + Shift + I )

 

< 개발자도구 옵션 찾기 >

 

---

2. 그럼 아래와 같이 우측에 알 수 없는 수많은 CODE들이 보이게 됩니다.

이게 자바스크립트라고 하는 것인데, 이런 내용 하나도 몰라도 상관없습니다.

이 상태에서 그림과 같이 '1번' 화살표 모양의 부분을 클릭합니다.

(Select an element in the page to inspect it)

(단축키 : Ctrl + Shift + C)

 

---

3. 왼쪽 내 블로그내에 변경하고자 하는 위치를 클릭합니다. 

그러면, 클릭한 위치에 해당하는 HTML Code가 '3번' Box가 있는 곳에 표시가 됩니다. 

 

저는 '은블리 라이프'를 클릭했습니다.

3번 Box에 아래와 같은 Code가 보입니다.

display: inline-block; height: 32px; text-decoration: none; color: #333; vertical-align: top;

'은블리 라이프'에 대한 Code 값입니다.

Code별 내용은 글 맨 아래에 추가해 놓겠습니다.

 

 

이제 내가 변경하려고 하는 위치의 Code 값을 알게 되었습니다. 

 

 

이 Code 값을 적어두고, 해당 Code 값을 찾아 설정을 변경해주면 됩니다.

 

---

4. 다시 내 블로그의 설정으로 이동해서, 스킨 편집을 클릭합니다. 

스킨 편집 우측에 HTML편집 클릭, 그리고 CSS를 선택해줍니다.

그 상태에서 단축키 'Ctrl+F'(찾기) 를 눌러줍니다. 

그러면 아래와 같이 '검색:' 이라는 부분이 생성됩니다.

여기에 아까 알아두었던 Code 중 일부를 복사해서 붙여 넣고 Enter를 칩니다.

그럼 CSS 내에 해당 Code가 있는 곳을 찾을 수 있습니다. 

이제 해당 Code값을 내가 원하는대로 바꿔주면 됩니다. 

 

 

여기서 '주의' 할 것은

Code 변경 후 '새로고침' 기능을 이용해서 원하는 스타일로 변경됐는지 확인 후에, 최종 적용해주시기 바랍니다. 

큰 오류를 만들 수 있는 Code가 수정된 상태로 바로 적용해버리면, 돌이킬 수 없는 상태가 될 수도 있으니, 

적용은 꼭!! 신중하게 하시길 바랍니다.

---

스킨 설정에 대한 정답은 없습니다. 각자 본인이 좋아하는 스타일의 스킨을 만들어야 글도 쓰고 싶어지지 않을까 생각됩니다. 내가 보기에 편한 블로그가 방문자들 눈에도 편한 블로그가 될 가능성이 높으며, 그로 인해 글 내용에 집중할 수 있게 되고, 블로그내 체류 시간이 늘어나서 결국 광고 수익 창출로 돌아오게 될 것입니다.

---

 

아래 Code 변경시 유용한 몇 가지 Code에 대한 설명을 추가해놨습니다. 

참고하셔서 내가 원하는 스타일의 블로그를 만드시길 바랍니다. 

 

참고로, 

블로그 글씨체 변경에 관한 내용은 아래 링크 참고하시면 됩니다.

 

 

티스토리 글씨체(글자폰트) 변경, 5분이면 끝

 

 

---

몇 가지 Code 추가 

---

text-indent: 20px;  들여 쓰기 20px 적용

line-height: normal;  이 단락 줄 간격은 Normal

line-height: 200%  이 단락 줄간격은 200%

line-height: 2;   이 단락 줄간격은 2배

line-height: 20px;  이 단락 줄간격은 20xp

letter-spacing: 5px; 글자 간격이 5px

color: red;  글자 색상은 빨간색

text-align: center; 글자 위치는 중앙 (or left, right)

width: 300px; height: 300px; 지정된 영역내에서 텍스트가 맞춰 설정

---