이번에는 밋밋한 제목에 스킨을 입혀보도록 하겠습니다.
일반적인 서식추가가 아닌, CSS 수정을 통해서 제목2로 글을 쓰면 자동으로 색이 입혀지는 마법(?)을 부려보도록 하겠습니다.
목차
0. 일반적인 서식 추가
가장 일반적으로 사람들이 사용하는 방법입니다.
인터넷에 보면 많은 분들이 서식을 올려주신 것을 볼 수 있습니다.
저는 그 중에서 아주 많이 쓰이는 것 같은 한 디자인을 가져왔습니다.
0. 테스트서식
이런 모양의 서식을 한번 추가해보도록 하겠습니다.
환경설정에서 콘텐츠 탭의 서식 관리에 들어갑니다.
그러면 서식 관리 페이지가 뜨는데, 오른쪽 위의 서식 쓰기를 눌러줍니다.
글쓰기 화면과 똑같은 화면입니다. 오른쪽 위의 기본 모드를 누른 후에 HTML로 변경해줍시다.
그럼 까만 HTML화면이 뜰텐데, 아래와 같이 html코드를 작성합니다.
배경 색을 바꾸고 싶으신 분은 background-color 부분을 색상코드표를 참조해서 바꾸시면 되고,
글씨 색을 바꾸시고 싶으신 분은 2번째 줄의 color을 바꾸시면 됩니다.
모서리 색을 바꾸시고 싶으시면 border-color을 바꾸시면 되고, 시작 여백을 늘리시고 싶으시다면 padding을 늘려주시면 됩니다.(물론 줄여도 됩니다!)
<div class="txc-textbox" style="border-style: solid; border-width: 0px 0px 1px 12px; border-color: #656665; background-color: #95ffd5; padding: 10px;">
<h3 data-ke-size="size23"><span style="font-size: 20pt; color: #656665;"><b>1. 테스트서식</b></span></h3>
</div>
<p> </p>
원하는 대로 다 만드셨으면 서식을 저장합니다.
이 서식은 글을 쓸 때 더보기를 눌러서 서식 버튼을 누르시면 쉽게 사용할 수 있습니다.
1. CSS 수정을 통해 더 간편하게 쓰기
위 방법은 편하지만, 매번 삽입할 때마다 HTML 편집기를 이용해 위치 수정을 해 줘야 한다는 단점이 있습니다.
그렇기 때문에 자주 사용하는 제목과 같은 부분에 쓰기에는 좀 번거롭죠.
이런 번거로움을 조금이나마 해소하기 위해서 단지 제목버튼을 누르는 것 만으로 사용할 수 있도록 바꿔보겠습니다!
이젠 익숙해진 환경설정의 스킨 편집 메뉴의 html 편집기로 들어가줍니다. (너무 자주 갔으니 사진은 생략합니다!)
그리고 html탭에서
이번에는 밋밋한 제목에 스킨을 입혀보도록 하겠습니다. 일반적인 서식추가가 아닌, CSS 수정을 통해서 제목2로 글을 쓰면 자동으로 색이 입혀지는 마법(?)을 부려보도록 하겠습니다. 목차 가장 일반적으로 사람들이 사용하는 방법입니다. 인터넷에 보면 많은 분들이 서식을 올려주신 것을 볼 수 있습니다. 저는 그 중에서 아주 많이 쓰이는 것 같은 한 디자인을 가져왔습니다. 0. 테스트서식 이런 모양의 서식을 한번 추가해보도록 하겠습니다. 환경설정에서 콘텐츠 탭의 서식 관리에 들어갑니다. 그러면 서식 관리 페이지가 뜨는데, 오른쪽 위의 서식 쓰기를 눌러줍니다. 글쓰기 화면과 똑같은 화면입니다. 오른쪽 위의 기본 모드를 누른 후에 HTML로 변경해줍시다. 그럼 까만 HTML화면이 뜰텐데, 아래와 같이 html코드를 작성합니다. 배경 색을 바꾸고 싶으신 분은 background-color 부분을 색상코드표를 참조해서 바꾸시면 되고, 글씨 색을 바꾸시고 싶으신 분은 2번째 줄의 color을 바꾸시면 됩니다. 모서리 색을 바꾸시고 싶으시면 border-color을 바꾸시면 되고, 시작 여백을 늘리시고 싶으시다면 padding을 늘려주시면 됩니다.(물론 줄여도 됩니다!) 원하는 대로 다 만드셨으면 서식을 저장합니다. 이 서식은 글을 쓸 때 더보기를 눌러서 서식 버튼을 누르시면 쉽게 사용할 수 있습니다. 위 방법은 편하지만, 매번 삽입할 때마다 HTML 편집기를 이용해 위치 수정을 해 줘야 한다는 단점이 있습니다. 그렇기 때문에 자주 사용하는 제목과 같은 부분에 쓰기에는 좀 번거롭죠. 이런 번거로움을 조금이나마 해소하기 위해서 단지 제목버튼을 누르는 것 만으로 사용할 수 있도록 바꿔보겠습니다! 이젠 익숙해진 환경설정의 스킨 편집 메뉴의 html 편집기로 들어가줍니다. (너무 자주 갔으니 사진은 생략합니다!) 그리고 html탭에서 를 찾습니다. (중간쯤에 있습니다) ※ html 코드에 대한 이해가 선행된다면 보다 쉽게 이해하시면서 따라오실 수 있습니다. 우리가 확인할 것은 가 들어있는 div class가 e-content와 post-content라는 것입니다. css에서 먼저 e-content를 찾아서 적용하고, 없으면 css에서 post-content를 찾아서 적용하게 됩니다. 여기서 의 의미는 블로그 본문 내용을 DB에서 가져온다는 것을 뜻합니다. 너무 어렵게 생각하지 않아도 됩니다. 본문이라고만 생각하면 되요. 이런 [##]형 코드들에 대한 자세한 설명은 아래 티스토리 스킨 가이드라는 이름의 github에 보다 자세하게 설명되어 있으니 참고하면 좋습니다! 티스토리 스킨 가이드 : tistory.github.io/document-tistory-skin/ 소개 · GitBook 티스토리 스킨 가이드 티스토리에서는 스킨을 통해서 사이트를 자유롭게 디자인할 수 있습니다. 스킨은 치환자를 사용하여 제작되고 사용된 치환자에는 티스토리의 데이터가 대입되어 티스토 tistory.github.io 그렇다면 이제 e-content와 post-content를 찾아야겠죠. html은 h2가 제목1, h3이 제목2, h4가 제목3을 담당하고 있습니다. p는 본문을 담당하죠. 그런데 e-content를 검색해보면 p밖에 없습니다. 따라서 제목2는 맨 위에 있는 기본 h3의 설정을 따라가게 됩니다. 여기서 h3을 통째로 바꿔도 잘 동작하지만, 아래와 같이 예기치 못한 오류가 발생할 수 있습니다. 그래서 저는 따로 post-content h3을 만들어서 CSS의 맨 마지막에 넣어주었습니다. 이렇게 만들면 post-content라는 class의 h3만 변경하니 위의 운영중인 블로그에는 영향이 가지 않게 됩니다. 이제 코드 내용을 조금 살펴보죠. 아까 서식에서와 같은 맥락입니다. 다만 여기서 하나 달라진 것은 padding이 아니라 text-indent가 들어갔습니다. 제가 padding을 사용하려고 열심히 노력해봤는데 이상하게 텍스트에서는 padding이 먹히지가 않았습니다.(해결책이 있으신 분은 댓글로 남겨주시면 정말 감사하겠습니다 ㅠ) 그래서 어쩔 수 없이 text-indent를 사용해서 강제로 띄어쓰기를 해 줬습니다. 이런 indent가 필요 없으신 분은 이 부분을 지우셔도 무방합니다. 적용을 하고 실제로 글을 써 봅시다. 편집할 때는 적용되지 않지만 글을 작성 완료하고 들어가면 바뀌어 있게 됩니다. 이 방법의 장점이자 단점은 모든 글의 제목2에 같은 스킨이 자동으로 입혀진다는 것입니다. 만약 원하지 않는 부분은 또 따로 수정을 해 주어야 하죠. 한번에 관리하고자 하는 저같은 사람에게는 오히려 장점인 부분입니다. 이전 서식 방법보다 훨씬 편리하게 사용할 수 있게 되어서 매우 만족스럽습니다. ++ 20.01.22. 애초에 스킨의 초기 상태로 돌려도 운영중인 블로그가 이상하게 크게 나오더군요. 이 부분을 아래와 같이 원래대로 바꿔주기 위해서 조금 작업을 해 봤습니다. 먼저 운영중인 블로그가 어떤 class인지 찾아보았습니다. 크롬 F12 개발자도구는 매우매우매우 유용합니다. F12을 누르고 ctrl+shift+c, 혹은 왼쪽 위의 마우스같은 부분을 눌러서 원하는 곳을 클릭하면 저렇게 디자인에 대한 코드가 위치한 곳이 뜨게 됩니다. 블로그를 보다 자유롭게 다루기 위해서 필수로 알아두어야 할 정보 중 하나죠. (사실 기본 고래 스킨의 html 소스에는 f12를 누르지 못하게 하는 기능이 추가되어 있습니다. 하지만 오른쪽 단추를 눌러서 검사버튼을 누르는 것 까지는 막지 않으셨더라구요. 의도한 것인지는 잘 모르겠습니다. 그래서 저는 추가로 오른쪽 클릭 방지와 드래그 금지 기능까지 넣었습니다 ㅋㅋㅋ 이 부분은 추후 업로드 하도록 하겠습니다!) 저 부분도 h3이어서, 위에서 h3을 통째로 바꿨을 때 같이 스킨이 적용되어서 원치 않은 오류가 발생했던 것 같습니다. 아무튼 이제 class를 알았으니, 저 tit_list_type라는 클래스의 h3을 원래대로 조정해줘야겠죠. (아마 이 부분은 제작자님의 실수가 아닐까 생각해봅니다) 원래 운영중인 블로그의 서식도 같은 방법으로 확인해봅시다. 환경설정에 들어가서 개인정보를 확인하면 원래대로 뜨게 됩니다. 이걸 개발자도구를 이용해서 클릭해주면 개발자 도구 창 하단에 다양한 정보가 뜨게 됩니다. 그대로 가져다 쓰면 되겠네요! 이제 위 정보를 바탕으로 스킨편집창의 css에 가서 맨 마지막에 .inner_header_layer .tit_list_type 을 추가해줍니다. .tit_list_type만 해도 되지만, 보다 정확하게 하고 싶어서 개발자도구에서 발견한 내용 그대로 넣어봤습니다. 이제 정상적으로 블로그 내에서도 '운영중인 블로그' 글씨가 작아진 모습을 보실 수 있습니다! 이렇게 오늘은 보다 편리하게 제목에 스킨을 입히는 방법에 대해서 알아봤습니다. 다음 포스팅은 아마도 목차를 설정하는 부분이 될 것 같습니다! 다음번엔 더 좋은 블로그 업데이트(?)로 찾아뵙도록 하겠습니다 :)
0. 일반적인 서식 추가
<div class="txc-textbox" style="border-style: solid; border-width: 0px 0px 1px 12px; border-color: #656665; background-color: #95ffd5; padding: 10px;">
<h3 data-ke-size="size23"><span style="font-size: 20pt; color: #656665;"><b>1. 테스트서식</b></span></h3>
</div>
<p> </p>
1. CSS 수정을 통해 더 간편하게 쓰기
.post-content h3 {
font-size: 22px!important;
line-height: 2;
border-style: solid;
border-width : 0px 0px 1px 12px;
border-color: #A0A0A0;
background-color: #DEFFF2;
text-indent: 10px;
}
.inner_header_layer .tit_list_type {
padding: 20px 24px 6px 25px;
font-size: 12px!important;
color: #909090;
display: block;
line-height: 1.5;
font-family: "Noto Sans Medium", AppleSDGothicNeo-Regular, "Malgun Gothic", "맑은 고딕", dotum, 돋움, sans-serif;
font-weight: 400;
}
※ html 코드에 대한 이해가 선행된다면 보다 쉽게 이해하시면서 따라오실 수 있습니다.
우리가 확인할 것은
이번에는 밋밋한 제목에 스킨을 입혀보도록 하겠습니다. 일반적인 서식추가가 아닌, CSS 수정을 통해서 제목2로 글을 쓰면 자동으로 색이 입혀지는 마법(?)을 부려보도록 하겠습니다. 목차 가장 일반적으로 사람들이 사용하는 방법입니다. 인터넷에 보면 많은 분들이 서식을 올려주신 것을 볼 수 있습니다. 저는 그 중에서 아주 많이 쓰이는 것 같은 한 디자인을 가져왔습니다. 0. 테스트서식 이런 모양의 서식을 한번 추가해보도록 하겠습니다. 환경설정에서 콘텐츠 탭의 서식 관리에 들어갑니다. 그러면 서식 관리 페이지가 뜨는데, 오른쪽 위의 서식 쓰기를 눌러줍니다. 글쓰기 화면과 똑같은 화면입니다. 오른쪽 위의 기본 모드를 누른 후에 HTML로 변경해줍시다. 그럼 까만 HTML화면이 뜰텐데, 아래와 같이 html코드를 작성합니다. 배경 색을 바꾸고 싶으신 분은 background-color 부분을 색상코드표를 참조해서 바꾸시면 되고, 글씨 색을 바꾸시고 싶으신 분은 2번째 줄의 color을 바꾸시면 됩니다. 모서리 색을 바꾸시고 싶으시면 border-color을 바꾸시면 되고, 시작 여백을 늘리시고 싶으시다면 padding을 늘려주시면 됩니다.(물론 줄여도 됩니다!) 원하는 대로 다 만드셨으면 서식을 저장합니다. 이 서식은 글을 쓸 때 더보기를 눌러서 서식 버튼을 누르시면 쉽게 사용할 수 있습니다. 위 방법은 편하지만, 매번 삽입할 때마다 HTML 편집기를 이용해 위치 수정을 해 줘야 한다는 단점이 있습니다. 그렇기 때문에 자주 사용하는 제목과 같은 부분에 쓰기에는 좀 번거롭죠. 이런 번거로움을 조금이나마 해소하기 위해서 단지 제목버튼을 누르는 것 만으로 사용할 수 있도록 바꿔보겠습니다! 이젠 익숙해진 환경설정의 스킨 편집 메뉴의 html 편집기로 들어가줍니다. (너무 자주 갔으니 사진은 생략합니다!) 그리고 html탭에서 를 찾습니다. (중간쯤에 있습니다) ※ html 코드에 대한 이해가 선행된다면 보다 쉽게 이해하시면서 따라오실 수 있습니다. 우리가 확인할 것은 가 들어있는 div class가 e-content와 post-content라는 것입니다. css에서 먼저 e-content를 찾아서 적용하고, 없으면 css에서 post-content를 찾아서 적용하게 됩니다. 여기서 의 의미는 블로그 본문 내용을 DB에서 가져온다는 것을 뜻합니다. 너무 어렵게 생각하지 않아도 됩니다. 본문이라고만 생각하면 되요. 이런 [##]형 코드들에 대한 자세한 설명은 아래 티스토리 스킨 가이드라는 이름의 github에 보다 자세하게 설명되어 있으니 참고하면 좋습니다! 티스토리 스킨 가이드 : tistory.github.io/document-tistory-skin/ 소개 · GitBook 티스토리 스킨 가이드 티스토리에서는 스킨을 통해서 사이트를 자유롭게 디자인할 수 있습니다. 스킨은 치환자를 사용하여 제작되고 사용된 치환자에는 티스토리의 데이터가 대입되어 티스토 tistory.github.io 그렇다면 이제 e-content와 post-content를 찾아야겠죠. html은 h2가 제목1, h3이 제목2, h4가 제목3을 담당하고 있습니다. p는 본문을 담당하죠. 그런데 e-content를 검색해보면 p밖에 없습니다. 따라서 제목2는 맨 위에 있는 기본 h3의 설정을 따라가게 됩니다. 여기서 h3을 통째로 바꿔도 잘 동작하지만, 아래와 같이 예기치 못한 오류가 발생할 수 있습니다. 그래서 저는 따로 post-content h3을 만들어서 CSS의 맨 마지막에 넣어주었습니다. 이렇게 만들면 post-content라는 class의 h3만 변경하니 위의 운영중인 블로그에는 영향이 가지 않게 됩니다. 이제 코드 내용을 조금 살펴보죠. 아까 서식에서와 같은 맥락입니다. 다만 여기서 하나 달라진 것은 padding이 아니라 text-indent가 들어갔습니다. 제가 padding을 사용하려고 열심히 노력해봤는데 이상하게 텍스트에서는 padding이 먹히지가 않았습니다.(해결책이 있으신 분은 댓글로 남겨주시면 정말 감사하겠습니다 ㅠ) 그래서 어쩔 수 없이 text-indent를 사용해서 강제로 띄어쓰기를 해 줬습니다. 이런 indent가 필요 없으신 분은 이 부분을 지우셔도 무방합니다. 적용을 하고 실제로 글을 써 봅시다. 편집할 때는 적용되지 않지만 글을 작성 완료하고 들어가면 바뀌어 있게 됩니다. 이 방법의 장점이자 단점은 모든 글의 제목2에 같은 스킨이 자동으로 입혀진다는 것입니다. 만약 원하지 않는 부분은 또 따로 수정을 해 주어야 하죠. 한번에 관리하고자 하는 저같은 사람에게는 오히려 장점인 부분입니다. 이전 서식 방법보다 훨씬 편리하게 사용할 수 있게 되어서 매우 만족스럽습니다. ++ 20.01.22. 애초에 스킨의 초기 상태로 돌려도 운영중인 블로그가 이상하게 크게 나오더군요. 이 부분을 아래와 같이 원래대로 바꿔주기 위해서 조금 작업을 해 봤습니다. 먼저 운영중인 블로그가 어떤 class인지 찾아보았습니다. 크롬 F12 개발자도구는 매우매우매우 유용합니다. F12을 누르고 ctrl+shift+c, 혹은 왼쪽 위의 마우스같은 부분을 눌러서 원하는 곳을 클릭하면 저렇게 디자인에 대한 코드가 위치한 곳이 뜨게 됩니다. 블로그를 보다 자유롭게 다루기 위해서 필수로 알아두어야 할 정보 중 하나죠. (사실 기본 고래 스킨의 html 소스에는 f12를 누르지 못하게 하는 기능이 추가되어 있습니다. 하지만 오른쪽 단추를 눌러서 검사버튼을 누르는 것 까지는 막지 않으셨더라구요. 의도한 것인지는 잘 모르겠습니다. 그래서 저는 추가로 오른쪽 클릭 방지와 드래그 금지 기능까지 넣었습니다 ㅋㅋㅋ 이 부분은 추후 업로드 하도록 하겠습니다!) 저 부분도 h3이어서, 위에서 h3을 통째로 바꿨을 때 같이 스킨이 적용되어서 원치 않은 오류가 발생했던 것 같습니다. 아무튼 이제 class를 알았으니, 저 tit_list_type라는 클래스의 h3을 원래대로 조정해줘야겠죠. (아마 이 부분은 제작자님의 실수가 아닐까 생각해봅니다) 원래 운영중인 블로그의 서식도 같은 방법으로 확인해봅시다. 환경설정에 들어가서 개인정보를 확인하면 원래대로 뜨게 됩니다. 이걸 개발자도구를 이용해서 클릭해주면 개발자 도구 창 하단에 다양한 정보가 뜨게 됩니다. 그대로 가져다 쓰면 되겠네요! 이제 위 정보를 바탕으로 스킨편집창의 css에 가서 맨 마지막에 .inner_header_layer .tit_list_type 을 추가해줍니다. .tit_list_type만 해도 되지만, 보다 정확하게 하고 싶어서 개발자도구에서 발견한 내용 그대로 넣어봤습니다. 이제 정상적으로 블로그 내에서도 '운영중인 블로그' 글씨가 작아진 모습을 보실 수 있습니다! 이렇게 오늘은 보다 편리하게 제목에 스킨을 입히는 방법에 대해서 알아봤습니다. 다음 포스팅은 아마도 목차를 설정하는 부분이 될 것 같습니다! 다음번엔 더 좋은 블로그 업데이트(?)로 찾아뵙도록 하겠습니다 :)
0. 일반적인 서식 추가
<div class="txc-textbox" style="border-style: solid; border-width: 0px 0px 1px 12px; border-color: #656665; background-color: #95ffd5; padding: 10px;">
<h3 data-ke-size="size23"><span style="font-size: 20pt; color: #656665;"><b>1. 테스트서식</b></span></h3>
</div>
<p> </p>
1. CSS 수정을 통해 더 간편하게 쓰기
.post-content h3 {
font-size: 22px!important;
line-height: 2;
border-style: solid;
border-width : 0px 0px 1px 12px;
border-color: #A0A0A0;
background-color: #DEFFF2;
text-indent: 10px;
}.inner_header_layer .tit_list_type {
padding: 20px 24px 6px 25px;
font-size: 12px!important;
color: #909090;
display: block;
line-height: 1.5;
font-family: "Noto Sans Medium", AppleSDGothicNeo-Regular, "Malgun Gothic", "맑은 고딕", dotum, 돋움, sans-serif;
font-weight: 400;
}
css에서 먼저 e-content를 찾아서 적용하고, 없으면 css에서 post-content를 찾아서 적용하게 됩니다.
여기서
이번에는 밋밋한 제목에 스킨을 입혀보도록 하겠습니다. 일반적인 서식추가가 아닌, CSS 수정을 통해서 제목2로 글을 쓰면 자동으로 색이 입혀지는 마법(?)을 부려보도록 하겠습니다. 목차 가장 일반적으로 사람들이 사용하는 방법입니다. 인터넷에 보면 많은 분들이 서식을 올려주신 것을 볼 수 있습니다. 저는 그 중에서 아주 많이 쓰이는 것 같은 한 디자인을 가져왔습니다. 0. 테스트서식 이런 모양의 서식을 한번 추가해보도록 하겠습니다. 환경설정에서 콘텐츠 탭의 서식 관리에 들어갑니다. 그러면 서식 관리 페이지가 뜨는데, 오른쪽 위의 서식 쓰기를 눌러줍니다. 글쓰기 화면과 똑같은 화면입니다. 오른쪽 위의 기본 모드를 누른 후에 HTML로 변경해줍시다. 그럼 까만 HTML화면이 뜰텐데, 아래와 같이 html코드를 작성합니다. 배경 색을 바꾸고 싶으신 분은 background-color 부분을 색상코드표를 참조해서 바꾸시면 되고, 글씨 색을 바꾸시고 싶으신 분은 2번째 줄의 color을 바꾸시면 됩니다. 모서리 색을 바꾸시고 싶으시면 border-color을 바꾸시면 되고, 시작 여백을 늘리시고 싶으시다면 padding을 늘려주시면 됩니다.(물론 줄여도 됩니다!) 원하는 대로 다 만드셨으면 서식을 저장합니다. 이 서식은 글을 쓸 때 더보기를 눌러서 서식 버튼을 누르시면 쉽게 사용할 수 있습니다. 위 방법은 편하지만, 매번 삽입할 때마다 HTML 편집기를 이용해 위치 수정을 해 줘야 한다는 단점이 있습니다. 그렇기 때문에 자주 사용하는 제목과 같은 부분에 쓰기에는 좀 번거롭죠. 이런 번거로움을 조금이나마 해소하기 위해서 단지 제목버튼을 누르는 것 만으로 사용할 수 있도록 바꿔보겠습니다! 이젠 익숙해진 환경설정의 스킨 편집 메뉴의 html 편집기로 들어가줍니다. (너무 자주 갔으니 사진은 생략합니다!) 그리고 html탭에서 를 찾습니다. (중간쯤에 있습니다) ※ html 코드에 대한 이해가 선행된다면 보다 쉽게 이해하시면서 따라오실 수 있습니다. 우리가 확인할 것은 가 들어있는 div class가 e-content와 post-content라는 것입니다. css에서 먼저 e-content를 찾아서 적용하고, 없으면 css에서 post-content를 찾아서 적용하게 됩니다. 여기서 의 의미는 블로그 본문 내용을 DB에서 가져온다는 것을 뜻합니다. 너무 어렵게 생각하지 않아도 됩니다. 본문이라고만 생각하면 되요. 이런 [##]형 코드들에 대한 자세한 설명은 아래 티스토리 스킨 가이드라는 이름의 github에 보다 자세하게 설명되어 있으니 참고하면 좋습니다! 티스토리 스킨 가이드 : tistory.github.io/document-tistory-skin/ 소개 · GitBook 티스토리 스킨 가이드 티스토리에서는 스킨을 통해서 사이트를 자유롭게 디자인할 수 있습니다. 스킨은 치환자를 사용하여 제작되고 사용된 치환자에는 티스토리의 데이터가 대입되어 티스토 tistory.github.io 그렇다면 이제 e-content와 post-content를 찾아야겠죠. html은 h2가 제목1, h3이 제목2, h4가 제목3을 담당하고 있습니다. p는 본문을 담당하죠. 그런데 e-content를 검색해보면 p밖에 없습니다. 따라서 제목2는 맨 위에 있는 기본 h3의 설정을 따라가게 됩니다. 여기서 h3을 통째로 바꿔도 잘 동작하지만, 아래와 같이 예기치 못한 오류가 발생할 수 있습니다. 그래서 저는 따로 post-content h3을 만들어서 CSS의 맨 마지막에 넣어주었습니다. 이렇게 만들면 post-content라는 class의 h3만 변경하니 위의 운영중인 블로그에는 영향이 가지 않게 됩니다. 이제 코드 내용을 조금 살펴보죠. 아까 서식에서와 같은 맥락입니다. 다만 여기서 하나 달라진 것은 padding이 아니라 text-indent가 들어갔습니다. 제가 padding을 사용하려고 열심히 노력해봤는데 이상하게 텍스트에서는 padding이 먹히지가 않았습니다.(해결책이 있으신 분은 댓글로 남겨주시면 정말 감사하겠습니다 ㅠ) 그래서 어쩔 수 없이 text-indent를 사용해서 강제로 띄어쓰기를 해 줬습니다. 이런 indent가 필요 없으신 분은 이 부분을 지우셔도 무방합니다. 적용을 하고 실제로 글을 써 봅시다. 편집할 때는 적용되지 않지만 글을 작성 완료하고 들어가면 바뀌어 있게 됩니다. 이 방법의 장점이자 단점은 모든 글의 제목2에 같은 스킨이 자동으로 입혀진다는 것입니다. 만약 원하지 않는 부분은 또 따로 수정을 해 주어야 하죠. 한번에 관리하고자 하는 저같은 사람에게는 오히려 장점인 부분입니다. 이전 서식 방법보다 훨씬 편리하게 사용할 수 있게 되어서 매우 만족스럽습니다. ++ 20.01.22. 애초에 스킨의 초기 상태로 돌려도 운영중인 블로그가 이상하게 크게 나오더군요. 이 부분을 아래와 같이 원래대로 바꿔주기 위해서 조금 작업을 해 봤습니다. 먼저 운영중인 블로그가 어떤 class인지 찾아보았습니다. 크롬 F12 개발자도구는 매우매우매우 유용합니다. F12을 누르고 ctrl+shift+c, 혹은 왼쪽 위의 마우스같은 부분을 눌러서 원하는 곳을 클릭하면 저렇게 디자인에 대한 코드가 위치한 곳이 뜨게 됩니다. 블로그를 보다 자유롭게 다루기 위해서 필수로 알아두어야 할 정보 중 하나죠. (사실 기본 고래 스킨의 html 소스에는 f12를 누르지 못하게 하는 기능이 추가되어 있습니다. 하지만 오른쪽 단추를 눌러서 검사버튼을 누르는 것 까지는 막지 않으셨더라구요. 의도한 것인지는 잘 모르겠습니다. 그래서 저는 추가로 오른쪽 클릭 방지와 드래그 금지 기능까지 넣었습니다 ㅋㅋㅋ 이 부분은 추후 업로드 하도록 하겠습니다!) 저 부분도 h3이어서, 위에서 h3을 통째로 바꿨을 때 같이 스킨이 적용되어서 원치 않은 오류가 발생했던 것 같습니다. 아무튼 이제 class를 알았으니, 저 tit_list_type라는 클래스의 h3을 원래대로 조정해줘야겠죠. (아마 이 부분은 제작자님의 실수가 아닐까 생각해봅니다) 원래 운영중인 블로그의 서식도 같은 방법으로 확인해봅시다. 환경설정에 들어가서 개인정보를 확인하면 원래대로 뜨게 됩니다. 이걸 개발자도구를 이용해서 클릭해주면 개발자 도구 창 하단에 다양한 정보가 뜨게 됩니다. 그대로 가져다 쓰면 되겠네요! 이제 위 정보를 바탕으로 스킨편집창의 css에 가서 맨 마지막에 .inner_header_layer .tit_list_type 을 추가해줍니다. .tit_list_type만 해도 되지만, 보다 정확하게 하고 싶어서 개발자도구에서 발견한 내용 그대로 넣어봤습니다. 이제 정상적으로 블로그 내에서도 '운영중인 블로그' 글씨가 작아진 모습을 보실 수 있습니다! 이렇게 오늘은 보다 편리하게 제목에 스킨을 입히는 방법에 대해서 알아봤습니다. 다음 포스팅은 아마도 목차를 설정하는 부분이 될 것 같습니다! 다음번엔 더 좋은 블로그 업데이트(?)로 찾아뵙도록 하겠습니다 :)
0. 일반적인 서식 추가
<div class="txc-textbox" style="border-style: solid; border-width: 0px 0px 1px 12px; border-color: #656665; background-color: #95ffd5; padding: 10px;">
<h3 data-ke-size="size23"><span style="font-size: 20pt; color: #656665;"><b>1. 테스트서식</b></span></h3>
</div>
<p> </p>
1. CSS 수정을 통해 더 간편하게 쓰기
.post-content h3 {
font-size: 22px!important;
line-height: 2;
border-style: solid;
border-width : 0px 0px 1px 12px;
border-color: #A0A0A0;
background-color: #DEFFF2;
text-indent: 10px;
}.inner_header_layer .tit_list_type {
padding: 20px 24px 6px 25px;
font-size: 12px!important;
color: #909090;
display: block;
line-height: 1.5;
font-family: "Noto Sans Medium", AppleSDGothicNeo-Regular, "Malgun Gothic", "맑은 고딕", dotum, 돋움, sans-serif;
font-weight: 400;
}
너무 어렵게 생각하지 않아도 됩니다. 본문이라고만 생각하면 되요.
이런 [##]형 코드들에 대한 자세한 설명은 아래 티스토리 스킨 가이드라는 이름의 github에 보다 자세하게 설명되어 있으니 참고하면 좋습니다!
티스토리 스킨 가이드 : tistory.github.io/document-tistory-skin/
소개 · GitBook
티스토리 스킨 가이드 티스토리에서는 스킨을 통해서 사이트를 자유롭게 디자인할 수 있습니다. 스킨은 치환자를 사용하여 제작되고 사용된 치환자에는 티스토리의 데이터가 대입되어 티스토
tistory.github.io
그렇다면 이제 e-content와 post-content를 찾아야겠죠.
html은 h2가 제목1, h3이 제목2, h4가 제목3을 담당하고 있습니다. p는 본문을 담당하죠.
그런데 e-content를 검색해보면 p밖에 없습니다. 따라서 제목2는 맨 위에 있는 기본 h3의 설정을 따라가게 됩니다.
여기서 h3을 통째로 바꿔도 잘 동작하지만, 아래와 같이 예기치 못한 오류가 발생할 수 있습니다.
그래서 저는 따로 post-content h3을 만들어서 CSS의 맨 마지막에 넣어주었습니다.
이렇게 만들면 post-content라는 class의 h3만 변경하니 위의 운영중인 블로그에는 영향이 가지 않게 됩니다.
이제 코드 내용을 조금 살펴보죠.
아까 서식에서와 같은 맥락입니다. 다만 여기서 하나 달라진 것은 padding이 아니라 text-indent가 들어갔습니다.
제가 padding을 사용하려고 열심히 노력해봤는데 이상하게 텍스트에서는 padding이 먹히지가 않았습니다.(해결책이 있으신 분은 댓글로 남겨주시면 정말 감사하겠습니다 ㅠ) 그래서 어쩔 수 없이 text-indent를 사용해서 강제로 띄어쓰기를 해 줬습니다. 이런 indent가 필요 없으신 분은 이 부분을 지우셔도 무방합니다.
.post-content h3 {
font-size: 22px!important;
line-height: 2;
border-style: solid;
border-width : 0px 0px 1px 12px;
border-color: #A0A0A0;
background-color: #DEFFF2;
text-indent: 10px;
}
적용을 하고 실제로 글을 써 봅시다. 편집할 때는 적용되지 않지만 글을 작성 완료하고 들어가면 바뀌어 있게 됩니다.
이 방법의 장점이자 단점은 모든 글의 제목2에 같은 스킨이 자동으로 입혀진다는 것입니다. 만약 원하지 않는 부분은 또 따로 수정을 해 주어야 하죠. 한번에 관리하고자 하는 저같은 사람에게는 오히려 장점인 부분입니다.
이전 서식 방법보다 훨씬 편리하게 사용할 수 있게 되어서 매우 만족스럽습니다.
++ 20.01.22.
애초에 스킨의 초기 상태로 돌려도 운영중인 블로그가 이상하게 크게 나오더군요.
이 부분을 아래와 같이 원래대로 바꿔주기 위해서 조금 작업을 해 봤습니다.
먼저 운영중인 블로그가 어떤 class인지 찾아보았습니다.
크롬 F12 개발자도구는 매우매우매우 유용합니다. F12을 누르고 ctrl+shift+c, 혹은 왼쪽 위의 마우스같은 부분을 눌러서 원하는 곳을 클릭하면 저렇게 디자인에 대한 코드가 위치한 곳이 뜨게 됩니다. 블로그를 보다 자유롭게 다루기 위해서 필수로 알아두어야 할 정보 중 하나죠.
(사실 기본 고래 스킨의 html 소스에는 f12를 누르지 못하게 하는 기능이 추가되어 있습니다. 하지만 오른쪽 단추를 눌러서 검사버튼을 누르는 것 까지는 막지 않으셨더라구요. 의도한 것인지는 잘 모르겠습니다. 그래서 저는 추가로 오른쪽 클릭 방지와 드래그 금지 기능까지 넣었습니다 ㅋㅋㅋ 이 부분은 추후 업로드 하도록 하겠습니다!)
저 부분도 h3이어서, 위에서 h3을 통째로 바꿨을 때 같이 스킨이 적용되어서 원치 않은 오류가 발생했던 것 같습니다.
아무튼 이제 class를 알았으니, 저 tit_list_type라는 클래스의 h3을 원래대로 조정해줘야겠죠. (아마 이 부분은 제작자님의 실수가 아닐까 생각해봅니다)
원래 운영중인 블로그의 서식도 같은 방법으로 확인해봅시다. 환경설정에 들어가서 개인정보를 확인하면 원래대로 뜨게 됩니다. 이걸 개발자도구를 이용해서 클릭해주면 개발자 도구 창 하단에 다양한 정보가 뜨게 됩니다. 그대로 가져다 쓰면 되겠네요!
이제 위 정보를 바탕으로 스킨편집창의 css에 가서 맨 마지막에 .inner_header_layer .tit_list_type 을 추가해줍니다.
.tit_list_type만 해도 되지만, 보다 정확하게 하고 싶어서 개발자도구에서 발견한 내용 그대로 넣어봤습니다.
.inner_header_layer .tit_list_type {
padding: 20px 24px 6px 25px;
font-size: 12px!important;
color: #909090;
display: block;
line-height: 1.5;
font-family: "Noto Sans Medium", AppleSDGothicNeo-Regular, "Malgun Gothic", "맑은 고딕", dotum, 돋움, sans-serif;
font-weight: 400;
}
이제 정상적으로 블로그 내에서도 '운영중인 블로그' 글씨가 작아진 모습을 보실 수 있습니다!
이렇게 오늘은 보다 편리하게 제목에 스킨을 입히는 방법에 대해서 알아봤습니다.
다음 포스팅은 아마도 목차를 설정하는 부분이 될 것 같습니다!
다음번엔 더 좋은 블로그 업데이트(?)로 찾아뵙도록 하겠습니다 :)
최근댓글