티스토리 카테고리의 다른글 꾸미기

티스토리 블로그를 보면 포스팅 하단에 카테고리의 다른 글이 있습니다. 오늘은 카테고리의 다른글을 자신이 원하는 스타일로 꾸미는 법을 알아 보겠습니다. 저는 흰 바탕의 카테고리의 다른글에 배경을 넣고 마우스 롤오버시 글씨 크기와 색깔을 변경해 보았습니다.

 

 1. 카테고리 다른글 넣기에 배경 

 

먼저 저는 카테고리의 다른글에 아래 사진을 넣었는데요. 사진은 포토샵을 이용하여 전체적으로 흐리게 하였습니다. 왜냐하면 이미지를 흐리게 하지 않고 그대로 넣으면 카테고리의 다른글이 이미지에 묻혀 안 보일수도 있습니다. 그리고 관리페이지의 꾸미기 -> 스킨편집 -> html 편집 -> 파일 업로드 탭을 클릭후 편집한 사진을 업로드 하였습니다.  

그후 css탭을 클릭 후 ctrl+f를 눌러 div.category를 검색하면 아래 코드를 찾을 수 있습니다. 물론 아래 코드와 완벽히 같지는 않을 텐데요 그 이유는 이미 저는 제가 원하는 스타일로 편집 했기 때문 입니다. 업로드한 이미지 파일로 배경을 하고 싶으면 background:url를 찾으신 후 images/파일명 을 입력 하면 됩니다. 그리고 나서 width:이미지넓이; height:이미지높이; 를 입력해 주시면 됩니다. 이미지 넓이와 이미지 높이보다 크면 이미지가 겹쳐 보이고 이미지 넓이와 이미지 높이보다 작으면 이미지 전체가 노출되지 않고 이미지 일부만 짤려서 노출됩니다. 따라서 원하는 이미지를 모두 보이게 하고 싶으면 이미지 넓이와 이미지 높이를 정확히 입력해야 합니다.

이미지 넓이와 높이까지 입력후 저장을 클릭하고 포스팅을 확인 하시면 카테고리의 다른글에 이미지가 배경으로 들어가 있는 걸 볼수 있습니다.

2. 마우스 롤오버시 글씨 크기와 글씨 색깔 변경 

 

이번에는 마우스 롤오버시 글씨 크기와 글씨 색깔을 변경해 보겠습니다.

소스는 아래와 같습니다.

div .another_category table th a:hover{ 

  color: #dc1353 !important;  

        font-weight:bold;

  font-size : 12pt;   

  }   

 

위 소스에서 마우스 롤오버시  color: #dc1353 는 글씨 색깔입니다. 네이버 검색창에 HTML 색상표를 검색 하신 후 원하는 색을  color: # 다음에 넣으면 됩니다. 즉  color: #원하는색 입니다. 

또 font-weight:bold;는 마우스 롤 오버시 글씨를 진하게 해 줍니다.  

마지막으로  font-size : 12pt;는 마우스 롤오버시 원하는 글씨 크기입니다. font-size : 원하는글씨크기pt;를 입력해 주시면 됩니다. 여기 까지 입력을 다 하신후 저장을 클릭 후  포스팅을 확인 하시면 카테고리의 다른글에 마우스 롤 오버시 글씨 크기와 글씨 색깔이 바뀌는 걸 확인 하실 수 있습니다.

저는 위 그림처럼 마우스 롤 오버시 글씨 크기를 12pt에 붉은색이 나타나게 하였습니다.

그럼 티스토리 카테고리의 다른글 꾸미기 는 여기서 마무리 하겠습니다. 감사합니다.