blog-img Salgu
Black Cat
About Skin Tip Get in touch
Mellow Apricot
Skin
Tip
Notice
post-img
스크립트 없이 티스토리 신고버튼, 좋아요버튼 커스텀하기
아주 예전에 올렸던 내용과 다르게 스크립트를 사용하지 않고 CSS로만 본문 포스트 버튼을 커스텀하는 내용으로 업데이트해서 업로드합니다. 기본 디자인 결과물 | 기본 CSS 버전 /****************************************************************/ /* RESET */ body :is(.container_postbtn) { display: flex; } body :is(.container_postbtn)::after { content: none; } body :is(.container_postbtn .postbtn_like) { display: flex; align-items: center; float: unset; padding: unset; font-s..
2023.09.08
Read more →
post-img
티스토리 스킨 (3. SNS) 유료 배포 55
블로그를 SNS처럼 만든다면? #3 스킨을 통해 티스토리에서 새로운 SNS를 느껴보세요! 홈 화면에서 당신의 취향을 자유롭게 표현할 수 있는 스킨 커버가 여러분을 기다리고 있어요. 디데이를 카운트 다운하여 중요한 순간을 기다리거나 기념할 수도 있고, 최신 글들을 다양한 형태로 출력할 수 있습니다. 이모지로도 당신을 표현할 수 있어 더욱 개성 있는 블로그를 만들 수 있습니다. #3 스킨으로 재미있는 SNS 체험을 시작해보세요! 스킨 수정 가능 | 재배포, 재판매 금지 | 카피라이트 삭제 금지 지원 부분 - 반응형 - [스킨 레이아웃 2종] 1단, 2단 - [홈 커버 10종] : 하이라이트, 공지사항, 태그 클라우드, 디데이, 링크, 피드, 카드, 리뷰, 글목록, 갤러리 - [카테고리별 목록 6종] : 웹진..
2023.09.06
Read more →
post-img
티스토리 특정 글 제목만 색깔 변하게 하기 + 특정 카테고리에 class추가하기
| 특정 글만 색깔 넣는 기능 위 사진처럼 특정 글만 색상이 변하게 하는 기능 추가하기 (별 거 없음) 해당 글의 주소만 있으면 됩니다. ※ 단, 관리자 화면에서 포스트 주소를 숫자로 설정해 주세요. | 설정 관리자 화면 > 관리 > 블로그 > 주소 설정 > 포스트 주소를 []로 설정합니다. 1. 카테고리 페이지에서 변경하기 /* a태그 1개 */ 티스토리 스킨 (4. Grayscale Line Skin) 유료 배포 2023.08.13 스킨 수정 가능 | 재배포, 재판매 금지 | 카피라이트 삭제 금지... 이게 대충의 레이아웃인데요 필요한 부분은 a href="/218" 부분입니다. .list-item[href="/218"] { color:red; } 이런 식으로 a태그에 [href="/218"](글 번..
2023.08.19
Read more →
post-img
티스토리 스킨 (4. Grayscale Line) 유료 배포 21
Grayscale Line 스킨을 통해 콘텐츠의 느낌을 한층 더 풍부하게 표현할 수 있습니다! 홈 화면에서는 당신의 취향을 자유롭게 표현할 수 있는 스킨 커버를 지원하며, 본문의 너비를 조정해도 매끄러운 출력이 가능하여 여백의 미를 느끼거나 꽉 찬 컨텐츠를 즐길 수 있습니다. 또한 카테고리별로 앨범형 | 목록형 | 웹진형 등 각각의 콘텐츠에 적합한 디자인을 선택할 수 있습니다. 이제 블로그에서 새로운 경험을 즐기세요! 당신이 만들어가는 세상이 더 풍요로워질 거예요. 스킨 수정 가능 | 재배포, 재판매 금지 | 카피라이트 삭제 금지 지원 부분 - 반응형 - [스킨 레이아웃 2종] : 1단, 2단 - [스킨 테마 2종] : 선형, 라운드형 - [홈 커버 5종] : 공지사항, 태그 클라우드, 앨범형, 웹진형,..
2023.08.13
Read more →

스크립트 없이 티스토리 신고버튼, 좋아요버튼 커스텀하기

tip
by 살구머거 2023. 9. 8.
Share
Related Themes
entry-thumbnail

아주 예전에 올렸던 내용과 다르게 스크립트를 사용하지 않고

CSS로만 본문 포스트 버튼을 커스텀하는 내용으로 업데이트해서 업로드합니다.

 

기본 디자인

 

결과물

 

 

| 기본 CSS 버전

/****************************************************************/

/* RESET */

body :is(.container_postbtn) {
	display: flex;
}

body :is(.container_postbtn)::after {
	content: none;
}

body :is(.container_postbtn .postbtn_like) {
	display: flex;
	align-items: center;

	float: unset;

	padding: unset;

	font-size: inherit !important;
}

body :is(.container_postbtn .postbtn_like .wrap_btn) {
	display: flex;
	align-items: center;

	float: unset;
}

body :is(.container_postbtn .btn_post) {
	height: unset;
	border: unset;
	border-radius: unset;
	padding: unset;

	font-size: inherit !important;
	font-family: inherit !important;
	line-height: inherit !important;
}

body :is(.container_postbtn .btn_post.uoc-icon .uoc-icon) {
	display: flex;
	align-items: center;
}

body :is(.container_postbtn .btn_post .ico_like) {
	display: none;

	max-width: unset;
	width: unset;
	height: unset;
	margin: unset;
	background: none;

	text-indent: unset;
}

body :is(.container_postbtn .btn_post .txt_like) {
	margin: unset;
    
	font-size: inherit !important;
	font-family: inherit !important;
	line-height: inherit !important;
}

body :is(.container_postbtn .btn_post .ico_share) {
	display: none;

	margin: unset;
	background: none;

	font-size: inherit !important;
	font-family: inherit !important;
	line-height: inherit !important;
}

body :is(.container_postbtn .layer_post) {
	border: unset;
	box-shadow: unset;
	padding: unset;
	background: unset;
}

body :is(.container_postbtn .layer_post .ico_arrbt) {
	display: none;
}

body :is(.container_postbtn .layer_post .btn_mark) {
	padding: unset;

	font-size: inherit !important;
	font-family: inherit !important;
	line-height: inherit !important;
	color: inherit;
}

body :is(.container_postbtn .btn_post .ico_statistics) {
	display: none;

	width: unset;
	height: unset;
	margin: unset;
	background: none;

	text-indent: unset;
}

body :is(.btn_post, .btn_menu_toolbar) {
	outline: none !important;
}

body :is(.btn_post, .btn_menu_toolbar):focus-visible {
	outline: 2px !important;
}

body :is(.container_postbtn .postbtn_ccl) {
	display: none;
}

body :is(.container_postbtn .ico_postbtn.ico_etc) {
	display: none;
}

body :is(.container_postbtn .btn_menu_toolbar) {
	width: -moz-fit-content;
	width: fit-content;
	height: unset;
	margin: unset;
	border: unset;
	border-radius: unset;

	font-size: inherit !important;
	font-family: inherit !important;
	line-height: inherit !important;
}

body :is(.container_postbtn .btn_menu_toolbar .txt_state) {
	display: none;
}

body :is(.container_postbtn .btn_menu_toolbar.following .ico_check_type1) {
	display: none;
}

/****************************************************************/



/* 메인 박스 */
body :is(.container_postbtn) {
	justify-content: space-between;

	gap: 20px;
}

body :is(.container_postbtn .postbtn_like) { 
	gap: 15px;

	border: 1px solid #000;
	border-radius: 15px;
	padding: 4px 14px;
	background-color: #fff;
}

/* 좋아요 버튼 */
body :is(.container_postbtn .btn_post.uoc-icon >.uoc-icon)::before {
	content: "좋아요";

	margin-right: 4px;
}

body :is(.container_postbtn .btn_post.uoc-icon .uoc-count)::before {
	content: "+";
}

/* 공유하기 버튼 */
body :is(.container_postbtn .btn_post.sns_btn.btn_share)::before {
	content: "공유하기";
}

/* 공유하기/더보기 레이어 */
body :is(.container_postbtn .bundle_post) {
	border: 1px solid #000;
	border-radius: 15px;
	overflow: hidden;
}

/* 공유하기/더보기 레이어 아이템 */
body :is(.container_postbtn .layer_post .btn_mark) {
	padding: 5px 10px;
	background-color: #fff;
}

/* 통계 버튼 */
body :is(.container_postbtn .wrap_btn .btn_post:not(.btn_etc1, .btn_etc2, .sns_btn, .uoc-icon))::before {
	content: "통계";
}

/* 더보기 버튼 - 관리자 */
body :is(.container_postbtn .btn_post.btn_etc1)::before {
	content: "+";
}

/* 더보기 버튼 - 방문자 */
body :is(.container_postbtn .btn_post.btn_etc2)::before {
	content: "+";
}

/* 구독 버튼 */
body :is(.container_postbtn .btn_menu_toolbar) {
	display: flex;
	align-items: center;
    
	border: 1px solid #000;
	border-radius: 15px;
	padding: 4px 10px;
	background-color: #fff;
    
    color: #000
}

body :is(.container_postbtn .btn_menu_toolbar)::before {
	content: "구독하기";
}

body :is(.container_postbtn .btn_menu_toolbar.following)::before {
	content: "구독중";
}

 

딱 기본적인 CSS입니다.

 

 

/* 공감 */
.container_postbtn .wrap_btn:first-of-type {
	display: none !important; 
}

/* 공감 카운트 */
body :is(.container_postbtn .btn_post.uoc-icon .uoc-count) {
	display: none !important; 
}

/* 공유 */
.container_postbtn .wrap_btn_share {
	display: none !important;
}

/* 통계 */
.container_postbtn .wrap_btn:nth-of-type(3):not(.wrap_btn_etc) {
	display: none !important;
}

/* 더보기 */
.container_postbtn .wrap_btn_etc {
	display: none !important;
}

/* 구독 */
.container_postbtn .btn_menu_toolbar {
	display: none !important;
}

숨기고 싶은 버튼은 위의 CSS를 참고하여 display: none 하면 됩니다.
(신고 버튼 숨기는 건 각자의 판단으로.. 저는 추천하지 않으며 책임지지 않습니다.)

 

 

이모지 커스텀
SVG 커스텀 (관리자)
SVG 커스텀 (방문자)
SVG 커스텀 (방문자)

 

 

| SVG 커스텀 버전

/****************************************************************/

/* RESET */

body :is(.container_postbtn) {
	display: flex;
}

body :is(.container_postbtn)::after {
	content: none;
}

body :is(.container_postbtn .postbtn_like) {
	display: flex;
	align-items: center;

	float: unset;

	padding: unset;

	font-size: inherit !important;
}

body :is(.container_postbtn .postbtn_like .wrap_btn) {
	display: flex;
	align-items: center;

	float: unset;
}

body :is(.container_postbtn .btn_post) {
	height: unset;
	border: unset;
	border-radius: unset;
	padding: unset;

	font-size: inherit !important;
	font-family: inherit !important;
	line-height: inherit !important;
}

body :is(.container_postbtn .btn_post.uoc-icon .uoc-icon) {
	display: flex;
	align-items: center;
}

body :is(.container_postbtn .btn_post .ico_like) {
	display: none;

	max-width: unset;
	width: unset;
	height: unset;
	margin: unset;
	background: none;

	text-indent: unset;
}

body :is(.container_postbtn .btn_post .txt_like) {
	margin: unset;
    
	font-size: inherit !important;
	font-family: inherit !important;
	line-height: inherit !important;
}

body :is(.container_postbtn .btn_post .ico_share) {
	display: none;

	margin: unset;
	background: none;

	font-size: inherit !important;
	font-family: inherit !important;
	line-height: inherit !important;
}

body :is(.container_postbtn .layer_post) {
	border: unset;
	box-shadow: unset;
	padding: unset;
	background: unset;
}

body :is(.container_postbtn .layer_post .ico_arrbt) {
	display: none;
}

body :is(.container_postbtn .layer_post .btn_mark) {
	padding: unset;

	font-size: inherit !important;
	font-family: inherit !important;
	line-height: inherit !important;
	color: inherit;
}

body :is(.container_postbtn .btn_post .ico_statistics) {
	display: none;

	width: unset;
	height: unset;
	margin: unset;
	background: none;

	text-indent: unset;
}

body :is(.btn_post, .btn_menu_toolbar) {
	outline: none !important;
}

body :is(.btn_post, .btn_menu_toolbar):focus-visible {
	outline: 2px !important;
}

body :is(.container_postbtn .postbtn_ccl) {
	display: none;
}

body :is(.container_postbtn .ico_postbtn.ico_etc) {
	display: none;
}

body :is(.container_postbtn .btn_menu_toolbar) {
	width: -moz-fit-content;
	width: fit-content;
	height: unset;
	margin: unset;
	border: unset;
	border-radius: unset;

	font-size: inherit !important;
	font-family: inherit !important;
	line-height: inherit !important;
}

body :is(.container_postbtn .btn_menu_toolbar .txt_state) {
	display: none;
}

body :is(.container_postbtn .btn_menu_toolbar.following .ico_check_type1) {
	display: none;
}

/****************************************************************/




body :is(.container_postbtn) {
	justify-content: space-between;

	gap: 20px;
}

body :is(.container_postbtn .postbtn_like) { 
	gap: 20px;

	border: 1px solid #000;
	border-radius: 15px;
	padding: 4px 14px;
	background-color: #fff;
}

/* 좋아요 버튼 */
body :is(.container_postbtn .btn_post.uoc-icon >.uoc-icon)::before {
	content: "";
	display: block;

	width: 16px;
	height: 16px;
	margin-right: 4px;
	background-size: 100px;
	--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 3C19.5376 3 22 5.5 22 9C22 16 14.5 20 12 21.5C9.5 20 2 16 2 9C2 5.5 4.5 3 7.5 3C9.35997 3 11 4 12 5C13 4 14.64 3 16.5 3ZM12.9339 18.6038C13.8155 18.0485 14.61 17.4955 15.3549 16.9029C18.3337 14.533 20 11.9435 20 9C20 6.64076 18.463 5 16.5 5C15.4241 5 14.2593 5.56911 13.4142 6.41421L12 7.82843L10.5858 6.41421C9.74068 5.56911 8.5759 5 7.5 5C5.55906 5 4 6.6565 4 9C4 11.9435 5.66627 14.533 8.64514 16.9029C9.39 17.4955 10.1845 18.0485 11.0661 18.6038C11.3646 18.7919 11.6611 18.9729 12 19.1752C12.3389 18.9729 12.6354 18.7919 12.9339 18.6038Z'%3E%3C/path%3E%3C/svg%3E");
	background-image: var(--svg);
	-webkit-mask-image: var(--svg);
	mask-image: var(--svg);
	background-color: #000;
}

/* 공감 이미 누른 상태 */
body :is(.container_postbtn .btn_post.uoc-icon >.uoc-icon.like_on)::before {
	--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 3C19.5376 3 22 5.5 22 9C22 16 14.5 20 12 21.5C9.5 20 2 16 2 9C2 5.5 4.5 3 7.5 3C9.35997 3 11 4 12 5C13 4 14.64 3 16.5 3Z'%3E%3C/path%3E%3C/svg%3E");

}

/* 카운트 */
body :is(.container_postbtn .btn_post.uoc-icon .uoc-icon) {
	color: #000;
}


/* 공유하기 버튼 */
body :is(.container_postbtn .btn_post.sns_btn.btn_share)::before {
	content: "";
	display: block;

	width: 16px;
	height: 16px;
	background-size: 150px;
	--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.1202 17.0228L8.92129 14.7324C8.19135 15.5125 7.15261 16 6 16C3.79086 16 2 14.2091 2 12C2 9.79086 3.79086 8 6 8C7.15255 8 8.19125 8.48746 8.92118 9.26746L13.1202 6.97713C13.0417 6.66441 13 6.33707 13 6C13 3.79086 14.7909 2 17 2C19.2091 2 21 3.79086 21 6C21 8.20914 19.2091 10 17 10C15.8474 10 14.8087 9.51251 14.0787 8.73246L9.87977 11.0228C9.9583 11.3355 10 11.6629 10 12C10 12.3371 9.95831 12.6644 9.87981 12.9771L14.0788 15.2675C14.8087 14.4875 15.8474 14 17 14C19.2091 14 21 15.7909 21 18C21 20.2091 19.2091 22 17 22C14.7909 22 13 20.2091 13 18C13 17.6629 13.0417 17.3355 13.1202 17.0228ZM6 14C7.10457 14 8 13.1046 8 12C8 10.8954 7.10457 10 6 10C4.89543 10 4 10.8954 4 12C4 13.1046 4.89543 14 6 14ZM17 8C18.1046 8 19 7.10457 19 6C19 4.89543 18.1046 4 17 4C15.8954 4 15 4.89543 15 6C15 7.10457 15.8954 8 17 8ZM17 20C18.1046 20 19 19.1046 19 18C19 16.8954 18.1046 16 17 16C15.8954 16 15 16.8954 15 18C15 19.1046 15.8954 20 17 20Z'%3E%3C/path%3E%3C/svg%3E");
	background-image: var(--svg);
	-webkit-mask-image: var(--svg);
	mask-image: var(--svg);
	background-color: #000;
}


/* 공유하기/더보기 레이어 */
body :is(.container_postbtn .bundle_post) {
	border: 1px solid  #000;
	border-radius: 15px;
	overflow: hidden;
}

/* 공유하기/더보기 레이어 아이템 */
body :is(.container_postbtn .layer_post .btn_mark) {
	padding: 5px 10px;
	background-color: #fff;
}


/* 통계 버튼 */
body :is(.container_postbtn .wrap_btn .btn_post:not(.btn_etc1, .btn_etc2, .sns_btn, .uoc-icon))::before {
	content: "";
	display: block;

	width: 16px;
	height: 16px;
	background-size: 150px;
	--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12H4V21H2V12ZM5 14H7V21H5V14ZM16 8H18V21H16V8ZM19 10H21V21H19V10ZM9 2H11V21H9V2ZM12 4H14V21H12V4Z'%3E%3C/path%3E%3C/svg%3E");
	background-image: var(--svg);
	-webkit-mask-image: var(--svg);
	mask-image: var(--svg);
	background-color: #000;
}


/* 더보기 버튼 (관리자) */
body :is(.container_postbtn .btn_post.btn_etc1)::before {
	content: "";
	display: block;

	width: 16px;
	height: 16px;
	background-size: 150px;
	--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.33946 17.0002C2.90721 16.2515 2.58277 15.4702 2.36133 14.6741C3.3338 14.1779 3.99972 13.1668 3.99972 12.0002C3.99972 10.8345 3.3348 9.824 2.36353 9.32741C2.81025 7.71651 3.65857 6.21627 4.86474 4.99001C5.7807 5.58416 6.98935 5.65534 7.99972 5.072C9.01009 4.48866 9.55277 3.40635 9.4962 2.31604C11.1613 1.8846 12.8847 1.90004 14.5031 2.31862C14.4475 3.40806 14.9901 4.48912 15.9997 5.072C17.0101 5.65532 18.2187 5.58416 19.1346 4.99007C19.7133 5.57986 20.2277 6.25151 20.66 7.00021C21.0922 7.7489 21.4167 8.53025 21.6381 9.32628C20.6656 9.82247 19.9997 10.8336 19.9997 12.0002C19.9997 13.166 20.6646 14.1764 21.6359 14.673C21.1892 16.2839 20.3409 17.7841 19.1347 19.0104C18.2187 18.4163 17.0101 18.3451 15.9997 18.9284C14.9893 19.5117 14.4467 20.5941 14.5032 21.6844C12.8382 22.1158 11.1148 22.1004 9.49633 21.6818C9.55191 20.5923 9.00929 19.5113 7.99972 18.9284C6.98938 18.3451 5.78079 18.4162 4.86484 19.0103C4.28617 18.4205 3.77172 17.7489 3.33946 17.0002ZM8.99972 17.1964C10.0911 17.8265 10.8749 18.8227 11.2503 19.9659C11.7486 20.0133 12.2502 20.014 12.7486 19.9675C13.1238 18.8237 13.9078 17.8268 14.9997 17.1964C16.0916 16.5659 17.347 16.3855 18.5252 16.6324C18.8146 16.224 19.0648 15.7892 19.2729 15.334C18.4706 14.4373 17.9997 13.2604 17.9997 12.0002C17.9997 10.74 18.4706 9.5632 19.2729 8.6665C19.1688 8.4405 19.0538 8.21822 18.9279 8.00021C18.802 7.78219 18.667 7.57148 18.5233 7.36842C17.3457 7.61476 16.0911 7.43414 14.9997 6.80405C13.9083 6.17395 13.1246 5.17768 12.7491 4.03455C12.2509 3.98714 11.7492 3.98646 11.2509 4.03292C10.8756 5.17671 10.0916 6.17364 8.99972 6.80405C7.9078 7.43447 6.65245 7.61494 5.47428 7.36803C5.18485 7.77641 4.93463 8.21117 4.72656 8.66637C5.52881 9.56311 5.99972 10.74 5.99972 12.0002C5.99972 13.2604 5.52883 14.4372 4.72656 15.3339C4.83067 15.5599 4.94564 15.7822 5.07152 16.0002C5.19739 16.2182 5.3324 16.4289 5.47612 16.632C6.65377 16.3857 7.90838 16.5663 8.99972 17.1964ZM11.9997 15.0002C10.3429 15.0002 8.99972 13.6571 8.99972 12.0002C8.99972 10.3434 10.3429 9.00021 11.9997 9.00021C13.6566 9.00021 14.9997 10.3434 14.9997 12.0002C14.9997 13.6571 13.6566 15.0002 11.9997 15.0002ZM11.9997 13.0002C12.552 13.0002 12.9997 12.5525 12.9997 12.0002C12.9997 11.4479 12.552 11.0002 11.9997 11.0002C11.4474 11.0002 10.9997 11.4479 10.9997 12.0002C10.9997 12.5525 11.4474 13.0002 11.9997 13.0002Z'%3E%3C/path%3E%3C/svg%3E");
	background-image: var(--svg);
	-webkit-mask-image: var(--svg);
	mask-image: var(--svg);
	background-color: #000;
}

/* 더보기 버튼 (방문자) */
body :is(.container_postbtn .btn_post.btn_etc2)::before {
	content: "";
	display: block;

	width: 16px;
	height: 16px;
	background-size: 150px;
	--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z'%3E%3C/path%3E%3C/svg%3E");
	background-image: var(--svg);
	-webkit-mask-image: var(--svg);
	mask-image: var(--svg);
	background-color: #000;
}

/* 구독 버튼 */
body :is(.container_postbtn .btn_menu_toolbar) {
	display: flex;
	align-items: center;

	border: 1px solid  #000;
	border-radius: 15px;
	padding: 4px 10px;
	background-color: #fff;

	color: #000;
}

/* 구독버튼 아이콘 (미구독) */
body :is(.container_postbtn .btn_menu_toolbar)::before {
	content: "";
	display: block;

	width: 14px;
	height: 14px;
	margin-right: 4px;
	background-size: 150px;
	--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 14.252V16.3414C13.3744 16.1203 12.7013 16 12 16C8.68629 16 6 18.6863 6 22H4C4 17.5817 7.58172 14 12 14C12.6906 14 13.3608 14.0875 14 14.252ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11ZM17.7929 19.9142L21.3284 16.3787L22.7426 17.7929L17.7929 22.7426L14.2574 19.2071L15.6716 17.7929L17.7929 19.9142Z'%3E%3C/path%3E%3C/svg%3E");
	background-image: var(--svg);
	-webkit-mask-image: var(--svg);
	mask-image: var(--svg);
	background-color: #000;
}

/* 구독버튼 아이콘 (구독중) */
body :is(.container_postbtn .btn_menu_toolbar.following)::before {
	content: "";
	display: block;
    
	width: 14px;
	height: 14px;
	margin-right: 4px;
	background-size: 150px;
	--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 14.0619V22H4C4 17.5817 7.58172 14 12 14C12.3387 14 12.6724 14.021 13 14.0619ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM17.7929 19.9142L21.3284 16.3787L22.7426 17.7929L17.7929 22.7426L14.2574 19.2071L15.6716 17.7929L17.7929 19.9142Z'%3E%3C/path%3E%3C/svg%3E");
	background-image: var(--svg);
	-webkit-mask-image: var(--svg);
	mask-image: var(--svg);
	background-color: #000;
}

body :is(.container_postbtn .btn_menu_toolbar)::after {
	content: "구독하기";
}

body :is(.container_postbtn .btn_menu_toolbar.following)::after {
	content: "구독중";
}

 

 

reset과 꾸미는 내용을 나눠놔서 어렵지 않으니 세부적인 건 직접 수정하시면 됩니다

 

1. 포스트 버튼과 구독 버튼을 붙여놓고 싶으면

body :is(.container_postbtn)의 justify-content를 flex-start 혹은 flex-end로 바꿔주세요

 

2. 아이콘의 색상 값은 background-color를 조정하세요

 

3. 아이템 간격은 gap을 조절하면 됩니다

body :is(.container_postbtn) 검은색 화살표

body :is(.container_postbtn .postbtn_like) 주황색 화살표

 

 

 

https://remixicon.com/ 

아이콘 출처 : remixicon

아이콘 바꾸실 거면 svg에 color값이 존재하지 않아 별도로 지워줄 필요가 없는 remixicon 쓰는 게 편할 듯 싶습니다 (다른 거 쓰셔도 됨)

 

https://yoksel.github.io/url-encoder/

 

remixicon에서 복사한 svg 값을 입력하고, Ready for CSS에 있는 url~부터 끝까지 --svg 변수 값에 넣어주면 됩니다

 

 

 

 

※ 그냥 가상선택자(::before, ::after) content에 웹폰트 넣어주셔도 됩니다.

</head> 위에 불러와야 함 

 

| 웹폰트 버전

remixicon 버전 https://github.com/Remix-Design/RemixIcon

 

GitHub - Remix-Design/RemixIcon: Open source neutral style icon system

Open source neutral style icon system. Contribute to Remix-Design/RemixIcon development by creating an account on GitHub.

github.com

<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
/****************************************************************/

/* RESET */

body :is(.container_postbtn) {
	display: flex;
}

body :is(.container_postbtn)::after {
	content: none;
}

body :is(.container_postbtn .postbtn_like) {
	display: flex;
	align-items: center;

	float: unset;

	padding: unset;

	font-size: inherit !important;
}

body :is(.container_postbtn .postbtn_like .wrap_btn) {
	display: flex;
	align-items: center;

	float: unset;
}

body :is(.container_postbtn .btn_post) {
	height: unset;
	border: unset;
	border-radius: unset;
	padding: unset;

	font-size: inherit !important;
	font-family: inherit !important;
	line-height: inherit !important;
}

body :is(.container_postbtn .btn_post.uoc-icon .uoc-icon) {
	display: flex;
	align-items: center;
}

body :is(.container_postbtn .btn_post .ico_like) {
	display: none;

	max-width: unset;
	width: unset;
	height: unset;
	margin: unset;
	background: none;

	text-indent: unset;
}

body :is(.container_postbtn .btn_post .txt_like) {
	margin: unset;
    
	font-size: inherit !important;
	font-family: inherit !important;
	line-height: inherit !important;
}

body :is(.container_postbtn .btn_post .ico_share) {
	display: none;

	margin: unset;
	background: none;

	font-size: inherit !important;
	font-family: inherit !important;
	line-height: inherit !important;
}

body :is(.container_postbtn .layer_post) {
	border: unset;
	box-shadow: unset;
	padding: unset;
	background: unset;
}

body :is(.container_postbtn .layer_post .ico_arrbt) {
	display: none;
}

body :is(.container_postbtn .layer_post .btn_mark) {
	padding: unset;

	font-size: inherit !important;
	font-family: inherit !important;
	line-height: inherit !important;
	color: inherit;
}

body :is(.container_postbtn .btn_post .ico_statistics) {
	display: none;

	width: unset;
	height: unset;
	margin: unset;
	background: none;

	text-indent: unset;
}

body :is(.btn_post, .btn_menu_toolbar) {
	outline: none !important;
}

body :is(.btn_post, .btn_menu_toolbar):focus-visible {
	outline: 2px !important;
}

body :is(.container_postbtn .postbtn_ccl) {
	display: none;
}

body :is(.container_postbtn .ico_postbtn.ico_etc) {
	display: none;
}

body :is(.container_postbtn .btn_menu_toolbar) {
	width: -moz-fit-content;
	width: fit-content;
	height: unset;
	margin: unset;
	border: unset;
	border-radius: unset;

	font-size: inherit !important;
	font-family: inherit !important;
	line-height: inherit !important;
}

body :is(.container_postbtn .btn_menu_toolbar .txt_state) {
	display: none;
}

body :is(.container_postbtn .btn_menu_toolbar.following .ico_check_type1) {
	display: none;
}

/****************************************************************/




body :is(.container_postbtn) {
	justify-content: space-between;

	gap: 20px;
}

body :is(.container_postbtn .postbtn_like) { 
	gap: 20px;

	border: 1px solid #000;
	border-radius: 15px;
	padding: 4px 14px;
	background-color: #fff;
}

/* 좋아요 버튼 */
body :is(.container_postbtn .btn_post.uoc-icon >.uoc-icon)::before {
	content: "\ee0b";
	display: block;

	margin-right: 4px;

	font-size: 13px;
	font-family: "remixicon";
	color: #000;
}

/* 공감 이미 누른 상태 */
body :is(.container_postbtn .btn_post.uoc-icon >.uoc-icon.like_on)::before {
	content: "\ee0a";
}

/* 카운트 */
body :is(.container_postbtn .btn_post.uoc-icon .uoc-icon) {
	color: #000;
}


/* 공유하기 버튼 */
body :is(.container_postbtn .btn_post.sns_btn.btn_share)::before {
	content: "\f0fe";
	display: block;

	font-size: 13px;
	font-family: "remixicon";
	color: #000;
}


/* 공유하기/더보기 레이어 */
body :is(.container_postbtn .bundle_post) {
	border: 1px solid  #000;
	border-radius: 15px;
	overflow: hidden;
}

/* 공유하기/더보기 레이어 아이템 */
body :is(.container_postbtn .layer_post .btn_mark) {
	padding: 5px 10px;
	background-color: #fff;
}


/* 통계 버튼 */
body :is(.container_postbtn .wrap_btn .btn_post:not(.btn_etc1, .btn_etc2, .sns_btn, .uoc-icon))::before {
	content: "\ea9b";
	display: block;

	font-size: 13px;
	font-family: "remixicon";
	color: #000;
}


/* 더보기 버튼 (관리자) */
body :is(.container_postbtn .btn_post.btn_etc1)::before {
	content: "\f0e8";
	display: block;

	font-size: 13px;
	font-family: "remixicon";
	color: #000;
}

/* 더보기 버튼 (방문자) */
body :is(.container_postbtn .btn_post.btn_etc2)::before {
	content: "\eca1";
	display: block;

	font-size: 13px;
	font-family: "remixicon";
	color: #000;
}

/* 구독 버튼 */
body :is(.container_postbtn .btn_menu_toolbar) {
	display: flex;
	align-items: center;

	border: 1px solid  #000;
	border-radius: 15px;
	padding: 4px 10px;
	background-color: #fff;

	color: #000;
}

/* 구독버튼 아이콘 (미구독) */
body :is(.container_postbtn .btn_menu_toolbar)::before {
	content: "\f261";
	display: block;

	font-size: 13px;
	font-family: "remixicon";
	color: #000;
}

/* 구독버튼 아이콘 (구독중) */
body :is(.container_postbtn .btn_menu_toolbar.following)::before {
	content: "\f260";
	display: block;

	font-size: 13px;
	font-family: "remixicon";
	color: #000;
}

body :is(.container_postbtn .btn_menu_toolbar)::after {
	content: "구독하기";
}

body :is(.container_postbtn .btn_menu_toolbar.following)::after {
	content: "구독중";
}

티스토리 스킨 (3. SNS) 유료 배포

skin
by 살구머거 2023. 9. 6.
Share
Related Themes
entry-thumbnail

1단 레이아웃

블로그를 SNS처럼 만든다면? #3 스킨을 통해 티스토리에서 새로운 SNS를 느껴보세요! 홈 화면에서 당신의 취향을 자유롭게 표현할 수 있는 스킨 커버가 여러분을 기다리고 있어요. 디데이를 카운트 다운하여 중요한 순간을 기다리거나 기념할 수도 있고, 최신 글들을 다양한 형태로 출력할 수 있습니다. 이모지로도 당신을 표현할 수 있어 더욱 개성 있는 블로그를 만들 수 있습니다. #3 스킨으로 재미있는 SNS 체험을 시작해보세요!

스킨 수정 가능 | 재배포, 재판매 금지 | 카피라이트 삭제 금지 

 

지원 부분

- 반응형
- [스킨 레이아웃 2종] 1단, 2단
- [홈 커버 10종] : 하이라이트, 공지사항, 태그 클라우드, 디데이, 링크, 피드, 카드, 리뷰, 글목록, 갤러리
- [카테고리별 목록 6종] : 웹진, 심플, 갤러리, 피드, 카드, 메세지
- [공지사항 1종]
- [본문 2종] : 카테고리별 스타일1, 스타일2 🌸
- [본문] : 관련글, 페이징
- [본문] : 인용, 더보기, 링크, 파일 리디자인
- [본문] : 신고 버튼, 공감 버튼, 통계 버튼 리디자인
- 새 글 발행 알림 리디자인 (NEW 아이콘)
- 탑버튼 지원
- 팔로우 버튼, 로그인(아웃) 버튼 리디자인 (2차 도메인 미지원)
- 댓글 | 방명록 신규 치환자 지원 및 리디자인
- 관리자 페이지 바로가기 및 글쓰기 페이지 바로가기 지원 (글쓰기 페이지는 홈 커버 하이라이트에서 지원)

 

스킨 미리보기

• https://aooopoorooioocooot.tistory.com/ (메인)

• https://aooopoorooioocooot.tistory.com/29 (본문)

• https://aooopoorooioocooot.tistory.com/48 (본문2)

 

스킨 구매

• apricot orchard (https://posty.pe/frut93)

 

기술 지원 제공 여부 및 방법 

• ‘스킨의 오류’는 어떤 상황이든 일어날 수 있기에 오류 관련 제보는 항시 받습니다. 

• 오류 제보 : 본 글의 댓글

• 수정 문의 : 본 글의 댓글

 

스킨 저작권 정보

• 제작자 : 살구(#f8b878) 

• 블로그 : https://mellowapricot.tistory.com

• 이메일 : worksapricot@gmail.com

티스토리 특정 글 제목만 색깔 변하게 하기 + 특정 카테고리에 class추가하기

tip
by 살구머거 2023. 8. 19.
Share
Related Themes
entry-thumbnail

| 특정 글만 색깔 넣는 기능 

 

위 사진처럼 특정 글만 색상이 변하게 하는 기능 추가하기 (별 거 없음)

해당 글의 주소만 있으면 됩니다.

 

※ 단, 관리자 화면에서 포스트 주소를 숫자로 설정해 주세요.
| 설정

관리자 화면 > 관리 > 블로그 > 주소 설정 > 포스트 주소를 []로 설정합니다.

 

 

 

1. 카테고리 페이지에서 변경하기

/* a태그 1개 */
<a href="/218" class="list-item">
	<div class="list-info">
		<div class="list-title">
			티스토리 스킨 (4. Grayscale Line Skin) 유료 배포
		</div>
		<div class="list-date">
			2023.08.13
		</div>
		<div class="list-sum">
			스킨 수정 가능 | 재배포, 재판매 금지 | 카피라이트 삭제 금지...
		</div>
	</div>
</a>

이게 대충의 레이아웃인데요 필요한 부분은 a href="/218" 부분입니다. 

 

.list-item[href="/218"] { color:red; }

이런 식으로 a태그에 [href="/218"](글 번호) 속성을 넣어서 color를 지정하면 됩니다.

응용 가능, font-weight, background 등등 

 

/* a태그 여러개 */
<div class="list-info">
	<a href="/218" class="list-title">
		티스토리 스킨 (4. Grayscale Line Skin) 유료 배포
	</a>
	<a class="list-date">
		2023.08.13
	</a>
	<a class="list-sum">
		스킨 수정 가능 | 재배포, 재판매 금지 | 카피라이트 삭제 금지
	</a>
</div>
:where(.list-title, .list-date, .list-sum)[href="/218"] { color:red; }

a태그가 여러 개라면 이런 식으로 작성해 주시면 됩니다.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/:where

 

:where() - CSS: Cascading Style Sheets | MDN

The :where() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.

developer.mozilla.org

 

 

2. 본문 페이지에서 변경하기

<div class="info-item">
	<h1 class="article-title">
		티스토리 스킨 (4. Grayscale Line Skin) 유료 배포
	</h1>
</div>
<script>
const wlp = decodeURI(window.location.pathname);
document.addEventListener("DOMContentLoaded", function() {
	if ( wlp === "/218" ) {
	// 여러개면 wlp === "/218" || wlp === "/219" ,,,
		const articleTitle = document.querySelector(".article-title");
		if ( articleTitle ) {
			articleTitle.classList.add("parti"); 
			//article-title에 "parti" class 추가 생성
		}
	} //f8b878
});
</script>

wlp 부분에는 글 주소를 적어주시면 됩니다.

window.location.pathname은 /부터 문자열이 시작되므로 슬래쉬 꼭 넣어주셔야 함!

.article-title.parti { color:red; }

 

 

 

| 특정 카테고리에 class 추가하기

 

1. 특정 카테고리 페이지에서 body에 class 추가하기

<script>
const wlp = decodeURI(window.location.pathname);
document.addEventListener("DOMContentLoaded", function() {
	const bodyCategory = document.querySelector("#tt-body-category");
	if (bodyCategory && wlp === "/category/카테고리이름") {
		bodyCategory.classList.add("name") //알맞게 변경
	} //f8b878
});
</script>

 

 

2. 본문 페이지에서 자동으로 body에 카테고리class 추가하기

<script>
document.addEventListener("DOMContentLoaded", function() {
	function checkCategory() {
		const bodyPage = document.querySelector("#tt-body-page");
		const categoryElement = document.querySelector(".article-cate a"); //치환자를 포함한 태그명, 알맞게 변경
		if (categoryElement) {
			const category = categoryElement.textContent.trim();
			const categoryParts = category.split("/");
			let categoryName = categoryParts[categoryParts.length - 1];
			if (categoryParts.length === 1) {
				categoryName = categoryParts[0];
			}
			if (bodyPage && categoryName) {
				bodyPage.classList.add(categoryName);
			}
		}
	}
	checkCategory(); //f8b878
});
</script>

 

- 하위 카테고리가 있으면 상위 카테고리는 생략된 채 하위 카테고리가 네임으로 추가됩니다.

ex. https://~.tistory.com/category/wow/jjang => jjang   

 

(응용해서 카테고리별 본문 디자인 다르게 적용 가능함, 목록 구성 - 내용만 보기:인덱스/태그/검색 화면 제외)

 

[☆##_article_rep_category_##] 해당 치환자가 스킨 html 내부에 존재해야 합니다.

(참고) https://tistory.github.io/document-tistory-skin/contents/post.html 

※ 사용 중인 스킨에 없다면 <s_article_rep>을 찾아서 <s_article_rep> 바로 밑에 <div stlye="display:none" class="article-cate"><a>[☆##_article_rep_category_##]</a></div> 추가하면 됨. (☆은 삭제)

 

모든 스크립트를 넣으실 거면
document.addEventListener("DOMContentLoaded", function() { ~ }) 하나의 리스너 안에 밀어 넣고
const wlp = decodeURI(window.location.pathname);은 하나의 전역변수로 설정하세요

 

티스토리 스킨 (4. Grayscale Line) 유료 배포

skin
by 살구머거 2023. 8. 13.
Share
Related Themes
entry-thumbnail

1단, 라인, 흑백, 이미지 흑백
2단, 라인, 흑백, 이미지 흑백
1단, 라운드, 컬러, 이미지 컬러
1단, 라운드, 흑백, 이미지 컬러

Grayscale Line 스킨을 통해 콘텐츠의 느낌을 한층 더 풍부하게 표현할 수 있습니다! 홈 화면에서는 당신의 취향을 자유롭게 표현할 수 있는 스킨 커버를 지원하며, 본문의 너비를 조정해도 매끄러운 출력이 가능하여 여백의 미를 느끼거나 꽉 찬 컨텐츠를 즐길 수 있습니다. 또한 카테고리별로 앨범형 | 목록형 | 웹진형 등 각각의 콘텐츠에 적합한 디자인을 선택할 수 있습니다. 이제 블로그에서 새로운 경험을 즐기세요! 당신이 만들어가는 세상이 더 풍요로워질 거예요. 

스킨 수정 가능 | 재배포, 재판매 금지 | 카피라이트 삭제 금지 

 

지원 부분

- 반응형
- [스킨 레이아웃 2종] : 1단, 2단
- [스킨 테마 2종] : 선형, 라운드형
- [홈 커버 5종] : 공지사항, 태그 클라우드, 앨범형, 웹진형, 라인형
- [카테고리별 목록 5종] : 앨범형 2개, 목록형 2개, 웹진형
- [공지사항 디자인] : 공지형, 메모형
- [본문] : 관련글, 페이징 버튼 
- [본문] : 인용, 더보기, 링크, 파일 리디자인
- [본문] : 신고 버튼, 공감 버튼, 통계 버튼 리디자인
- 새 글 발행 알림 리디자인 (NEW아이콘)
- 탑버튼 지원 (스크롤 메뉴의 프로필 이미지 클릭 시)
- 댓글 | 방명록 신규 치환자 지원 및 리디자인

 

스킨 미리보기

• https://apricotdemo.tistory.com (메인)

• https://apricotdemo.tistory.com/13 (글 양식)

 

스킨 구매

• apricot orchard (https://posty.pe/to5zda)

 

기술 지원 제공 여부 및 방법 

• ‘스킨의 오류’는 어떤 상황이든 일어날 수 있기에 오류 관련 제보는 항시 받습니다. 

• 오류 제보 : 본 글(218번글)의 댓글

• 수정 문의에 대한 답변 여부는 때에 따라 다를 수 있습니다.

 

스킨 저작권 정보

• 제작자 : 살구(#f8b878) 

• 블로그 : https://mellowapricot.tistory.com

• 이메일 : worksapricot@gmail.com

Guestbook.

티스토리툴바