티스토리 스피드스타 스킨 커스텀 (자체 정리용)

워드프레스 정보를 제공하는 블로그 Avada 2022. 4. 19. 21:26 • 댓글:

이 블로그에 스피드스타 스킨을 적용한 후에 몇 가지 커스텀을 적용했습니다. 티스토리 스킨의 경우 스킨 파일을 수정하면 추후 업데이트 시 수정된 부분을 다시 적용해주어야 하는 번거로움이 있습니다. 워드프레스는 차일드 테마를 설치하여 수정하면 테마가 업데이트되어도 수정 사항이 유지되는데, 티스토리에는 이러한 기능이 없어 불편한 것 같습니다. 이 때문에 업데이트가 나와도 다시 수정 사항을 적용해야 하기 때문에 업데이트된 스킨을 설치하는 것이 엄두가 나지 않는 경우가 많은 것 같습니다. 추후 스피드스타 스킨 업데이트 시에 참조할 수 있도록 여기에 정리해보았습니다.

티스토리 스피드스타 스킨 커스텀

공감 버튼 및 구독하기 버튼 스타일 변경

다음 CSS 코드로 스타일 변경 가능.

.Please2,.urlurl2{display:none}.container_postbtn .postbtn_like .wrap_btn{flex:none;height:23px;padding:3px;border-radius:5px}.container_postbtn .postbtn_like{flex:none}.container_postbtn .btn_post .ico_like:before{animation:none;font-size:16px;display:inline}.uoc-count{font-size:14px}.container_postbtn .btn_post .txt_like{line-height:unset}div[id^=reaction]{width:unset}.container_postbtn .postbtn_like .uoc-icon{height:unset}.container_postbtn .btn_post{border:none;height:unset}.wrap_btn{margin-right:5px}.container_postbtn .btn_menu_toolbar{height:unset;border:none;padding:3px;border-radius:5px}.container_postbtn .btn_post .ico_statistics:before,.container_postbtn .btn_post .ico_etc:before,.container_postbtn .btn_menu_toolbar{color:#000;background:#fff}.darkmode .container_postbtn .btn_post .ico_statistics:before,.darkmode .container_postbtn .btn_post .ico_etc:before,.darkmode .container_postbtn .btn_menu_toolbar,.darkmode .container_postbtn .btn_post,.darkmode .container_postbtn .postbtn_like .wrap_btn{color:#fff;background:#333232;border:none}.container_postbtn .btn_post,.container_postbtn .postbtn_like .wrap_btn{background:#fff}.container_postbtn .wrap_btn_etc,.container_postbtn .wrap_btn,.container_postbtn .btn_subscription{border:1px solid #ebebeb}.container_postbtn .postbtn_like div[id*=reaction\-]{background:#333232;border:none;padding:4px}.container_postbtn .postbtn_like .wrap_btn:hover .uoc-icon{background:none}.container_postbtn .postbtn_like+.btn_menu_toolbar:hover{background:#fff}.darkmode .container_postbtn .postbtn_like+.btn_menu_toolbar:hover{background:#333232}.container_postbtn .btn_post .empathy_up_without_ani .ico_like:before{font-size:16px}.container_postbtn .postbtn_like .wrap_btn{padding:4px}@media (max-width:768px){.container_postbtn{margin-left:0px!important;width:100%}}.container_postbtn .wrap_btn_etc,.container_postbtn .wrap_btn,.container_postbtn .btn_subscription{border:none}.container_postbtn .postbtn_like,.container_postbtn .btn_subscription{padding:0 9px;border-radius:16px;border:1px solid rgba(185,185,185,.5)!important}.container_postbtn .postbtn_like{margin-right:10px}.container_postbtn .btn_post,.container_postbtn .postbtn_like .wrap_btn{background:none}.container_postbtn .postbtn_like .uoc-icon{background:transparent;color:#000}.container_postbtn .postbtn_like div[id*=reaction\-]{background:none;padding:0}.uoc-count,.container_postbtn .btn_post .ico_like:before{font-size:12px}.container_postbtn .postbtn_like .wrap_btn{padding:0}.wrap_btn{display:flex;align-items:center;height:30px!important;margin-right:0}.container_postbtn .btn_post .ico_etc{background:url(//t1.daumcdn.net/tistory_admin/static/admin/editor/ico_postbtn_190118.png) no-repeat -120px 0;width:14px;height:4px}.container_postbtn .btn_post .ico_etc:before,.txt_state:before{content:none}.container_postbtn .btn_post .empathy_up_without_ani .ico_like:before{font-size:12px}.container_postbtn .btn_post .ico_statistics:before{content:none}.container_postbtn .btn_post .ico_statistics{background:url(//t1.daumcdn.net/tistory_admin/static/admin/editor/ico_postbtn_190118.png) no-repeat -80px -20px;width:17px;height:14px}.darkmode .container_postbtn .btn_post .ico_statistics:before,.darkmode .container_postbtn .btn_post .ico_etc:before,.darkmode .container_postbtn .btn_menu_toolbar,.darkmode .container_postbtn .btn_post,.darkmode .container_postbtn .postbtn_like .wrap_btn{background:none}.darkmode .container_postbtn .btn_post .txt_like{color:#fff}

추후 버전에서 위의 코드가 추가될 것으로 예상.

사이드바 고정 문제

사이드바가 고정(Sticky)이 되지 않는 경우,

  1. HTML 편집에서 [**Ctrl+F**]로 [**line-height:2;overflow-x:hidden**]을 검색하여, [**overflow-x:hidden;**]만 삭제하고
  2. [**swim-side**]에 position:sticky와 top 수치를 지정함.
  3. 그리고 [**gjj**]를 검색해서 사이드바에서 지우면 최근 포스트 고정 기능도 사라짐.
  4. 마지막으로, [**@media(max-width:768px) {body{overflow-x:hidden;}}**]를 [**</style>**] 앞에 추가하면 끝.

"초당 스타일 다시 계산" 항목과 "CPU 사용"이 정상 수준 이상으로 많이 리소스를 차지하는 문제

크롬 개발자 도구의 성능 모니터에서 확인하면 "초당 스타일 다시 계산" 항목과 "CPU 사용"이 정상 수준 이상으로 많이 리소스를 차지하여 사이트 속도가 느려지는 경우.

자바스크립트 CPU 사용량 정상 범위 초과
CPU 사용량이 정상 범위를 벗어남
CPU 사용 모니터링

이 문제는 CSS 애니메이션 효과 때문에 발생함.

  1. HTML 편집에서 [**-webkit-animation:gradient 15s ease infinite;animation:gradient 15s ease infinite;**]를 검색하여 삭제함.
  2. 또한 본문에 참고/팁/경고 치환자를 넣었다면 거기에 있는 pulsee animation을 제거하면 됨. [**-webkit-animation:pulsee 1.3s infinite;-ms-animation:pulsee 1.3s infinite;**] 삭제.
  3. 헤더 부분의 애니메이션 효과도 끔.

링크 아이콘 제거

스피드스타 스킨에서 링크에 링크 아이콘이 표시되고 있음. 

스피드스타 스킨 링크 아이콘

이 아이콘을 없애려면...

  • [**naver]):after**]를 검색한 다음, [**content:"\f14c";margin-left:1px;margin-right:1px**] 부분을 삭제하면 됨. 저는 주석 처리했습니다.

새로 추가한 커스텀 CSS 코드

스피드스타 업데이트를 적용한 후에 다음 코드를 추가로 삽입함.

/* 사이드바 */
.rctrped a:hover {
    background: #00aecd;
    color: white;
}


/* 푸터 */
@media only screen and (min-width:784px) {
footer#swim-footer {
    padding: 5px 0px 50px 0px;
}
}

@media only screen and (max-width:783px) {
footer#swim-footer {
    padding: 5px 0px 5px 0px;
}
}

사이드바 테두리선

사이드바 테두리선

사이드바에 테두리선을 자연스럽게 추가하기 위해

<div class="content-gutter"></div>

위의 HTML 코드를 [**</main>**]과 [**swim-side**] 사이에 추가하고 CSS 코드를 추가함.

	</main>	
		<div class="content-gutter"></div>

			<div class="swim-side">

하단 알림 배너 추가

기존의 하단 알림 배너가 자바스크립트로 구현되었지만, 알 수 없는 이유로 작동하지 않아서 제거함. 대신 "GeneratePress 테마 상단 배너 표시하기 (+플러그인 미사용)"이라는 글에 소개된 코드를 응용하여 하단에 배너를 추가했습니다.

1. 다음 HTML 코드를 [**</body>**] 바로 위에 추가합니다.

			<div id="wp-top-bar-notification">
	<div class="notice-inner grid-container">프리미엄 테마 그래픽 동영상 템플릿 <a href="https://blog.thewordcracker.com/currentmonth" rel="noopener nofollow" target="_blank">무료 다운로드</a>
	</div>
</div>

2. 다음 CSS 코드를 추가함.

@media (min-width: 769px) {
#wp-top-bar-notification {
    text-align: center;
    position: -webkit-sticky;
    position: fixed;
    bottom: 0px;
	width: 100%;
    z-index: 9999;
    background: linear-gradient(to right,#0e42b9 0,#2863ec 25%,#d9349f 100%)!important;
    color: #fff;
    font-size: 15px;
    padding: 7px 0px;
}

	#wp-top-bar-notification a {
background: #d9349f !important;
    display: inline-block;
    padding: 2px 15px 2px;
    color: white;
    text-decoration: none;
    margin: 0px 20px;
    border-radius: 8px;
  }
}

@media (max-width: 783px) {
	#wp-top-bar-notification { 
		display: none;
	}
}

포스트 날짜 형식 변경

스피드스타에서는 포스트 날짜가 "30분 전", "1시간 전", "3일 전" 등과 같은 형식으로 기본적으로 표시됨. 일반적인 날짜 형식으로 표시하려면 "현재중심적 시간 표기" 옵션을 비활성화하면 됨.

SNS 공유 버튼을 글 상단에도 표시

SNS 공유 버튼이 글 하단에 표시되지만, 글 제목 아래에도 표시하고 싶은 경우:

위와 같은 코드를 글 상단의 적절한 곳에 붙여넣기 하면 됨. 동일한 CSS ID가 중복 사용되어 바람직하지 않지만, 어쨌든 작동은 함.

In the real world, browsers don’t always check for the uniqueness of IDs in HTML. That means that if you sprinkle an HTML document with several elements, all of which have the same value for their ID attributes, you’ll probably get the same styles applied to each. This is incorrect behavior, but it happens anyway. (현실 세계에서는 브라우저가 ID의 고유성을 항상 체크하는 것은 아니므로, 여러 개의 요소에서 ID 속성에 대하여 동일한 값을 사용하도록 각 ID에 동일한 스타일이 적용될 수 있음)

코드 하이라이터 기능 비활성화

스피드스타에서 제공하는 코드하이라이터 기능을 활성화하면 티스토리 자체에서 제공하는 코드블록을 사용한 코드 스니펫은 이상하게 표시됨.

코드블록 문제

이 문제를 해결하려면 스피드스타의 코드하이라이터 기능을 비활성화해야 함.

코드 하이라이터 기능 끄기

글 제목 복붙 금지 해제

스피드스타 스킨을 적용할 경우 글 제목을 선택하지 못하도록 설정되어 있습니다. 글 제목 복붙 금지를 해제하려면:

  1. [**line-height:1.1;-webkit-user-select:none;-ms-user-select:none;user-select:none;**]을 검색한 다음,
  2. [**-webkit-user-select:none;-ms-user-select:none;user-select:none;**] 부분 삭제

참고

https://avada.tistory.com/2589

 

티스토리 블로그 코어 웹 바이탈 개선하여 검색엔진 유입 늘리기

구글 서치 콘솔의 코어 웹 바이탈 보고서는 실제 사용 데이터(필드 데이터라고도 함)에 따라 페이지의 성능을 보여 것으로, 사이트 속도가 느릴 경우 방문자 이탈률에 심각한 영향을 미치게 되

avada.tistory.com

https://avada.tistory.com/2588

 

티스토리 스피드스타 스킨 적용(+이미지 자동 워터마크 기능 등)

이 블로그에는 미니멀스타라는 유료 티스토리 스킨이 적용되어 있었습니다. 스킨 판매자께서 스피드스타 스킨 업데이트를 보내주셔서 미니멀스타에 추가한 커스텀 코드와 CSS를 스피드스타 스

avada.tistory.com