본문 바로가기

티스토리 whatever 스킨

article-rep-thumbnail F12 개발자 도구, 블로그 스킨 편집 CSS 위치 찾기 이전 포스팅에서 티스토리 블로그 WHATEVER 스킨 편집, 블로그 이름(타이틀) 글꼴 폰트 변경하기, 섬네일 리스트 2 글 '더보기' 색상 변경에 대해서 알아봤었는데요. 스킨을 수정할 때 색상, 글꼴 크기, 굵기, 여백 조정 등은 CSS 코드를 잘 알지 못해도 위치만 찾아내면 비교적 쉽게 할 수 있어요. 처음에는 이 코드들이 복잡하게 보여도 보면 볼수록 단순한 구조라는 걸 알 수 있어요. 개발자 도구를 이용해서 스킨 편집 CSS 코드를 쉽게 찾을 수 있는데, 이게 습관이 안 되어 있어서 알면서도 이때까지 별로 활용은 하지 않았어요. 이 부분 꼭 수정은 하고 싶은데, 대체 CSS에서 코드 위치가 어딘지 몰라서 한참을 헤매고 헤맨 적 있으실 거예요. F12 개발자도구 이용해서 쉽게 CSS 코드 위치를 찾아.. 2019. 5. 30.
article-rep-thumbnail 티스토리 WHATEVER 스킨 수정, 글 "더보기" 색상 변경하기 지난 포스팅에 이어 티스토리 블로그 WHATEVER 스킨 수정 계속 해볼게요. 글 "더보기" 글자 색상 변경과 마우스 커서를 올렸을 때 바뀌는 폰트 색상 변경하는 방법에 대해서 알아보겠습니다. WHATEVER 스킨의 커버는 슬라이더, 섬네일 리스트 1, 섬네일 리스트 2, 스페셜 콘텐츠, 와이드 패널이 있는데요. 저는 현재 슬라이더, 섬네일 리스트 2 두 가지를 사용 중입니다. 둘 다 "더 보기" 글자가 들어가는데, 이 폰트 색상이 연하고, 글꼴 크기가 작아서 수정하는 경우가 많은 것 같아요. 더보기 글자를 클릭할 수도 있지만, 대부분은 섬네일을 클릭하고 들어가는 경우가 많을 것 같아서 저는 별다른 수정 없이 그대로 사용하고 있습니다. 댓글로 문의하신 분이 계셔서 이 부분 색상 수정하는 방법을 알려드릴게.. 2019. 5. 30.
article-rep-thumbnail 티스토리 블로그 폰트(글꼴) 원하는 부분만 변경, 바꾸기 이번 시간에는 티스토리 블로그 폰트(글꼴)를 원하는 부분만 변경, 바꾸는 방법에 대해서 알아보도록 하겠습니다. WHATEVER 반응형 스킨의 ① 블로그 이름(타이틀) 폰트 변경하는 방법 과 ② 글 더보기 글자에 마우스를 올렸을 때 바뀌는 색상 변경 에 대한 댓글 문의가 있었어요. 우선 제가 사용하고 있는 WHATEVER 스킨 기준으로 설명드릴게요. 어떤 스킨을 사용하든 같은 방법을 적용하면 원하는 부분 폰트, 글꼴 수정은 어렵지 않게 하실 수 있습니다. 보통 블로그 전체 글꼴, 폰트 수정은 기본적으로 많이 하시죠. 저도 많은 분들이 사용하시는 나눔 고딕(Nanum Gothic)으로 변경하여 사용 중인데요. 블로그 이름(블로그명, 타이틀)이나 본문 제목 등 원하는 부분마다 다르게 글꼴 적용을 하고 싶을 때.. 2019. 5. 30.
article-rep-thumbnail 티스토리 WHATEVER 스킨 수정 ③ WHATEVER 반응형 스킨 수정 세 번째 시간이자 마지막 시간입니다. 25일 티스토리 4월 스킨 업데이트 소식이 있었는데요. 신규 스킨 Magazine이 나왔고, 기존 신규 스킨 4종(Poster, Letter, Whatever, Portfolio)에 대한 마이너 업데이트가 실시되었습니다. 글꼴과 이미지 크기, 스킨 요소들 사이의 간격 조절, 댓글 영역 모바일 대응, 플러그인 호환성 등을 개선했다고 하는데요. 별도의 HTML 수정을 하지 않은 경우엔 업데이트가 자동 반영되는데, 저는 우선 수정을 많이 했기 때문에 기존의 스킨을 저장 후 업데이트된 스킨으로 다시 적용을 해봤습니다. 개선된 부분을 확인 후 다시 수정된 스킨으로 돌아왔는데, 커버와 사이드바는 저장되지 않아서 리셋되어 버렸네요..ㅠ_ㅠ 귀찮지.. 2019. 4. 27.
article-rep-thumbnail 티스토리 WHATEVER 스킨 수정 ② 상단 메뉴 고정-본문 위치 아래로 이동 지난 시간에는 WHATEVER 스킨 상단바(상단 메뉴바, 헤더, HEADER) 고정하는 방법에 대해서 알아봤었는데요. 이번 시간에는 상단 메뉴 고정 후 필요한 추가 작업에 대해서 살펴보겠습니다. 헤더가 고정되면 그 높이만큼 겹쳐지는 부분이 생기는데요. 메인 커버, 카테고리 목록 (리스트형 or 섬네일형), 본문 화면에서 이 부분을 수정해줄 거예요. 가려지는 상단 메뉴바 높이만큼 위치를 아래로 이동시켜보겠습니다. 그리고 본문 제목 폰트 사이즈, 색상 변경, 줄 간격 수정 등을 해보겠습니다. 제목이 들어가는 부분은 기본적으로 3줄로 구성되어 있는데요. 카테고리명, 제목, 닉네임으로 되어 있습니다. 그 줄 간격을 수정해 볼 거예요. 첫 번째, 커버 화면은 설정에 따라서 다를 텐데 저 같은 경우 저는 슬라이더가.. 2019. 4. 24.
article-rep-thumbnail 티스토리 WHATEVER 스킨 수정 ① 상단바 (헤더, HEADER) 고정하는 방법 WHATEVER 스킨으로 교체한지 얼마 되지 않았는데, 다른 분들이 사용하시는 스킨을 구경하다 보니 마음에 드는 스킨이 참 많네요. 그중에서 "고래의 개인노트" 운영자님이 무료 배포 중이신 스킨이 딱 마음에 들었어요. 스킨 수정 작업하느라 애를 많이 먹었는데 또 바꿔야 하나 고민을 좀 했습니다. 하지만 모바일 버전에서는 WHATEVER 스킨이 조금 더 마음에 들어서, 우선은 그대로 가는 걸로 결정했습니다. 이번 시간에는 상단바(상단 메뉴바, 헤더, HEADER) 고정하는 방법에 대해서 알아볼 텐데요. 본문 글을 다 읽은 후 메뉴를 클릭하기 위해 상단으로 다시 올라가야 하는 것은 참 불편한 일이죠. 헤더를 고정하거나 아니면 본문 맨 아래에 위로 가는 화살표 버튼을 생성해줄 필요가 있겠습니다. 우선, 처음 .. 2019. 4. 22.
article-rep-thumbnail 티스토리 WHATEVER 스킨 교체 및 끝없는 수정 작업~ WHATEVER 반응형 스킨으로 교체 후 처음 쓰는 글이네요^^ 티스토리 블로그를 시작하고 1년 5개월 동안 Square 스킨과 죽 함께 했었는데요. 코딩에 대한 지식이 있든 없든 티스토리를 운영하려면 커스터마이징(customizing) 한번 안 해보신 분들은 거의 없을 텐데요. 스퀘어 스킨 사용할 때도 손을 많이 봐서 사용했던 터라 뉴스킨 교체 후, 해야 할 일이 버겁게 느껴져서 미루고 있었습니다. 티스토리에서 반응형 웹스킨이 나왔을 때, 이 WHATEVER 스킨이 가장 맘에 들었어요. '나중에 서브 계정 만들면 그때 한번 써봐야지.' 라고 생각했는데, 계정 하나도 제대로 운영이 안되기 때문에 서브 계정이 가당키나 할지 모르겠습니다. ㅋㅋㅋ 정말이지 계정 여러 개 운영하시는 분들 존경합니다!! 전문적으.. 2019. 4. 20.