티스토리 블로그 하단 프로필 네임카드 꾸미는 방법

2024. 11. 17. 21:23 / 서기랑

티스토리 블로그 하단에 있는 네임카드는 나중에 추가되어서 그런지 스킨의 디자인에 포함되지 않은 경우가 많다.

하지만 css를 조금만 알면 수정이 불가능한 것은 아니기 때문에 디자인이 마음에 들지 않는다면 스킨에 맞게 수정하거나 본인의 입맛대로 수정하는 것이 좋다.

티스토리 블로그 하단 프로필 네임카드 꾸미는 방법

1. 네임카드의 구조 확인.

웹 페이지의 개발자 도구로 네임카드 부분을 보면 기본적으로 아래와 같은 형태로 되어있을 텐데 css를 수정하여 디자인을 변경하기 위해서는 각 부분의 클래스 이름을 확인하면 된다.

클래스 이름을 보면 대충 테두리나 배경색 등 네임카드 전체의 디자인은 tt_box_namecard, 이름이나 설명 디자인은 tt_cont, tt_tit_cont, tt_desc, 블로그의 프로필 사진과 관련된 부분은 tt_wrap_thumb와 tt_thumb_g이라고 보면 되지 않을까 한다.

data-tistory-react-app="Namecard" 부분은 배경색을 수정해도 tt_box_namecard에 적용이 안되기 때문에 네임카드를 숨길 것이 아니라면 디자인 수정에는 사용하지 않는 것이 좋다.

(배경색을 상속받는 방법도 있기는 하다)

2. 디자인 수정하기.

네임카드의 구조에서 각 부분의 클래스 이름을 확인했다면 이제 css를 사용하여 디자인을 수정하면 된다.

다만 일반적인 css 스타일을 정의할때와 약간의 차이가 있는데 네임카드의 경우 티스토리에서 제공하는 commens.css에서 정의한 스타일이 있기 때문에 아래와 같은 형태로 입력해야 한다.

/*둥근 테두리선과 하얀색 배경 적용*/
.tt_box_namecard {
background-color:fff; /*배경색 변경*/
border: 1px solid #ddd; /* 테두리 추가 */
border-radius: 20px; /* 외곽 모서리를 둥글게 */
}

/*블로그 이름 변경*/
[data-tistory-react-app="Namecard"] .tt_box_namecard .tt_tit_cont {
    font-size: 20px;
    font-weight: bold;
    color: #4171d1 /* 제목 색상 */
}

/*블로그 설명 변경*/
[data-tistory-react-app="Namecard"] .tt_box_namecard .tt_desc {
    color: #000; /* 설명 텍스트 색상 */
}

/*프로필 사진 변경*/
[data-tistory-react-app="Namecard"] .tt_thumb_g {
    border-radius: 50%; /* 프로필 이미지를 둥글게 */
}

3. 적용 예시.

해당 블로그에 테스트로 적용해본 모습은 아래와 같다.

그 외 내용

티스토리의 네임카드는 위치도 마음대로 변경이 불가능하고 구독 버튼도 중복으로 존재하기 때문에 블로그에 대한 소개 부분 외에는 필요성에 대해서는 상당한 의문이 든다.

그럼에도 사용하고자 한다면 모든 디자인을 변경하는 것은 힘들 수 있어도 위 방법으로나마 어느 정도의 디자인 변경은 가능하니 필요하다면 디자인을 변경해서 사용해 보자.

네임카드의 필요성을 느끼지 못한다면 그냥 아래의 글을 참고하여 보이지 않게 수정하는 것도 나쁘지는 않을 것이다.

티스토리 블로그 하단 네임카드 숨기는 방법

저작자표시 비영리 변경금지

서기랑 이것저것

티스토리 블로그 하단 프로필 네임카드 꾸미는 방법

티스토리 블로그 하단 프로필 네임카드 꾸미는 방법

1. 네임카드의 구조 확인.

2. 디자인 수정하기.

3. 적용 예시.

그 외 내용

티스토리툴바