Loading...
(5초쯤...)
광고 차단 플러그인 해제 후 새로고침(F5) 하시면
컨텐츠를 정상적으로 볼 수 있습니다.
(Please turn off AdBlock Plug-in.)


p.s. 광고에도 여러분이 관심을 가질만한 정보가 녹아있을 수 있습니다.


1. 티스토리 유료 스킨의 가격이 부담스러우셨습니까?

2. 유료 스킨에서 티스토리의 특정 기능을 못 쓰도록 제한하여 실망하셨습니까?

3. 반응형 무료 스킨의 버그가 해결될 기미가 안 보여서 답답하셨습니까?

4. 티스토리 자체 제공 스킨이 수익형 블로그로 바꾸기 힘든 레이아웃이라 절망하셨습니까?


이런 불편을 느끼셨던 분들께 대안을 드리고자 반응형 2단 스킨을 준비해봤습니다.

(사실은 블로그 추가로 개설하면서 제가 쓰려고 만들었다가 혼자 쓰기 아까워 공유하는 거예요. ^^)



스킨 이름은 "도화지" 입니다.


티스토리에서 공식 제공하는 Book Club 스킨에서 불필요한 요소들을 전부 지워버리는 식으로 커스터마이징하여 새하얀 도화지의 느낌을 살렸습니다. 사용자께서 본인만의 느낌으로 스킨에 색을 채워가시기 바랍니다.


▼ 이렇게~~

현대 미술 근황 gif


▼ 본래의 Book Club 스킨 디자인은 아래와 같은데요,

티스토리 유료스킨급 무료 반응형 스킨 배포 도화지 스킨(2단)


도화지의 스킨 디자인은 아래와 같습니다.

티스토리 유료스킨급 무료 반응형 스킨 배포 도화지 스킨(2단)

▲ PC 해상도 메인화면 레이아웃

더 자세한 작동 모습은 https://withgoogle.tistory.com 에서 확인해 주세요.

참고로 위 블로그는 저만의 요소들을 꾸준히 추가할 예정이므로, 디자인이 조금 달라지더라도 양해해주세요. (윗 문단의 스크린 샷을 보는 것이 가장 정확합니다.)



도화지 스킨의 주요 특징은 아래와 같습니다.

- Book Club 스킨의 사이트 제목 아래에 있는 상단 카테고리 바를 지웠습니다(베스트셀러/이벤트/이달의신간/방명록 부분)

- Book Club 스킨의 포스팅 제목 백그라운드에 나오던 그림을 없앴습니다.

- 본문 가로 폭을 700픽셀로 맞췄습니다(구글 애드센스 336 X 280 픽셀 광고를 가로로 2개 배치할 수 있음.).

- 사이드바 폭을 340픽셀로 맞췄습니다(사이드 바에도 336 X 280 사이즈 애드센스 광고를 배치할 수 있음.).

- 폰트 크기 약간 튜닝(제 취향대로)


제가 생각하는 도화지 스킨의 장점입니다.

- 국내 업계 최고 수준의 능력자 분들(카카오 티스토리 팀)이 제작한 스킨을 기반으로 하므로 버그 존재 확률이 상대적으로 낮습니다.

- 수정 건의를 Daum 고객센터에 직접 할 수 있습니다. (제가 Book Club 스킨을 쓰고 있는데요~블라블라~)

- Book Club 스킨과 모든 특성을 공유하며, 티스토리에서 제공하는 모든 기능을 Book Club 스킨과 동일한 수준으로 쓸 수 있습니다.

- 개인이 제작한 유료/무료 스킨들과 달리 "이렇게만 세팅해두세요." 하는 식의 제약이 없습니다. 제약이 생기면 오히려 티스토리 팀에 공식적으로 항의할 수 있습니다.

- 심플한 디자인과 빠른 속도 덕분에 수익형 블로그로 전환시 유리합니다.

- 눈에 안 보이는 영역 침범 증상이 없습니다(침범 사례 : 아래 스샷 참고). 그래서 애드센스가 화면을 벗어나는 문제가 생기지 않을 겁니다.


티스토리 유료스킨급 무료 반응형 스킨 배포 도화지 스킨(2단)


제가 생각하는 도화지 스킨의 단점입니다.

- 카테고리 목록을 트리 형태로 보여주는 [##_category_##] 치환자가 정상 작동하지 않습니다. 당분간 기본 설정대로 [##_category_list_##] 치환자를 쓰시길 바랍니다. (Daum 고객센터에 수정 건의는 해두었음.) => 2020. 01. 09. 해결됨.

- 디자인이 화려하지 않습니다.

- 유튜브 영상, 표 등 사용자 삽입 요소들을 반응형으로 만들어주는 코드를 제가 추가하지 않았습니다(Book Club 스킨에 기본 탑재되어 있었으면 좋겠습니다.). 만약 필요하다면 직접 구글링해서 스킨에 넣어주세요.

- 이 스킨에 적용된 CSS를 조금은 손볼 수 있는 능력을 가지고 계셔야 합니다. 저한테 필요한 부분만 손봤기 때문입니다.

- 제가 해드리는 무료 지원은 없을 겁니다. (단호!)



도화지 스킨을 여러분의 블로그에 적용하는 방법입니다. 일반적인 커스텀스킨 업로드 방식대로 진행하더라도 작동은 할텐데, 문제 발생시 Daum 고객센터에 당당하게 건의할 수 있으려면 Book Club 스킨 위에 덮어씌우는 방식으로 적용하는 게 좋을 것 같습니다. 아래처럼 하시면 돼요.


① 티스토리 관리자 페이지로 들어갑니다. ( https://블라블라.tistory.com/manage )

② 꾸미기 - 스킨 변경 항목으로 들어가서 Book Club 스킨을 적용합니다. (아래 스크린 샷 참고)


티스토리 유료스킨급 무료 반응형 스킨 배포 도화지 스킨(2단)


③ 아래의 "도화지Skin(BookClub커스터마이징).zip" 압축파일을 받고, 임의의 경로에 압축을 풉니다.


도화지Skin(BookClub커스터마이징).zip

암호(대소문자 구분 주의!) : SCbank386-20-503894

(스킨이 마음에 드셨다면 위의 SC은행 계좌로 후원해주세요. 맛있는 것 사먹고 힘내겠습니다. ^^)



④ skin.html 파일과 style.css 파일만 사용할 겁니다. 메모장(단축키 : Win+R 이후 notepad 입력)같은 텍스트에디터 프로그램으로 skin.html 파일과 style.css 파일을 열어 준비해주세요. (메모장 사용자는 아래 스크린 샷을 참고.)


티스토리 유료스킨급 무료 반응형 스킨 배포 도화지 스킨(2단)


⑤ 티스토리 관리자 페이지에서 "꾸미기 - 스킨 편집" 메뉴로 진입해주세요. (아래 스샷 참고)


티스토리 유료스킨급 무료 반응형 스킨 배포 도화지 스킨(2단)


⑥ 새 창/새 탭으로 스킨 편집 화면이 뜨면 "html 편집" 버튼을 눌러주세요. (아래 스샷 참고)


티스토리 유료스킨급 무료 반응형 스킨 배포 도화지 스킨(2단)


⑦ HTML 탭의 내용을 메모장으로 열었던 skin.html 파일의 내용으로 대체하고 "적용"버튼을 눌러주세요. Ctrl+A / Ctrl+C / Ctrl+V 단축키 활용하면 편하겠죠? (아래 스샷 참고)


티스토리 유료스킨급 무료 반응형 스킨 배포 도화지 스킨(2단)


⑧ CSS 탭의 내용을 메모장으로 열었던 style.css 파일의 내용으로 대체하고 "적용"버튼을 눌러주세요. Ctrl+A / Ctrl+C / Ctrl+V 단축키 활용하면 편하겠죠? (아래 스샷 참고)


티스토리 유료스킨급 무료 반응형 스킨 배포 도화지 스킨(2단)


⑨ 모든 절차가 끝났습니다. 변화된 모습을 확인해주세요.



※ MIT 라이선스를 따릅니다

끝까지 따라와주셔서 감사합니다.

Book Club 스킨이 MIT 라이선스를 따르듯이, 도화지 스킨도 MIT 라이선스를 따릅니다.

MIT 라이선스의 내용을 적으면서 글을 마치겠습니다.


이 소프트웨어의 복제본과 관련된 문서화 파일(“소프트웨어”)을 획득하는 사람은 누구라도 소프트웨어를 별다른 제한 없이 무상으로 사용할 수 있는 권한을 부여 받는다. 여기에는 소프트웨어의 복제본을 무제한으로 사용, 복제, 수정, 병합, 공표, 배포, 서브라이선스 설정 및 판매할 수 있는 권리와 이상의 행위를 소프트웨어를 제공받은 다른 수취인들에게 허용할 수 있는 권리가 포함되며, 다음과 같은 조건을 충족시키는 것을 전제로 한다.


위와 같은 저작권 안내 문구와 본 허용 문구가 소프트웨어의 모든 복제본 및 중요 부분에 포함되어야 한다.


소프트웨어는 상품성, 특정 목적 적합성, 그리고 비침해에 대한 보증을 포함한 어떠한 형태의 보증도 명시적이나 묵시적으로 설정되지 않은 “있는 그대로의” 상태로 제공된다. 소프트웨어를 개발한 프로그래머나 저작권자는 어떠한 경우에도 소프트웨어나 소프트웨어의 사용 등의 행위와 관련하여 일어나는 어떤 요구사항이나 손해 및 기타 책임에 대해 계약상, 불법행위 또는 기타 이유로 인한 책임을 지지 않는다.


※ 참고할만한 글

 - 티스토리 애드센스 400달러 돌파 블로그수익 100만원은 꿈일까

 - 티스토리 애드센스 300달러 초과 수수료 절약 SC은행 외화통장

트랙백 (0) 개   l   댓글 3

★ 댓글, 작은 정보지만 다른 분들께 큰 도움이 됩니다. ★