뉴스킨: 하단 메뉴 3버튼 제거, 애니메이션 효과 제거 및 버튼 색상 변경

애드센스팜에서 무료로 배포하는 뉴스킨이라는 티스토리 스킨을 적용하면 하단에 3버튼 메뉴가 표시됩니다. 원하는 경우 이 메뉴 3버튼을 제거하거나 애니메이션 효과만 제거하는 것이 가능하니다.

목차

• 1 뉴스킨: 하단 메뉴 3버튼 제거하기
• 2 애니메이션 효과 제거
• 3 허버 시 배경색 및 글자색 변경하기
• 4 뉴스킨에서 썸네일 비율 조정하기
• 5 참고

뉴스킨: 하단 메뉴 3버튼 제거하기

먼저 이 3버튼 메뉴를 제거하는 방법을 살펴보겠습니다.

티스토리 관리자 페이지에서 꾸미기 » 스킨 편집 » html 편집을 클릭합니다.

HTML 탭에서 맨 아래로 스크롤합니다.

위의 그림에서 ①로 표시된 부분 전체를 삭제하도록 합니다. 또는 아래와 같이 주석 처리를 해주어도 됩니다.

<!-- 기능을 끄고 싶으신 분들은 아래 코드를 삭제해주세요 -->
<!-- 각 게시글 별로 적용하고 싶으면 아래 코드 삭제 후 게시글 마다 아래 코드를 넣어주세요 -->
<!-- 애드센스팜 하단 메뉴 3버튼 -->
<!-- <div class="bottom-menu">
  <ul>
    <li><a href="/" target="_self">신청조건</a></li>
    <li><a href="/" target="_self">신청방법</a></li>
    <li><a href="/" target="_self">바로가기</a></li>
   </ul>
</div> -->
<!-- 애드센스팜 하단 메뉴 3버튼 -->
<!-- 각 게시글 별로 적용하고 싶으면 아래 코드 삭제 후 게시글 마다 위 코드를 넣어주세요 -->
<!-- 기능을 끄고 싶으신 분들은 위 코드를 삭제해주세요> -->

사용할 생각이 없다면 그냥 삭제하는 것이 바람직합니다.

애니메이션 효과 제거

3버튼은 그대로 두고 반짝이는 애니메이션 효과만 제거하고 싶은 경우에는 HTML 탭의 코드는 건드리지 말고 CSS 탭에서 맨 아래로 이동합니다.

다음과 같은 CSS 코드를 추가합니다.

/* 애니메이션 제거 */

@keyframes blink {
    0%, 50%, 100% { background-color: transparent !important; }
}

.blink {
    animation-name: none !important;
}

허버 시 배경색 및 글자색 변경하기

버튼 위에 마우스를 올릴 때 배경색 및 글자색을 변경하고 싶은 경우 CSS 탭 하단에 다음과 같은 코드를 추가할 수 있습니다.

/* 허버 시 버튼 배경색 및 글자 색상 변경 */

.bottom-menu ul li a:hover {
    background-color: #04beb8 !important;
    color: #fff !important;
}

배경색과 텍스트 색상 값은 적절히 변경하도록 합니다.

뉴스킨에서 썸네일 비율 조정하기

뉴스킨에서 썸네일 비율이 원하는 대로 표시되지 않을 수 있습니다. 다음 글을 참고하여 썸네일 비율을 1:1 등으로 조정할 수 있습니다.

https://avada.tistory.com/3626

티스토리 뉴스킨: 썸네일 비율 조정하기

 

참고

https://cloudways-user.tistory.com/1

클라우드웨이즈 시작 가이드 (+워드프레스 블로그 운영)

https://cloudways-user.tistory.com/4

케미클라우드에서 워드프레스 블로그 운영하기 (사용 가이드)