티스토리 WHATEVER 스킨 수정, 글 "더보기" 색상 변경하기

 

지난 포스팅에 이어 티스토리 블로그 WHATEVER 스킨 수정 계속 해볼게요. 글 "더보기" 글자 색상 변경과 마우스 커서를 올렸을 때 바뀌는 폰트 색상 변경하는 방법에 대해서 알아보겠습니다.

 

WHATEVER 스킨의 커버는 슬라이더, 섬네일 리스트 1, 섬네일 리스트 2, 스페셜 콘텐츠, 와이드 패널이 있는데요. 저는 현재 슬라이더, 섬네일 리스트 2 두 가지를 사용 중입니다. 둘 다 "더 보기" 글자가 들어가는데, 이 폰트 색상이 연하고, 글꼴 크기가 작아서 수정하는 경우가 많은 것 같아요.

 

 

 

 

더보기 글자를 클릭할 수도 있지만, 대부분은 섬네일을 클릭하고 들어가는 경우가 많을 것 같아서 저는 별다른 수정 없이 그대로 사용하고 있습니다. 댓글로 문의하신 분이 계셔서 이 부분 색상 수정하는 방법을 알려드릴게요.

 

 

customizing, WHATEVER 스킨, 더보기 색상 수정, 반응형 스킨, 반응형 웹스킨, 블로그, 블로그 스킨, 커스터마이징

 

섬네일 리스트 2를 기준으로 설명드릴게요. 이 부분의 더보기 글꼴 색상을 수정하면, 카테고리 개별로 들어갔을 때 보이는 화면의 "더보기" 글자도 함께 수정됩니다. 다양한 커버를 사용 중이라면 더 보기 글자가 들어가는 부분이 많을 테고, 개별 수정이 필요하겠습니다. 

 

먼저 마우스 커서를 올리기 전, 더보기 글자 색상을 변경해 볼게요. 레드 계열로 한번 바꿔보겠습니다.

 

 

 

 

블로그 관리 홈 > 꾸미기 > 스킨 편집 > html 편집 > CSS에서 883번째 줄 .cover-thumbnail-list-2 ul li .more를 찾기(Ctrl+F) 합니다. 같은 WHATEVER 스킨이라도 편집 상태에 따라서 줄 위치는 다를 수 있어요. 

 

"html 색상표"로 검색하여 원하는 색상 값을 복사하여 color 부분을 수정해 주시면 됩니다. 현재 색상 color: #d4bca7; 부분을 레드 계열로 #FF0000; 수정하고 적용 클릭합니다. 글꼴 변경, 폰트 사이즈와 굵기 등 역시 같은 방법으로 수정 및 추가해주시면 됩니다.

 

 

코딩, 티스토리 whatever 스킨, 티스토리 반응형 스킨, 티스토리 스킨, 티스토리 스킨 수정, 티스토리 블로그

 

 

더보기에 마우스를 올리면 원래 색상보다 조금 더 진한 색으로 보이게 설정되어 있습니다. 이 색상을 다른 컬러로 변경해 보겠습니다. 마찬가지로 레드 계열로 수정해보겠습니다.

 

 

 

 

블로그 관리 홈 > 꾸미기 > 스킨 편집 > html 편집 > CSS에서 926번째 줄 .cover-thumbnail-list-2 ul li a:hover .more를 찾기(Ctrl+F) 합니다. 현재 색상 color: #7a583a; 부분을 레드 계열로 #FF0000; 수정하고 적용 클릭합니다. 더보기 글자에 마우스 커서를 올렸을 때 색상이 변경된 것을 확인할 수 있습니다. 

 

 

"더보기 글자 옆 > 화살표 표시는 왜 색상이 안 바뀌나요?" 라고 물어보실 분들이 계실 것 같아요. 블로그 관리 홈 > 꾸미기 > 스킨 편집 > html 편집 > 파일 업로드 아래쪽에 png 파일 2개(i mages/ico_package.png , images/ico_package_2x.png)가 있습니다.

 

이 화살표 > 표시는 이미지 아이콘이기 때문에 동일한 방법으로 색상 변경을 할 수는 없다는 얘기죠. 새로운 색상으로 이미지 작업 후 업로드해야 변경이 가능합니다.

 

자, 여기까지 WHATEVER 스킨의 커버 섬네일 리스트 2 기준으로 설명드렸는데요. 만일 "다른 커버 부분을 수정하고 싶은데 CSS에서 위치를 못 찾겠어요!" 혹은 "저는 다른 스킨을 사용하고 있는데 CSS에서 어느 부분을 수정해야 할지 도대체 모르겠어요! " 라고 생각하시는 분들을 위해서!!

 

F12 키, 개발자 도구를 이용해서 CSS 위치를 찾아 스킨을 편집하는 방법을 다음 글에서 바로 이어서 알아보겠습니다.

 

읽어주셔서 감사합니다 :)