티스토리 스킨편집 할 때 꼭 해 두면 좋은 팁 (ft. 메모장)

티스토리는 스킨 편집을 직접 HTML을 다뤄가면서 할 수 있습니다. 우리나라 블로그 서비스의 대표인 네이버 블로그와 비교해서 티스토리가 가지는 장점이기도 하지만, 이것이 일부 사용자들에게는 티스토리가 더 어렵게 느껴지게 만드는 것이죠.

 

스킨 편집이 꼭 필요한가? 라는 질문에는 그럴 수도 있고, 아닐 수도 있다고 답을 드리고 싶습니다. 스킨 편집에 시간을 쏟을 시간에 좋은 글을 하나 더 쓰고 발행하는 것이 나은 경우가 더 많겠지요? 

 

이번 포스팅은 HTML편집으로 들어가는 것이 두렵고 무서운 분들에게 아주 쉽고 간단하게 두려움을 해결하는 방법을 알려드립니다. 글을 읽고 나면 이거 알려준다고 글을 쓴거야? 싶으실겁니다.

 

티스토리 스킨편집 팁

티스토리 스킨 편집 위치는 아시는 분들이 이 글을 보실테니, 해당 메뉴 들어가는 과정은 생략합니다. 오늘의 팁은 바로 '메모장'입니다. 

 

스킨 편집으로 들어가서 암호문과 같아 보이는 HTML이 보이는 화면에 들어갈 때 '메모장'을 하나 띄워 놓으세요. 그리고 HTML 편집을 시작하기 전, 편집창의 아무 곳이나 클릭을 한 후 "CTRL + A" 키를 눌러서 전체 내용을 선택하고 "CTRL + C (또는 마우스 우클릭 후 복사)"를 합니다.

 

메모장으로 가서 "CTRL + V (또는 마우스 우클릭 후 붙여넣기)"를 하세요. 스킨 편집시 혹시나 모를 불의의 사고를 방지하는 보험이라고 생각하시면 됩니다.

 

HTML 편집창에서 전체 선택할 때 모습

 

메모장에 붙여넣기

 

이렇게 해 두고 나서 스킨 편집을 시작하시면 됩니다. 혹시나 스킨 편집이 꼬여서 엉망이 되는 경우에 바로 원상태로 복귀 시킬 수 있는 방법이기 때문입니다.

 

현재 상태의 스킨 세팅이 마음에 든다면, 이렇게 메모장에 복사해 놓은 것을 TXT 파일로 저장해 두는 것도 좋겠죠. 나중에 여러번 스킨을 수정했다가 현재 상태로 되돌리기 위해선 해당 내용을 그대로 다시 HTML편집 창에서 붙여 넣으면 되니까요.

 

 

 

스킨편집의 미리보기를 활용

메모장은 꼬인 것을 다시 원복하는 보험이라고 볼 수 있고, 스킨 편집을 할 때는 '미리보기' 기능을 잘 활용하세요. 미리보기는 스킨 편집할 때 바로 왼쪽에 보여지는 화면입니다.

 

스킨 편집할 때 왼쪽 창만 잘 활용해도 꼬이는 것 대부분 방지할 수 있습니다. 애드센스 광고가 바로 뜨지는 않기 때문에 광고가 제대로 나오는지는 확인이 안 되지만, 최소한 지금 넣는 코드가 제대로 된 위치에 들어가는지 볼 수는 있습니다.

 

 

미리보기의 왼쪽 위 드롭박스 메뉴

▲ 미리보기의 왼쪽 위를 보면 '홈'이라고 되어 있는 드롭박스 메뉴가 있습니다. 보통 우리는 '글'이 제대로 보이는지 테스트를 해야 하니 '글'로 바꿔줍니다.

 

글로 바꾼 모습

▲ 글로 바꾸면 가장 최근의 글이 미리 보기 창으로 나옵니다.

 

위치 찾아 보기

▲ 예시를 써 보기 위해서 '상단코드'라는 글씨가 나오는 곳을 찾아 보기로 했습니다. 'entry-content'를 찾아서 이동했습니다. entry-content가 있는 곳이 본문 영역의 시작입니다. 시작부분이니 위쪽에 '상단코드'라는 글자가 나오는지 확인을 위해 입력했습니다. 입력 후 편집 창의 우측 위 '적용' 버튼을 누릅니다.

 

위치 확인

▲ 그 다음에 왼쪽의 미리보기에서 '글'로 바꾼 화면에서 우측 상단에 '새로고침'을 해 줍니다. 상단코드 글쓰가 본문 시작하는 부분에 잘 나오는 것을 확인할 수 있습니다.

 

 

 

일치하는 콘텐츠 광고 넣기

웬만해서는 스킨 편집을 해 가면서 애드센스 광고를 넣거나 하는 일은 별로 없지만, 필수 통과 의례처럼 한 번 하는 것이 있습니다. 바로 '일치하는 콘텐츠'라는 애드센스 광고 단위가 생겼을 때죠.

 

이건 수동으로 애드센스 광고 단위를 만들어 준 다음에 코드를 직접 복사해 붙여 넣어야 합니다. 그 과정에서 두려운 HTML 편집 메뉴로 들어가는 것이죠.

 

방금 말한데로 entry-content 또는 article_rep_desc 라는 글자를 검색해서 위치를 찾아보게 됩니다. 보통은 article_rep_desc로 검색하는 것이 더 편하고 좋습니다. 이 치환자 바로 뒤에 넣으면 되기 때문이죠.

 

문제는 이 치환자가 스킨에 따라 2개 또는 3개가 나오기 때문이죠. 잘못된 위치에 넣으면 해당 광고가 뜨지 않아 당황하게 되는 것입니다. 

 

그래서 앞서 설명한 것처럼 그 2군데에서 맞는 위치를 찾기 위해 '111111'과 같은 방식으로 글자를 넣어서 미리보기에서 해당 글자가 나오는지 확인을 해 보면 됩니다. 

 

테스트로 넣은 글자가 원하는 위치에 나오면 그곳에 복사한 애드센스 광고 코드를 붙이면 됩니다.

 

---

요약하자면

• 스킨 편집하기 전 전체 내용을 메모장에 복사해 두자 - 문제 발생 시 손쉽게 해결
• 스킨 편집할 때 '글' 미리 보기를 활용하자
• 일치하는 콘텐츠 위치는 article_rep_desc 를 찾은 후 아래에 넣으면 된다.

이제 스킨편집 하는게 전혀 두렵지 않죠? 곧 그렇게 되실 겁니다. 스킨 편집하시는 분들의 건투를 빕니다~!

 

 

[다른 팁 보기]

• 애드센스 중간광고 넣기, 티스토리 에디터에서 쉽게!
• 애드센스 중간광고 티스토리 에디터에서 2개 이상 넣는 방법
• 애드센스 구급 수령 기준 바꾸기와 은행수수료 비교
• 애드센스 계좌 등록하는 방법 (ft. 은행별 swift code)
• 티스토리 태그의 용도는? 검색 유입되는 키워드와 다르다.
• 애드센스 본문 내 광고 삽입 - 디스플레이 광고와 콘텐츠 내 자동 삽입 광고 차이
• 티스토리 사이드바에 애드센스 광고 추가하는 방법
• 구글 서치콘솔로 수동 크롤링하는 방법 (ft. 믿는 구글도 발등 찍는다)