Mellow Apricot
post-img
Read more →
post-img
Read more →
post-img
Read more →
post-img
Read more →
entry-thumbnail

#5 스킨은 콘텐츠의 느낌을 다채롭게 만들어줍니다. 물결 모양의 사이드바는 어떤 콘텐츠에도 잘 어울려, 본문의 감성을 더욱 돋보이게 합니다. 물론 필요하지 않다면 OFF도 가능합니다! 당신의 취향과 스타일을 자유롭게 표현할 수 있는 스킨 커버 기능도 있습니다. 홈 화면에서 특색 있는 디자인으로 개성을 뽐내보세요. 카테고리별로 다양한 레이아웃으로 콘텐츠를 정렬하세요.

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

 

지원 부분

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

 

스킨 미리보기

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

• https://apricottarte.tistory.com/8 (본문)

 

스킨 구매

• apricot orchard (https://posty.pe/2ri0af)

 

기술 지원 제공 여부 및 방법 

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

• 오류 제보 : 본 글의 댓글

• 수정 문의 : 본 글의 댓글

 

스킨 저작권 정보

• 제작자 : 살구(#f8b878) 

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

• 이메일 : worksapricot@gmail.com

entry-thumbnail

제가 배포하는 스킨에 한하는 내용도 포함되어 있습니다.

 

 

1. 카테고리별 목록 지정

관리자 화면 > 콘텐츠 > 카테고리 관리 > 관리 버튼 > 설정 (반영 안 될 시 새로고침하고 다시 설정)

 


2. 카테고리의 다른 글 해제

관련 글 기능이 아닌 이렇게 생긴 카테고리의 다른 글 해제하는 법은,

 

 

관리자 화면 > 플러그인 > 카테고리 글 더보기 > 해제

 


 

3. 커버 기능

관리자 화면 > 스킨 편집 > 홈 설정 > 커버 등록

 

 

  • 공지 커버

    ⓐ 링크 기능 및 이미지 업로드

<a href="링크">내용</a> 작성 및 이미지 업로드 하면 됩니다. 

 

별도 내용 입력 없이 이미지만 업로드 후 저장하면, 사진만 꽉 차게 보여집니다.

 

 

  • 태그 커버

 

  • 태그 커버 개수 & 순서 및 태그 클라우드 순서
    개수 : 관리자 화면 > 꾸미기 > 사이드바 > 태그는 []개 표시되며~
    순서 : 관리자 화면 > 꾸미기 > 스킨 편집 > 홈 설정 > 기본 설정 > 태그 클라우드 순서 > []

 

4 공지사항 링크 추가

 

공지사항 글의 html에서 <a href="링크">타이틀</a> 추가하여 저장 시 자동으로 링크 디자인이 변경됩니다.

 


 

5. 카테고리 새 글 표시 & 글 수 표시 여부

 

관리자 화면 > 콘텐츠 > 카테고리 관리 > 카테고리 설정
[글 수 표시] : 카테고리별 글 수를 []
[NEW아이콘] : 새 글 발행 여부 카테고리에 새 글 발행 여부를 []

 


6. 메뉴바 & 구독 버튼 설정

 

관리자 화면 > 꾸미기 > 메뉴바/구독 설정

 


 

7. 모바일 화면

 

관리자 화면 > 꾸미기 > 모바일 > 티스토리 모바일웹 자동 연결을 []

 

 

 

8. 아이콘 변경 방법

 

※ 리믹스 아이콘의 경우 (스킨2, 3, 4, 5, 6에 해당)

https://remixicon.com/

사이트 접속, 원하는 아이콘 클릭 후

복사

HTML이나 스킨 옵션에 붙여넣기하면 됨, 단 remix 아이콘은 앞에 ri-를 적어줘야 함

arrow-left-up-line → ri-arrow-left-up-line


※ 솔라 아이콘의 경우 (스킨3, 4, 5, 6에 해당)

https://tistory2.daumcdn.net/tistory/2538016/skin/images/solar-sprite.html

사이트 접속 후, 원하는 아이콘 클릭

이름 복사

그대로 html이나 스킨 옵션에 붙여넣기

CSS에 적용 예시

.icon {
width:15px; //원하는 가로값
height:15px; //원하는 세로값
color: #000 //원하는 컬러값
}

remixicon, solaricon 모두 동일.

단 solaricon의 -linear로 끝나는 테두리 아이콘은 stroke-width 미지정시 기본값 1px (일부 아이콘은 stroke-width가 지정되지 않을 수 있음)
.icon {
width: 15px;
height: 15px;
color: #000;
stroke-width: 1.5px;
}

스킨에 color 말고 fill이 포함되어 있을 수도 있는데, 이는 다른 svg를 불러왔을 때를 대비한 코드이니, remix & solar 아이콘 사용 시에는 color값만 변경하면 됩니다. 
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: "구독중";
}
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

Guestbook.