안녕하세요! 앨리손입니다~


지난 시간에는 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

  1. Favicon of https://heysukim114.tistory.com BlogIcon *저녁노을* 2019.04.25 04:45 신고

    티스토리를 운영하지만...
    노을이에겐 어려워요.ㅎㅎ

    • Favicon of https://allyson.tistory.com BlogIcon 앨리Son 2019.04.25 09:04 신고

      네네~ 그렇죠? 노을님^^
      굳이 수정이 필요하지 않다만,
      그대로 사용해도 될 것 같아요.
      손을 대기 시작하면 일이 너무 많아요^^

  2. Favicon of https://drkimfixnsolve.tistory.com BlogIcon 🏌🏻‍♂️ 2020.06.29 21:46 신고

    정보 감사합니다. 많은 도움이 되었습니다.

    • Favicon of https://allyson.tistory.com BlogIcon 앨리Son 2020.07.03 22:51 신고

      도움이 되셨다니 저도 기쁘네요^^
      편안하고 즐거운 주말 보내세요~~

  3. 익명 2022.04.04 00:54

    비밀댓글입니다

    • Favicon of https://allyson.tistory.com BlogIcon 앨리Son 2022.04.05 00:30 신고

      안녕하세요~ 반갑습니다^^
      WHATEVER 스킨 수정만 많이 하고, 잠시 사용하다가 다시 원래 스킨으로 바꾼 상태입니다.
      그래서 테스트를 해볼수가 없어서 정확한 답변을 드리기가 힘들 것 같아요.
      제작자에게 물어보는 게 가장 좋은 방법인데,
      WHATEVER 스킨은 티스토리 제작이니
      티스토리로 문의하시면 답변을 받으실 수 있을지 모르겠네요.

      우선 모바일에서 슬라이더 잘림 현상은 수정 후에 발생한 현상인거죠?
      반응형 스킨답게 하나만 수정해서 다같이 반응형으로 움직이면 좋은데,
      저도 상단바 고정할 때 header 수정하고 모바일 쪽에서 다시 수정해 줬거든요.
      화면 너비(PC, 태블릿, 모바일)에 따라서 값을 따로 적당히 지정해주는 거죠.
      ▶https://allyson.tistory.com/320

      내가 수정하고 싶은 부분의 CSS위치 찾는 방법은
      ▶https://allyson.tistory.com/337
      참고해 보시면 조금 도움이 될지 모르겠네요.
      원하는 해결책 꼭 찾으시고,
      행복한 한주 보내세요~ :)

    • Favicon of https://toryman.tistory.com BlogIcon 티스토리M 2022.04.05 09:57 신고

      시간이 벌써 2년이라는 시간이 흘렀는데도 이렇게 댓글 달아주셔서 감사합니다 사실 크게 기대 안했는데 달아주시니 뭔가 반가우면서도 감사하네요! 기분 좋은 일만 가득하시길 기원하겠습니다앙

    • Favicon of https://allyson.tistory.com BlogIcon 앨리Son 2022.04.05 12:22 신고

      네~ 댓글 감사합니다!
      오늘도 기분 좋은 하루 보내세요 :)

+ Recent posts