티스토리 블로그 여러가지 스킨 수정 팁

여기에 포스팅된 스킨 수정 팁들은

티스토리 Square 반응형 스킨 기준이다.

HTML과 CSS를 수정해서 변경하는 방법인데,

다른 스킨에서도 비슷한 방법으로 변경할 수 있다.

HTML과 CSS을 수정할 땐 혹시 모를

상황에 대비해 백업을 반드시 미리 해야한다.

---

- 글꼴 변경하기 -

기본 글꼴 말고 다른 글꼴로 바꾸고 싶은 경우

원하는 글꼴이름 뒤에 '웹폰트' 라고 붙여서 검색한다.

그 다음 웹폰트의 링크를 복사한다.

@import url(http://....);

이런 형식의 코드이다.

그리고 보통 웹폰트 링크가 있는 곳에서

안내를 보면 정식 글꼴 이름을 알 수 있다.

이 링크를 스킨 CSS 맨 위쪽에 붙여넣고,

찾기를 이용해서 원래의 글꼴 이름을

CSS에서 전부 찾아서 새로운 글꼴 이름으로 변경한다.

그리고 나서 포스팅을 작성할 때 에디터 안에서

글꼴을 따로 변경하지 않으면 CSS에서 설정한

글꼴로 변경되어 포스팅된다.

---

- 전체 포스팅의 글꼴 변경하기 -

전체 포스팅의 글꼴을 변경하고 싶은 경우

위와 같은 방법으로 폰트를 변경하면

포스팅했던 내용 중 에디터로 기본글꼴을

설정했던 이전의 글들은 글꼴이 바뀌지 않는다.

이럴 때는 CSS의 !important 기능을 사용해서

강제로 글꼴을 변경시킬 수 있다.

HTML에서 본문은 article 이라는 클래스에 속한다.

그리고 본문 내용은 기본적으로 p태그로 감싸져있고,

에디터로 글꼴을 변경했다면 그 안에서 span태그

로 한번 더 감싸져있을 것이다. 이것을 이용해서,

.article p span { font-size: XXXpx !important; 

font-family: "XXX", "XXX" !important; 

letter-spacing: XXXpx !important; 

line-height: XXX% !important; 

word-break: keep-all !important; }

이와 같은 코드를 CSS 내에 넣고 XXX부분 안에

자기가 원하는 값과 글꼴을 넣어놓으면

블로그의 전체 포스팅의 글꼴이 강제 변경된다.

다른 스킨에서는 다른 클래스 안에 본문이 포함된

경우도 있는데, HTML에서 본문 클래스를 찾아야 한다.

여기에는 글꼴 뿐만 아니라 폰트 크기, 자간, 행간

등의 속성을 강제로 넣을 수 있는데,

이를 이용해서 앞으로 게시할 포스팅에서도

일부러 글꼴이나 폰트 크기를 변경하여

span태그를 넣게 해서 CSS에서 정한 글꼴과

양식으로 강제로 바뀌도록 할 수 있다. 

그런데 이 방법을 사용하면 다른 글꼴로는 변경이

어렵기에 보통 권장하지는 않는 방법이라고 한다.

---

- 상단 여백 조절하기 -

상단 여백이 너무 넓거나 좁다고 느끼는 경우

CSS에서 아래 코드를 찾는다.

#head { position: relative; padding-top: XXXpx; 

width: 100%; text-align: center; }

XXX부분의 값을 변경하면 블로그의 상단 여백을

조절할 수 있다. 사이드바의 경우 상단 여백은

#sidebar .blank { clear: both; width: 100%; 

height: XXXpx; }

위 코드를 찾아서 XXX부분 값을 변경하면 된다.

---

- 본문 위 태그를 본문 아래로 내리기 -

태그가 본문의 위쪽에 있어서 거슬리는 경우

HTML에서 아래 코드 부분을 찾는다.

<div id="body" class="entry">

이 코드 아랫부분에 항목이 있다.

<div class="tag_label">...</div> 항목과

<div class="article">...</div> 항목의 위치를

위아래로 바꿔주면 태그가 글 아래로 내려간다.

반드시 class의 div가 닫히는 부분

</div>까지 전체 항목을 선택해야 한다.

---

- 댓글에 달린 답글 들여쓰기로 조절하기 -

Square 반응형 스킨의 경우에는

댓글과 답글 구분이 구분선의 굵기로 정해진다.

하지만 들여쓰기로 댓글과 답글을 명확히

구분하고 싶다면 CSS에서 다음 코드를 찾는다.

#communicate .communicateList ul li 

{ list-style: none; padding: 15px 0 0 XXXpx; 

margin-top: 10px; border-top: 1px dotted #ddd; }

위 코드는 댓글에 달린 답글 부분의 양식인데,

XXX부분에 원하는 값을 넣으면 그만큼

좌측에 패딩이 생겨서 들여쓰는 효과가 생긴다.

---

- 사이드바 폭 조절하기 -

사이드바의 폭을 좁히거나 넓히고 싶은 경우

CSS에서 아래 코드를 찾는다.

#sidebar { position: fixed; top: 0; left: 0; 

bottom: 0; padding: 0; width: XXXpx; 

height: 100%; background-color: #fff; 

border-right: 1px solid #ddd; 

cursor: default; }

XXX부분에 원하는 값을 넣으면 폭이 변경된다.

폭을 좁혀야 하는 경우에는 이 값만 바꾸면 된다.

하지만 폭을 늘릴 경우에는 모바일 반응형에서

늘린 만큼 왼쪽에 사이드바가 튀어나온다.

그렇기 때문에 코드를 더 변경해야 한다.

CSS에서 아래 코드를 찾는다.

@media all and (max-width: 959px) { 

#sidebar { z-index: 100; 

-webkit-transform: translate3d(-XXXpx,0,0);

-moz-transform: translate3d(-XXXpx,0,0);

transform: translate3d(-XXXpx,0,0);

모바일 반응형에서 사이드바를 숨기는 

코드인데 XXX부분을 위에서 변경한 

사이드바의 폭과 같은 값으로 바꿔준다.

사이드바의 폭을 많이 늘려서 본문과 겹치는 

경우, 그리고 반대로 사이드바 폭을 줄여서

본문과 사이드바 사이가 넓을 경우에는

본문의 위치를 조절할 수 있다.

#content { margin: 0 0 0 XXXpx; padding: 0; }

위 코드를 찾아서 XXX부분 값을 변경하면

본문의 왼쪽 여백을 조절할 수 있다.

---

- 사이드바에 항목 이름 넣기 -

이것은 최근 댓글 부분과 공지사항에 적용했는데

최근 댓글이 나오는 부분에 그 항목이 댓글이라는

표시가 없어서 '+Recent Comments' 라고 넣었다.

우선 HTML에서 다음 코드를 찾는다.

<div class="widget">

<ul id="recentComments">

위 코드의 그 바로 밑에 

다음 코드를 붙여넣는다.

<div class="title">XXX</div>

XXX부분에 'Recent Comments', '최근 댓글' 등

사이드바에 표시할 글을 넣으면

최근 댓글 목록 위에 그 글이 표시된다.

---

- 사이드바에 상단에 이미지 넣기 -

우선 넣고 싶은 이미지를 HTML/CSS 수정 페이지

왼쪽 상단의 파일 업로드 칸에서 업로드한다.

그 다음 CSS의 사이드바 관련 코드가 있는 곳이나

아무 줄에다가 다음 코드를 불여넣는다.

#sidebar .img { padding: 0 XXXpx; }

XXX부분에 이미지의 좌우 패딩값을 넣는다.

그리고 HTML에서 다음 코드를 찾는다.

<div id="sidebar">

<div class="blank"></div>

그 바로 밑에 다음 코드를 붙여넣는다.

<div class="img">

<a href="https://ratatui.tistory.com/">

<img src='./images/XXX.xxx'>

</a></div>

XXX.xxx 부분에 '이미지이름.확장자' 를 넣으면

이미지가 사이드바에 표시되고,

그 이미지를 누르면 블로그 홈으로 이동된다.

---

- 사이드바에 줄 바뀌는 부분 자르기 -

사이드바의 최근 댓글 부분에 줄이 바뀌면

"XXXXXXXXXXXXXX..." 

이렇게 한 줄로 표시되지 않고

"XXXXXXXXXXXXXX

XX..."

이런 식으로 두 줄을 차지해서 보기 안좋다.

이럴 때 무조건 한 줄로 표시하고 싶다면

CSS에서 다음 코드를 찾는다.

#sidebar .widget li { ... }

{ ... } 안에 설정들이 있는데, 여기에 

word-break: break-word; 이 코드를 삭제하고

다음 설정을 대신 바꿔넣는다.

white-space:nowrap; 

overflow:hidden; 

text-overflow:ellipsis;

이렇게 넣으면 사이드바 항목들의 길이가

긴 경우에도 무조건 한 줄로 표시된다.

---

- 모바일 반응형 사이드바 버튼 조절하기 -

모바일 반응형에서 사이드바를 여는 버튼의

위치나 디자인을 바꾸고 싶은 경우

CSS에서 다음 코드를 찾는다.

#sidebar-toggle { display: block; 

position: fixed; XXX: 10px; YYY: 10px; 

width: 50px; height: 50px; line-height: 52px; 

text-align: center; font-size: 20px; 

color: #111; background-color: #f1f1f1; 

border-radius: 10px; opacity: 0.9; 

box-shadow: 0 0 10px #aaa; z-index: 101; }

위 코드에서 XXX부분에 left나 right를 넣고

YYY부분에 top이나 bottom이라고 써넣으면

버튼의 위치를 변경할 수 있고, 그 옆의

px값을 바꾸면 정확한 위치를 조절할 수 있다.

또한 뒤쪽 코드에서 색상, 크기값을 변경하면

버튼의 디자인을 세밀하게 바꿀 수 있다.

---

- 본문 최하단에 최근 글 목록 지우기 -

최근 글 목록의 썸네일이 표시되지 않아

그 부분을 아예 지우고 싶은 경우에는

아래 포스팅을 참고하면 된다.

<포스팅 링크>

이전에 다뤘던 내용인데 링크로 포함했다.

---

스킨에 바꾸고 싶은 내용이 있다면

구글 크롬이나 다른 브라우저의 검사 기능으로

먼저 그 부분의 HTML 태그를 찾은 다음,

CSS 편집에서 그 태그의 설정값을 수정했다.

포스팅 내용은 Square 반응형 스킨 기준이지만,

다른 스킨을 사용하는 경우에는 위 방법으로

어렵지 않게 스킨을 변경할 수 있다.