본문 바로가기
Tistory

티스토리 스킨 편집으로 소제목 깔끔하게 꾸미기

by 썽하 2020. 7. 6.

티스토리를 시작하면서 따로 유료 스킨이나 다른 개발자분들이 만든 것들을 사용하지 않은 이유는 다음과 같다.

 

1. 모든 것을 만족하는 것을 찾기가 쉽지 않다.
2. 무채색을 극도로 좋아하는 내 취향에 어긋나는 디자인.
3. 스킨을 추가 편집하게 되면 라이선스 문제가 생기는 경우도 있지 않을까..?

 

하여, 티스토리 스킨에 조금씩 조금씩 살을 붙여 개인형 스킨을 만들고자 한다.

우선, 오늘은 제목 태그 꾸미기, 개발자 용어로는 H태그 CSS 수정 정도가 되겠다.

 

스킨 보관

우선, 스킨 편집으로 소제목을 꾸미다 보면, 의도했던 바와 다르게 오류가 생기기도 하고 엉망이 되기도 한다.

그럴 때를 대비하여 스킨을 보관한다.

블로그 관리 - 꾸미기/스킨 변경 - 보관 -이름 입력 후 저장

 

 

수정할 CSS 찾기

블로그 관리 - 스킨 편집 - HTML 편집 - CSS - [ctrl + F] - [수정할 CSS] 입력 후 엔터

여기에서 수정할 CSS는 entry-content h3(제목2) 태그이다.

비전공자를 위해 부연설 명하자면 3과 2가 맞지 않아 오타 같지만 그게 아닌 티스토리에서 기본적으로 저렇게 제공을 하고 있다고 알고 있으면 될 것 같다.

 

 

 

CSS 수정

위에서 찾은 CSS에 아래 스타일을 추가해 수정해줍니다. 수정할 스타일은 여백많은 노트님의 블로그에서 참고

border-style: solid;
border-width : 0px 0px 1px 15px;
border-color: #757575;
background-color: #fff;
padding: 7px;

이후 후측 상단의 [적용] 버튼을 눌러준다.

 

확인하기 

이제 잘 적용이 되는지 확인해 본다.

이상 없음.

다른 소제목이나 본문도 동일한 방식으로 스타일을 수정할 수 있다.

 

 

마치며

이렇게 간단한 포스팅 하나 하는데도 30분 이상이 걸렸다.

심지어, 귀찮아서 스크린샷에 순서조차 기입하지 않았는데, 정말 오래 걸린다. 앞으로 얼마나 기록이 지속될지 모르겠지만, 습관이 되기까지는 상당한 노력이 필요할 것 같다.

 

다음번에는 그림 테두리 추가나, 인용구 깔끔하게 바꾸기 등을 해볼 예정.

댓글