안녕하세요! 앨리손입니다~
지난 시간에는 WHATEVER 스킨 상단바(상단 메뉴바, 헤더, HEADER) 고정하는 방법에 대해서 알아봤었는데요. 이번 시간에는 상단 메뉴 고정 후 필요한 추가 작업에 대해서 살펴보겠습니다.
헤더가 고정되면 그 높이만큼 겹쳐지는 부분이 생기는데요. 메인 커버, 카테고리 목록 (리스트형 or 섬네일형), 본문 화면에서 이 부분을 수정해줄 거예요. 가려지는 상단 메뉴바 높이만큼 위치를 아래로 이동시켜보겠습니다.
그리고 본문 제목 폰트 사이즈, 색상 변경, 줄 간격 수정 등을 해보겠습니다. 제목이 들어가는 부분은 기본적으로 3줄로 구성되어 있는데요. 카테고리명, 제목, 닉네임으로 되어 있습니다. 그 줄 간격을 수정해 볼 거예요.
첫 번째, 커버 화면은 설정에 따라서 다를 텐데 저 같은 경우 저는 슬라이더가 맨 위에 위치하고 있습니다. 블로그 관리 홈 > 꾸미기 > 스킨 편집 > html 편집 > CSS에서 찾기(Ctrl+F)로 cover-slider를 검색합니다. 약 391번째 줄에 있습니다. (스킨 편집 유무에 따라 위치가 다를 수 있어요) margin: 40px로 수정합니다.
원하는 위치를 보고 값은 수정하시면 되겠습니다. 모바일 위치는 따로 수정이 필요합니다. 약 2460번째 줄에 Media Screen - Mobie에 속해 있는 .cover-slider가 있습니다. margin-top: 50px로 수정 후 적용 클릭합니다.
반응형 스킨, 반응형 웹스킨,블로그 스킨,티스토리 반응형 스킨, 티스토리 스킨, 티스토리 whatever 스킨, customizing, 커스터마이징, 코딩
두 번째, 상단 메뉴바에서 카테고리를 클릭하고 들어갔을 때 보이는 카테고리 목록(리스트형 or 섬네일형) 화면 위치를 아래로 이동해 보겠습니다. 찾기로 post-header:first-child를 검색하면 약 724번째 줄에 나옵니다. margin-top: 150px로 수정합니다.
모바일 화면 수정을 위해 아래로 내려가면 약 2321번째 줄에 Media Screen - Mobie에 속해 있는 post-header:first-child가 있습니다. margin-top: 100px로 수정 후 적용 클릭합니다.
세 번째, 본문 화면(제목 포함) 을 적당한 위치로 내려보겠습니다. 찾기로 hgroup를 검색하면 약 965번째 줄에 나옵니다. margin: 80px로 수정합니다. 제목 위 여백 값이 정해졌으니, 아래쪽 여백(제목 아래 라인 사이 여백)도 함께 맞춰볼게요. padding: 30px로 수정합니다.
모바일 화면 수정을 위해 아래로 내려가면 약 2621번째 줄에 Media Screen - Mobie에 속해 있는 .hgroup이 있습니다. margin: 50px로 수정합니다. 아래쪽 여백 padding: 25px로 수정 후 적용 클릭합니다. 원하시는 여백 분량만큼 값은 수정하시면 되겠습니다.
여기까지 수정을 하면 헤더 고정에 따라서 겹쳐지는 분량 위치 이동이 끝났습니다. 추가적으로 본문 제목과 줄 간격 수정을 해보겠습니다. 제목이 들어가는 부분은 기본적으로 3줄로 구성되어 있는데요. 카테고리명, 제목, 닉네임으로 되어 있습니다. 그 줄 간격을 수정해 볼 거예요.
먼저 제목 폰트 사이즈를 약간만 크게 수정해 볼게요. 찾기로 hgroup h1을 검색하면 약 977번째 줄에 나옵니다. font-size: 1.7em으로 수정합니다. 좀 더 강조하고자 bold;를 삽입하며 굵게도 해봤는데, 너무 강조된 느낌이라 다시 수정했어요.
원하는 크기와 색상 값으로 수정하시면 되겠습니다. "html 색상표" 로 검색하여 원하는 색상 값을 복사하여 color 부분을 수정해 주시면 됩니다. 카테고리명, 닉네임 글자 크기나 색상 변경은 .hgroup .categroy 와 .hgroup .post-meta에서 각각 수정 가능합니다.
그다음 줄 간격은 hgroup h1의 line-height: 1.1;로 수정합니다. 마지막에 적용 클릭합니다. 모바일 수정은 따로 하지 않아도 되는데, 필요한 경우는 Media Screen - Mobie에서 필요한 값을 삽입해 주시면 되겠습니다.
이번 시간의 WHATEVER 스킨 수정은 여기까지입니다.
그 외에 자잘하게 수정이 필요한 부분은 또 다음 시간에 자세히 알아보도록 하겠습니다.
읽어주셔서 감사합니다 ♥♥♥
※ 제 블로그의 필요하신 글은 어디든 공유하셔도 좋습니다. 다만, 저작자 표시 ( 저작자 이름과 출처 표시, 링크 표시 ), 2차 변경 금지를 꼭 지켜주세요. 불펌은 금지!! 퍼가실 때는 댓글 남겨주세요. 티스토리 댓글과 공감은 로그인이 필요 없습니다. 로그인하시면 구독이 가능합니다. 양질의 유용한 콘텐츠를 발행하기 위해 계속 노력하겠습니다. 감사합니다.^^ - AllySon
'정보 > 티스토리·애드센스' 카테고리의 다른 글
| 새로운 구글 서치 콘솔(Google Search Console)로 검색 노출 빠르게 하자. (0) | 2019.05.06 |
|---|---|
| 티스토리 WHATEVER 스킨 수정 ③ (4) | 2019.04.27 |
| 티스토리 WHATEVER 스킨 수정 ② 상단 메뉴 고정-본문 위치 아래로 이동 (8) | 2019.04.24 |
| 티스토리 WHATEVER 스킨 수정 ① 상단바 (헤더, HEADER) 고정하는 방법 (27) | 2019.04.22 |
| 티스토리 WHATEVER 스킨 교체 및 끝없는 수정 작업~ (13) | 2019.04.20 |
| [티스토리] 기다렸던 기능, 게시글 통계 오픈! (2) | 2018.11.09 |
-
-
-
-
안녕하세요~ 반갑습니다^^
WHATEVER 스킨 수정만 많이 하고, 잠시 사용하다가 다시 원래 스킨으로 바꾼 상태입니다.
그래서 테스트를 해볼수가 없어서 정확한 답변을 드리기가 힘들 것 같아요.
제작자에게 물어보는 게 가장 좋은 방법인데,
WHATEVER 스킨은 티스토리 제작이니
티스토리로 문의하시면 답변을 받으실 수 있을지 모르겠네요.
우선 모바일에서 슬라이더 잘림 현상은 수정 후에 발생한 현상인거죠?
반응형 스킨답게 하나만 수정해서 다같이 반응형으로 움직이면 좋은데,
저도 상단바 고정할 때 header 수정하고 모바일 쪽에서 다시 수정해 줬거든요.
화면 너비(PC, 태블릿, 모바일)에 따라서 값을 따로 적당히 지정해주는 거죠.
▶https://allyson.tistory.com/320
내가 수정하고 싶은 부분의 CSS위치 찾는 방법은
▶https://allyson.tistory.com/337
참고해 보시면 조금 도움이 될지 모르겠네요.
원하는 해결책 꼭 찾으시고,
행복한 한주 보내세요~ :)
-
