티스토리 블로그 스킨 꾸미기 - 카테고리 다른글 구조 & 댓글 방명록 입력 버튼

2016. 2. 20. 15:11

이전에 쓴 글을 일부 내용을 추가했다.

현재 이 블로그에 사용하고있는 스킨은 Wallel 님의 스퀘어 Square 스킨 이다. 처음 순수한 상태로도 꽤 만족할 만한 스킨이지만 내 입맛에 맞게 스킨의 디자인을 약간씩 수정하고 있다. 남들과 똑같은 스킨을 사용하고 싶진 않고 그렇다고 만들어 쓸만큼 능력도 안된다.

+ 현재는 스킨을 CCZ-CROSS 로 변경했다.

스킨을 수정하다보니 스킨의 HTML 이나 CSS 를 자주 보게된다. 요즘 인기 있는 다른 스킨들도 한번씩 써보았는데 대부분 스킨을 고치기엔 너무 복잡하고 어려워서 손대지 못했는데 Square 스킨은 디자인도 맘에 들지만 웹 초보가 사용하기에도 단순하고 이해하기 쉬운편이라 수정해서 사용하기에 좋다.

몇달동안 사용하면서 여러곳을 고치긴 했지만 최근 카테고리 다른글 부분과 댓글창 부분 두군데를 약간 수정해보았다.

1. 카테고리의 다른글 보기 꾸미기

티스토리에서 제공되는 플러그인중에 카테고리의 다른글은 같은 카테고리의 관심있는 글들을 계속 읽어볼 수 있게 한다. 꽤 유용한 기능이지만 있는 그대로 사용하기엔 너무 밋밋하다. 그래서 몇군데 간단히 수정했다. 목록 맨 앞에 블릿을 추가하려고 여기저기 찾아보고 모르는 HTML 을 수정해가며 시도해보았지만 내겐 아직 너무 무리이다. 그래서 간단하게 이미지를 삽입하는 방법으로 했다. 그리고 현재 보고 있는 글의 경우 목록에서 밑줄로 표시되어 보기 안좋아 밑줄도 삭제했다. 추가로 날짜 부분도 불필요해 보여 삭제하고 댓글수 컬러를블로그의 컬러를 적용해 변경했다. 어느정도 수정해 놓고 보니 내 맘에도 들고 여기저기 검색해서 찾아본 보람도 든다.

+ 추가로 약간 더 수정했다.

테두리를 삭제했다.
현재글은 파란색으로 표시
마우스 오버시 빨간색으로 글 변경

이건 Square 스킨이 아니라도 모든 스킨들에서도 동일하게 적용할 수 있다.

/* 카테고리 다른글 꾸미기 */
div .another_category h4 {
    color:#000 !important;
    font-weight:400;
    font-size: 18px;
    font-size: 1.8rem !important;
    }
div .another_category h4 a {
    font-family: 'Ubuntu Condensed', "Meiryo UI", "NSK";
    font-weight:400;
    color:#07a !important;
    }
div .another_category table th,
div .another_category table td {
    font-size: 18px;
    font-size: 1.8rem !important;
    } 
/* 댓글 수 표시 */
div .another_category th span {
    font-family: 'Ubuntu Condensed', "Meiryo UI", "NSK"; 
    font-size: 16px;
    font-size: 1.6rem;
    color:#07a !important;
    }
/* 목록 이미지 삽입 */
div .another_category th a {
    padding-left: 20px;
    background: url(images/text77.png) no-repeat 0;
    color:#000 !important;
    }
/* 선택글 색상 변경 & 밑줄 삭제 */
div .another_category th a.current {
    color: #07a;
    border-bottom:none !important;
    }
/* 날짜 숨기기 추가 */
div .another_category td {display:none;}
/* 테두리 숨기기와 아래 공간 추가 */
div .another_category {border: none !important;}
/* 마우스 오버시 효과 - 글 색상 변경 & 움직이기 효과 */
div .another_category table th a:hover{
    padding-left: 30px;    
    color: #CC0033 !important;
    }
/* 현재글 색상 */
div .another_category table th a.current {
    font-weight: 400; 
    color:#07a !important;
    }
/* 맨아래 밑줄 추가 */
div .another_category table {border-bottom: 1px solid #ddd; }

내가 사용했던 위 사진의 스퀘어 스킨 CSS - 소스 코드를 보면 카테고리 다른글의 구조를 어느정도 파악할 수 있다. 카테고리 다른글 치환자의 구조 이해를 위해 간단한 주석을 달아 놓았다. 티스토리의 다른 스킨도 대부분 동일하니 참고하여 자신의 입맛에 맞게 적용하면 된다. 댓글수 표시를 삭제하기 원하면 아래 소스에서 div .another_category th span 항목 내용을 display: none; 으로 교체하면 된다.

+ 스킨을 CCZ-CROSS 로 바꾸면서 카테고리의 다른글 부분도 다시 수정했다.

지저분하게 보이는 선들은 모두 삭제하고 마우스 오버시 효과와 목록의 앞에 원 숫자 목록을 추가했다.

2. 댓글 / 방명록 입력 버튼 꾸미기

댓글창 부분은 전에도 여러번 수정을 했었다. 댓글창임을 강조하기 위해 글쓰는 연필 모양의 GIF 이미지를 추가해서 넣었다. 그리고 기본 설정되어 있는 입력 버튼 부분이 항상 맘에 걸렸는데 이번 기회에 문구도 한글로 바꾸고 글자만 표시되던 입력을 버튼 모양으로 변경했다. 다 해놓고 나니 버튼 모양 부분의 글자 색상을 변경하고 싶어서 여러 시도를 해보았는데 변경이 먹질 않는다. 아무래도 상위 명령에서 색상이 강제로 적용되어 변경이 되지 않는듯 하다. 결국 글자 색상을 바꾸지 못하고 아쉽지만 현재의 상태로 만족해야할 듯 하다.

+ 폰트 색상 변경 문제는 해결했다. 내가 이제까지 다른 부분에다 계속 삽질하고 있던거임;;

<변경 전>