본문 바로가기

정보 모음/블로그 팁 정보

그냥 해본 티스토리 블로그 스킨 편집하기

by 아이러니한아이러니 2021. 6. 30.

 

 

티스토리 블로그 포스팅을 하면서 인용문이나 

글씨 폰트 크기 , 행 사이 간격 등이 스타일이 마음에 들지 않을 때가 있습니다. 

그래서 여기저기 CSS 로 수정하는 방법을 알아보다가

제가 사용하는 북클럽 스킨에서 CSS 수정하는 방법이 좀처럼 찾기 가 어려워서 

직접 찾아서 수정하고 확인인 작업까지 끝나서 

이제 여려분들께 알려드리고자 합니다. 

(현제 CSS 수정 방법은 북스 킨 을 기준으로 설명드리는 점 참고 바랍니다)

 

사용하는 단축키

사하기( Ctrl+C), 붙여 넣기(Ctrl +V), 전채 선택(Ctrl+A), 문자 찾기(Ctrl +F )

 

 

css로 가는 방법

1. 우선 관리자 메뉴에서 스킨 편집을 눌러줍니다. 
2. 스킨 편집 화면이 표시되면 오른쪽에 html 편집을 눌러줍니다.

3.html 편집 화면으로 바뀌면 상단에 CSS을 눌러 이동해줍니다. 

※만약을 대비해서 CSS 코드에 커서를 옮겨서 전채 선택(Ctrl+A) 을해서
복사하기( Ctrl+C)를 한 다음에 메모장을 열어서 메모장에 붙여 넣기(Ctrl +V)
를해서 미리 백업을 해두시길 추천드립니다.

 

 

 

본문 글자 크기 및 문단 사이 거리 조절하기

1.CSS 화면에서 문자 찾기(Ctrl +F )를 눌러서 

. entry-content p 

를 찾아줍니다.

여기서 값을 수정해야 되는 부분이 

font-size: 글자 크기

line-height: 문단 사이 길이

입니다. 

 

수정 작업 완료하기

 

수정이 완료되었으면 오른쪽 상단에 적용 버튼을 눌러주시면

 

수정이 완료됩니다.

 

 

 

그 외 인용구 부분 수정 방법

여기에 있는 인용구 사용했을때  글쓰기 완료시 표시되는 부분을 수정

 

 

※ 스킨 편집 - html 형식 - css까지 간 상황에서 시작하겠습니다. 

 

 

 

CSS 편집창에서 스크롤 맨 아래쪽으로 이동한 뒤 

아래의 코드를 복사해서 붙여 넣기를 해주시면 됩니다. 

 

(복사, 붙여 넣기 하는 방법 : 클릭)

 

 

#tt-body-page blockquote [data-ke-style='style3'] {
border: 1px solid #dddddd;
background: #ffffcc;
text-align: left;
font-weight:bold;
font-size:20px;
padding: 21px 25px 20px 25px;
color: #9427a6;
line-height: 1.75;
}

 



#tt-body-page blockquote[data-ke-style='style1'] {
text-align: center;
background: url(https://t1.daumcdn.net/keditor/dist/0.4.9/image/blockquote-style1.svg) no-repeat 50% 0,url(https://t1.daumcdn.net/keditor/dist/0.4.9/image/blockquote-style1.svg) no-repeat 50% 100%;
padding: 34px 0 34px 0;
font-size: 15pt;
color: #333;
line-height: 40px;
border: 0 none;
}

 


#tt-body-page blockquote[data-ke-style='style2'] {
margin-bottom: 40px;
padding: 0px 20px;
font-size: 20px;
border-left: 7px solid #e6e6e6;
}

 

기존 인용구의 글씨 크기를 크게 변경했습니다. 

 

아직은 완벽하게는 다 수정하지 못했는데 나중에 방법을 알게 되는 데로

포스팅해서 올려보도록 하겠습니다.

 

컬러값 찾는법과 수정방법은 다음시간에 알려드릴께요~!