친절한효자손 취미생활

이태원 참사에 대한 깊은 애도를 표합니다. 타인의 불행을 악용하는 사이버렉카가 되지 않겠습니다.

반응형

현재 사용중인 모니터가 4K여서 지금의 친효스킨 TOP버튼 세트 버튼의 크기가 딱히 문제가 되지는 않았습니다. 하지만 해상도가 FHD 이하급으로 내려가면 버튼 사이즈가 꽤 크다는것을 직감했습니다. 특히 티스토리에서 기본 제공하는 구독 버튼과의 겹침이 있어서 이 부분을 수정해야겠다고 생각했습니다. 내년 초 쯤 배포할 친효스킨 2.5 버전에서는 이와 관련된 항목이 스킨 옵션에 제공됩니다. 허나 그때까지 못 기다리시는 분들을 위해서 수동으로 변경하는 방법을 안내해 드리겠습니다.

 

CSS 수정

먼저 아래의 첨부파일을 다운로드 받습니다.

 

친효스킨 TOP버튼 세트 크기 변경 CSS.txt
0.00MB

 

다운로드 완료 후 열람해 보시면 CSS 코드가 두 개 들어있음을 확인할 수 있습니다. 각 코드별 사용 위치가 다르니 잘 따라해 주시기 바랍니다. 먼저 친효스킨의 CSS에서 "top버튼" 이라고 검색합니다.

 

그러면 주석 처리된 TOP버튼 시작이라는 부분이 가장 첫 번째로 검색이 될 것입니다. 이 주석 바로 아래에 빈 공간을 만듭니다. 그리고 첨부파일에 있는 첫번째 코드를 삽입합니다.

 

#topBtn {
    transform-origin: bottom right;
}

이 부분이죠. 이걸 사용합니다. 이 코드는 기준 축을 설정하는 코드입니다. 즉 TOP버튼의 기준축이 오른쪽 하단이 됩니다. 해당 포인트를 중심으로 크기가 변경됩니다.

 

이렇게 삽입하면 됩니다. 그리고 조금 더 아래로 내려가보시면 다음의 위치를 찾을 수 있습니다.

 

@media (min-width: 1000px) 부분을 찾습니다. 조금만 내려오면 금방 찾을 수 있을겁니다. 해당 코드 바로 아래에 두번째 첨부파일의 코드를 붙여넣기 합니다.

 

#topBtn {
    transform: scale(1) !important;
}

이 코드입니다. 이 코드가 크기를 정의하는 코드입니다. scale 괄호 안의 숫자를 변경해 보시기 바랍니다. 1은 1배라는 의미입니다. 즉 1이 기본크기이고 1보다 작은 소수값을 입력하면 크기가 작아지게 됩니다. 0.1씩만 줄여도 크기 변화가 확 체감되므로 본인이 마음에 드는 적당한 값을 입력 후 저장하시면 됩니다. 참고로 소수점 둘째짜리까지도 입력 가능합니다. 예를 들어서 0.87 이런식입니다.

 

결과 확인

왼쪽은 scale(1)이며 오른쪽은 scale(0.7) 이다.

설정 완료 후 블로그를 새로 고침하여 TOP버튼을 직접 확인해 보세요. 전과 비교해보시면 확실히 TOP버튼 세트의 크기가 작아졌음을 알 수 있습니다. 끝.

공유하기

facebook twitter kakaoTalk kakaostory naver band

댓글