요즘 티스토리 북클럽을 제 입맛에 맞게 수정하고 있습니다. 사실 JB님 스킨을 예쁘셔서 저도 저만의 스킨을 수정하고자 어제 하루 종일 했는데 까막눈인 제가 어제 CSS만 보고 있었더니 이제 어느 정도 수정을 가능해진 거 같습니다. 아직까지는 해야 할 일이 많아서 조만간 스킨 디자인 2를 배포할 거 같습니다. 근데 스킨을 바꾸는 건 좀 힘든 일이잖아요? 새로 시작하는 신생 블로그가 아닌 이상은 메타 소스의 문제들도 있고 구글 애드센스 문제 등.. 그래서 북클럽 본문 타이틀 상단 이미지를 없애 버릴 수 있는!! 그리고 깔끔하게 쓰실 수 있는 자료를 찾아왔어요!
유튜브에 아주 자세하게 나와 있더라고요. alikong.tistory.com/51
www.youtube.com/watch?v=xK9l_2mO258
그래서 제가 찾은 자료들도 공유하고 여러분께 알려드리려고 해요. 유용한 북클럽 자료들을 다 모아 왔어요!
우선 아보느 유튜브에서 아주 쉽게 설명해주셔서 유튜브를 보고 한번 처음부터 타이틀 대신 로고로 바꾸시고 이것저것 고쳐보세요. 그리고 게시판을 고치는 것은 28분 2초부터 시작하니깐 그 부분부터 보시고 따라 하시면 좋습니다.
우선 제가 스샷으로 저도 보기 좋게 자료를 좀 정리해볼게요. 같이 북클럽의 보기 싫은 본문 상단 이미지를 없애 보러 갈까요!!!
 |
유튜브를 캡쳐했습니다. 티스토리 북클럽 스킨을 쓰면 보면에 저렇게 타이틀과 아주 큰 대표 이미지가 배경으로 깔리게 되는데요. 우선 저 타이틀과 배경 이미지를 본문 안으로 이동시켜서 사이드와 본문이 올라가도록 해볼게요.
우선 수정을 하려면 관리자에서 스킨 편집 ->> html 편집 ->> css를 눌러 편집 화면으로 들어가 보도록 하겠습니다.
총 6가지를 수정해볼게요!
1. css 파일에서 #tt-body-page. post-cover 이 부분에서 간단하게 한 줄을 수정하시면 됩니다.
 |
css에서 446줄에 보시면
 |
이미 수정을 해서 relative라고 나오는데 여러분은 position: absolute; -> position: relatvie;라고 수정하시면 됩니다.
2. 상단 공간 없애기
 |
티스토리 북클럽 스킨 타이틀과 배경이 본문 아래로 이동하면서 타이틀은 작아졌고 기존에 타이틀과 배경이 있던 부분은 하얀 공간이 생겼습니다. 이 부분을 지워 볼게요.
 |
440줄 padding-top: 330px; ---> padding-top: 0px;
1046줄 height: 340px ---> height: 0px;
3. 타이틀 배경 없애기
이제 티스토리 북클럽 스킨의 본문 상단 타이틀 배경은 작아는 졌지만 그래도 아직 눈에 거슬리는 상단 타이틀 배경 이미지를 마저 삭제해볼게요.
html로 이동해주세요.
 |
html 405줄에 가면 저 빨간 박스에 적혀있는 긴 소스를 아주 간단하게 <div class="post-cover">로 수정해줍니다.
 |
그럼 이미지 대신 배경이 회색 부분이 나옵니다. 이제 이미지가 중복되어서 배경으로 나오지는 않아요.
4. 본문 게시글 배경 색 없애기
이제 회색 부분이 배경을 삭제할게요. css 편집에서 배경 색상 부분을 코드를 삭제해 주시면 됩니다.
1047줄 background-color: #cbcbcb 삭제
1060줄 background-color: rgba(0,0,0,0,0.25) 삭제
 |
이렇게 되면 타이틀 글씨가 흰색이라서 보이지가 않게 됩니다. 그래서 위에 색상들을 보이게 수정해볼게요
5. 본문 상단 타이틀 글자색 변경
3군데를 변경해야 합니다. 카테고리 / 제목 / 작성자 글씨 색과 폰트 크기 수정 그리고 간격을 바꿔볼게요.
1068줄에 post-cover. category 이 부분을 이렇게 수정해줍니다.
 |
파일을 다운로드하여서 수정해주세요.
바로 밑에 1076줄 post-cover h1 부분을 이렇게 수정해 주세요.
 |
파일을 다운로드하여서 수정해세요.
1088줄 post-cover. meta 부분도 아래와 같이 수정해주세요.
 |
파일을 다운로드하여 수정해 주세요.
 |
위에 파일로 수정하면 경계선이 생겨져 있습니다. 그럼 모바일에도 만들어 볼게요.
 |
2933줄에 font-weight: 300; --> font-weight: 500; 모바일 제목 글씨 두껍게 강조
2036줄에 margin-top: 33px --> margin-top: 23px 0 10px 0; 타이틀 상단 아랫부분 모바일 점선 추가
파일을 다운로드하여 수정해 주세요.
6. 수정 삭제 버튼 글자색 변경과 이름과 날짜 사이에 경계선 만들기
 |
1097줄 post-cover. mate 부분에 소스들을 위에 그림과 같이 수정해주세요.
파일을 다운로드하여 수정해 주세요.
그럼 자 이제 수정이 다 되었습니다. 아래 그림을 보시면 깔끔하게 수정되어 있는 걸 보실 수 있어요.
 |
티스토리 북클럽 스킨 게시글 본문 타이틀 배경이 사라지고 깨끗한 모습으로 수정되었습니다. 지금 제가 수정하고 있는 스킨이기도 한데 css에 약해서 아직은 완벽하게 수정이 되질 않네요! 목표는 JB님 유료 스킨급의 모습으로 커스텀하는 거예요! 그래서 요즘 스킨을 이것저것 테스트하고 있어요! 이건 스킨을 테스트하는 저의 새컨 블로그 모습이에요.
아래는 제가 더 추가해서 찾은 내용인데 정리해둡니다. 스킨 수정에 용이한 자료들을 모아봤어요. 다 수정하면 디자인 소스 배포할 예정이에요!
- 모서리가 둥근 썸네일 수정은 아래로 가시면 내용이 잘 정리되어 있습니다.
티스토리 #1스킨 수정한 내용 정리
티스토리 스킨 중 #1을 메인스킨으로 사용기 위해 수정한 내용을 정리해 봅니다. 이 포스팅은 계속 업데이트 될 예정이며 마지막 업데이트 날짜를 표시 해 둘 예정입니다. 티스토리 스킨 수정 - #
gentle.kr
- 티스토리 북클럽 스킨 뉴북 썸네일 정사각형 수정
티스토리 북클럽 베스트셀러 썸네일 크기 조절하기
티스토리(Tistory) 블로그 스킨의 한 종류인 북클럽(Bookclub)의 경우 리스트 타입을 베스트셀러, 뉴북, 북리뷰, 뉴스레터의 4가지 중 하나로 선택할 수 있습니다. 그 중 베스트셀러의 경우 썸네일과
joyonclear.tistory.com
- 티스토리 북클럽 스킨 커버 뉴스레터 이미지 위치 변경
티스토리 북클럽 스킨: 커버 뉴스레터 아이템 썸네일 위치 변경 (오른쪽에서 왼쪽으로)
티스토리 북클럽 스킨의 스킨 편집에서 홈 설정을 커버로 지정하고 뉴스레터 아이템을 배치하면 썸네일이 오른쪽에 표시됩니다. 뉴스레터 아이템의 썸네일 위치를 오른쪽에서 왼쪽으로 변경하
avada.tistory.com
- 티스티로 북클럽 스킨 상단메뉴 드롭방법
북클럽 스킨 - 메뉴 확장
상단 메뉴를 꼭 확장해서 써야 한다면.... (보여줄 페이지가 많다거나 해서...?) 메뉴들을 수동으로 관리할지언정 난 이렇게 펼치는 메뉴가 필요해! 그렇다면.. 간단히 가능한 방법이 있어 올립니
alikong.tistory.com
- 티스토리 북클럽 스킨 댓글 버그 수정
북클럽 스킨 - 댓글 버그 수정
그간 잘 안써봐서 몰랐는데... 현재 사용중인 북클럽 스킨에서 댓글을 수정/삭제할 때 약간 이상하게 작동하는 것 같은 느낌적인 느낌을 우연히 받아 좀 살펴보았더니 역시 문제가 있네요?! (저
alikong.tistory.com
제가 필요한 자료들 모움도 해놨으니 여러분이 필요한 자료가 있으시면 가서 한번 보시기 바랍니다. 차후 완벽하게 수정이 된 저만의 스킨을 들고 오겠습니다! 기다려주세요~
'티스토리 > 티스토리 tip' 카테고리의 다른 글
| 티스토리 블로그 글작성시 글자수 세는법 (30) | 2021.02.14 |
|---|---|
| 티스토리 구독자를 늘려주는 구독 버튼 설정 방법 (15) | 2021.02.08 |
| 티스토리 네이버 등록시 메타태그를 찾을 수 없거나, 검색로봇이 사이트를 접근 할 수 없다고 뜰때 해결방안! (9) | 2021.02.05 |
| 티스토리 스킨 Odyssey (오디세이) 디자인 수정 소스 배포합니다 (52) | 2021.02.03 |
| 티스토리 에드센스용 무료 스킨 추천! (2) | 2021.02.03 |
댓글