본문 바로가기
N job/2. 티스토리

다음 티스토리 블로그 HTML CSS 스킨편집

by 두잇투잡 2020. 5. 20.

다음 티스토리 블로그 HTML 스킨편집


안녕하세요 두두잇 입니다.

이번 포스팅에서는 지난 포스팅에 이어 다음 티스토리 블로그를 초기에 세팅하는 방법에 대해 말씀 드리겠습니다. 

차이점은 이번 포스팅은 HTML 편집이 주된 내용일 것 같고, 마찬가지로 필요성을 느껴서 했다기 보다는 유튜브에 여러 선배님들의 의견을 따라서 했다는 점 먼저 말씀 드립니다. 

이게 수익 상승과 연관이 있다고 합니다. 아무래도 클릭율과 관계가 있지 않을까 생각이 됩니다.

광고가 어떤 위치에서 게시되는지, 글씨 크기와 배치는 어떻게 하면 좋은지 설정한 것이 스킨편집 이라고 할 수 있습니다. 예쁘게, 감각적으로 꾸미는 것과는 약간 차이가 있을 수 있겠네요.


관리자 탭에 가셔서 꾸미기 - 스킨편집을 누릅니다.

가서 html 편집을 누르시면 하단의 사진과 같이 알아볼 수 없는 영어들이 난무하는 페이지가 나오게 됩니다.


다음 티스토리 블로그 HTML 스킨편집다음 티스토리 블로그 HTML 스킨편집


거기서 왼쪽 본문에 마우스 우클릭을 하셔서 검사 버튼을 누르시면 이런 창이 하나 더 뜨게 되는데요, 여기서 부터가 시작입니다.


다음 티스토리 블로그 HTML 스킨편집다음 티스토리 블로그 HTML 스킨편집



저도 자세히는 모르지만 제가 이해한 부분을 설명드릴게요.

우선 가장 왼쪽 부분은 제가 기존에 포스팅했던 티스토리 블로그의 글이고, 가운데는 제가 수정할 부분이고, 마지막으로 가장 오른쪽 부분은 본문의 어느 부분을 수정할 지 일종의 영역?을 보여주는 곳이라고 생각이 듭니다.

가장 오른쪽 부분 중에 제가 빨간색 박스로 표시한 부분을 누르시고, 본문에 원하는 부분에 마우스를 갖다 대시면 색깔이 변하는데요, 그 부분을 누르시게 되면 수정을 하실 수 있습니다.


본문의 글자는 기존에 --em 단위로 설정이 되어 있을 텐데요, 픽셀 단위로 바꾸셔서 16-17px 정도의 크기로 수정하시면 좋다고 합니다. 


본문의 폭은 630-700 정도하시는 것이 좋다고 하네요. 

또, 글의 제목과 본문 사이에 줄이 있다면 이것도 제거 하시는 것이 좋다고 하는데요, 위에 언급했던 설명 대로 빨간색 박스부분을 누르시고 제목 부분을 눌러서 선의 두께를 조절하면 본문과 제목 사이의 줄이 늘어났다 줄어들었다 하는 것을 볼 수 있을 것입니다.

설명하는 저도 완벽하지 않을 뿐더러 처음 하시는 분들은 엄청 헷갈리실테니 숫자를 늘리고, 줄여가며 적용 버튼을 누르셔서 어떻게 변화하는지 감을 익히시면 될 것 같습니다.


제가 이번 포스팅을 하면서 설명을 쉽게 해 드리기 위해 유튜브를 보며 다시 하면서 캡쳐를 하고 있는데요, 분명 글자 크기를 px 단위로 고쳤었는데 다시 em 단위로 되어 있어서 전부 다 17px로 바꿨습니다.

바꿨더니 머리말3의 글자 크기도 본문의 크기와 똑같아진거에요..

크기가 같을꺼면 머리말3을 할 필요가 없잖아요?!

그래서 이것 저것 눌러보고 다시 수정을 했습니다. 간략하게 설명 드릴게요.


다음 티스토리 블로그 HTML CSS 스킨편집다음 티스토리 블로그 HTML CSS 스킨편집


우선 가장 왼쪽 부분에 머리말3의 크기를 바꾸고 싶기 때문에 해당 부분에 마우스를 가져가 클릭을 했습니다. 하니까 가장 오른쪽 부분에 <h3>으로 시작해서 제가 작성한 제목이 보이시죠?!

그리고 다시 가장 왼쪽을 보니 색깔로 지정이 된 머리말3 부분 또한 h3으로 설정이 되어 있는 것입니다. 

그래서 가장 오른쪽 부분 하단에 entry-content 라는 부분을 키워드로 가운데 부분에 ctrl+f 로 찾기를 해서 내려간 다음, <h3>부분의 크기를 변경하여 상단의 적용 버튼을 누르고, 왼쪽 부분의 새로고침 버튼을 눌러 확인을 했습니다.


그 결과 다시 보고 계신대로 머리말3 부분의 크기가 변경된 것을 확인하실 수 있습니다.


정리하면, 가장 오른쪽 부분의 select 버튼을 눌러서 가장 왼쪽 부분의 본문에 바꾸고 싶은 곳에 마우스를 대서 클릭을 하면 가장 오른쪽 부분에 변화가 생기는데, 바뀌는 곳을 찾아서 가운데 부분에 ctrl+f로 찾은 다음 원하시는 대로 바꿔 주시면 됩니다.


유튜브 동영상을 보고도 어려웠는데 텍스트로 전달해드리려니 정말 어렵네요... 

하지만 하면서 이것 저것 눌러보고 적용-새로고침 해보시면 어떤게 바뀌는지 보이실 거라고 생각합니다. 말도 안되긴 한데 하나씩 만져보면 어디가 바뀌는지 감이 오더라구요.


어려우시다면 유튜브에 티스토리 css, html 이라고 검색하셔서 참고하셔도 좋을 것 같습니다.


복잡해 보이지만 막상 해서 하나씩 눌러보면 생각보다 어렵지 않습니다! 한번 해보시고 구글 애드센스 승인 후의 수익을 위해 초기에 세팅하시길 바랍니다.







댓글