#f8b878mellowapricot.tistory.com
random-image
data

불펌하지 마세요. 인스티즈 사이트 특히요


기존 티스토리 측에서 지원하던 날짜 치환자는 [##_article_rep_date_##] 이 치환자 하나 뿐이었지만, 연도, 월, 일, 시 ,분, 초까지 하나씩 나타내는 새로운 치환자가 생겼다.


1 : 글에서 보여지는 날짜

https://tistory.github.io/document-tistory-skin/list/list.html

 [##_article_rep_date_##]

 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)

 [##_article_rep_simple_date_##]

 글 발행 날짜 (yyyy.mm.dd)

 [##_article_rep_date_year_##]

 글쓴 세부시간 - 연도 (yyyy)

 [##_article_rep_date_month_##]

 글쓴 세부시간 - 월 (mm)

 [##_article_rep_date_day_##]

 글쓴 세부시간 - 일 (dd)

 [##_article_rep_date_hour_##]

 글쓴 세부시간 - 시 (HH)

 [##_article_rep_date_minute_##]

 글쓴 세부시간 - 분 (MM)

 [##_article_rep_date_second_##]

 글쓴 세부시간 - 초 (SS)


아래처럼 출력 방식을 변경할 수 있다.


(1) 기존 치환자

<div class="date">[##_article_rep_date_##]</div> 

= 2019.06.29 12:00


(2) 새로운 치환자를 이용한 배열

<div class="date">[##_article_rep_date_month_##]/[##_article_rep_date_day_##]</div>

=06/29


(3) 새로운 치환자를 이용한 배열 

<div class="date">[##_article_rep_date_month_##]월 [##_article_rep_date_day_##]일 [##_article_rep_date_hour_##][##_article_rep_date_minute_##]분</div>

=06월29일 12시00분


다만 연도가 기본 yyyy형태(2019)라서 4자리 형식으로 출력된다. yy형태(19)로 출력하려면 또 스크립트를 써야 함..ㅎㅎ 또 월을 영어나 한글 등으로 표시하려면 역시 스크립트를 써야 함..




2 : 리스트에서 보여지는 발행 날짜

https://tistory.github.io/document-tistory-skin/list/list.html

 [##_list_rep_date_##]

 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)

 [##_list_rep_simple_date_##]

 글 발행 날짜 (yyyy.mm.dd)

 [##_list_rep_date_year_##]

 글쓴 세부시간 - 연도 (yyyy)

 [##_list_rep_date_month_##]

 글쓴 세부시간 - 월 (mm)

 [##_list_rep_date_day_##]

 글쓴 세부시간 - 일 (dd)

 [##_list_rep_date_hour_##]

 글쓴 세부시간 - 시 (HH)

 [##_list_rep_date_minute_##]

 글쓴 세부시간 - 분 (MM)

 [##_list_rep_date_second_##]

 글쓴 세부시간 - 초 (SS)


방식은 위와 동일



3 : 공지사항에서 보여지는 발행 날짜

https://tistory.github.io/document-tistory-skin/contents/notice.html

 [##_notice_rep_date_##]

 글 발행 날짜/시간 (yyyy.mm.dd HH:MM)

 [##_notice_rep_simple_date_##]

 글 발행 날짜 (yyyy.mm.dd)

 [##_notice_rep_date_year_##]

 글쓴 세부시간 - 연도 (yyyy)

 [##_notice_rep_date_month_##]

 글쓴 세부시간 - 월 (mm)

 [##_notice_rep_date_day_##]

 글쓴 세부시간 - 일 (dd)

 [##_notice_rep_date_hour_##]

 글쓴 세부시간 - 시 (HH)

 [##_notice_rep_date_minute_##]

 글쓴 세부시간 - 분 (MM)

 [##_notice_rep_date_second_##]

 글쓴 세부시간 - 초 (SS)


방식은 위와 동일



아직 댓글과 방명록에서는 지원하지 않고 요일 표시도 지원하지 않는다.

https://tistory.github.io/document-tistory-skin/list/list.html


새로운 치환자들이 추가되었는데 퍼머링크/인덱스 시스템을 쓰는 게 아니라 또 <s_list>를 쓰는 거라 중구난방인지 뭔지... 어쨌든 관리하기 편하게 되어서 좋지만 티스토리답게 조만간 저 치환자들 또 바뀔 거라 예상한다.

질문은 받지 않습니다. 타 사이트 강좌로 올리지 마세요




본래 티스토리에 댓글/방명록 비밀글 작성 시에 블로그 주인, 비밀글 작성자가 아닌 타 사용자에게는

위와 같이 비밀글로 등록한 사용자의 이름이 보이지 않는 형태인데,




css만 넣는다면 위와 같이 타 사용자에게 특정 문구가 보이도록 설정할 수 있다.

자바스크립트로도 설정이 가능하지만 여기서는 css로만 설명함




<span class="guest_name"> <span class="guest_from">From:</span> <span class="name">[##_guest_rep_name_##]</span> guest@ <span class="gname"></span> </span>

(1) 사진에 나와있는 HTML 구조

본인 스킨의 html 구조만 파악하면 된다

치환자를 감싸는 <span class="name">[##_guest_rep_name_##]</span> 이부분이 필요함



(2) 비밀글로 출력 시 치환자를 인식하지 않음

비밀글에는 [##_guest_rep_name_##] 치환자를 인식하지 않아 

위와 같이 <span class="name"></span> 내용이 비어있도록 출력이 된다.



.guest_name .name:empty:before { content:"SECRET"; }

△ 적용할 CSS

따라서 비어 있는 것을 인식하는 선택자인 :empty와 함께, 요소의 앞에 내용을 추가하는 가상 선택자 :before를 넣어 문구를 작성한다.





비밀글을 인식하는 class인 hiddenComment만을 이용하여 css를 편집했을 때,

비밀글이라는 조건이 있다면 작성자, 블로그 주인, 타 사용자 모두에게 적용되는 class이므로

작성자나 주인에게도 닉네임 옆에 설정한 문구가 함께 뜬다.




해당 방법으로 css를 편집했을 때,

작성자의 닉네임칸이 비어있는 지, 비어있지 않은 지를 확인하기 때문에

타 사용자에게만 문구가 노출 되고 작성자, 주인에게는 본래 닉네임만 출력된다.


현재 블로그 이전부터 많은 분들께서 이용해주신 스킨이었지만 너무 오래 전 만들었고,

제 스킨을 간단하게 즐기기에는 티스토리에도 많은 변화가 있었기에 배포를 중단합니다.

더이상 업데이트도 이루어지지 않습니다.


기존 스킨은 어느 곳에서든 재배포 금지합니다.



또한 배포 (1) 스킨에서 갑자기 댓글 창 펼쳐지는 것이 안되고, 스크립트가 막혔다면

html에서

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

이 제이쿼리를 찾아 삭제 후

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

이걸로 적용하시면 됩니다. 


정확한 이유는 모르겠지만 서버 스크립트와 충돌이 있는 듯 합니다.



추후 언제가 될 지는 모르겠지만 새로운 스킨으로 만나요....(배포 미정)

기존 티스토리 치환자에서는 <s_rp_count> 치환자 없이 [##_article_rep_rp_cnt_##] 만 존재해도 댓글이 정상적으로 출력되었으나, 티스토리 업데이트 과정에서 <s_rp_count> 치환자가 없으면 댓글이 정상적으로 출력되지 않는 현상이 발견되었습니다.


간단하게 html에서 

<s_rp_count>[##_article_rep_rp_cnt_##]</s_rp_count>로 바꿔주면 해결됩니다.


현재 배포하는 파일은 수정된 파일이오니 적용하지 않으셔도 됩니다. (19.03.21 이후 다운로드자)



예시


배포 스킨 (1)


배포 스킨 (2)










변경 전 

변경 후 정상 출력


  1. rp_img
    익명 2019.04.04 16:28 답글수정 삭제
    비밀댓글입니다

미리 알림 : 티스토리 개편으로 인해 스크립트를 사용하지 않아도 카테고리별 디자인을 선택 사용할 수 있습니다. 현재 글은 스크립트로 변경하는 법을 나타냈습니다.

https://tistory.github.io/document-tistory-skin/list/list.html



소스 수정에 관한 질문은 일절 받지 않습니다. (특히 커스텀 문의)

적용 전 백업을 꼭 해주세요. 응용은 셀프입니다.

타 사이트에 이글 재업하지 마세요.


티스토리 치환자를 이용한 가이드며, 티스토리 측에서는 유튜브 썸네일 등을 지원하지 않습니다.


티스토리 스킨이 인덱스페이지<s_index_article_rep>와 퍼머링크페이지<s_permalink_article_rep>가 있다는 가정 하에 쓴 가이드입니다.

<s_list>와 <s_index_article_rep>이 둘다 있는 스킨이면 <s_list>부분을 제외하고 <s_index_article_rep>부분만 바꿔주면 될 것이고 <s_list>만 있는 스킨은 가이드 중간 더보기란 참고


예시


△ 목록형일 때

△ 갤러리형일 때



1. 사용 중이던 기존 html의 <s_article_rep> ~ </s_article_rep> 안의 <s_index_article_rep> ~ </s_index_article_rep> 부분을 지우고 해당 자리에 하단 html소스를 복사-붙여넣기한다.

<s_index_article_rep> <div class="list_content"> <a href="[##_article_rep_link_##]" class="link_post"> <s_article_rep_thumbnail> <img src="[##_article_rep_thumbnail_url_##]" class="thumbnail_img"> </s_article_rep_thumbnail> <div class="list_info"> <div class="list_title">[##_article_rep_title_##]</div> <div class="list_date">[##_article_rep_date_##]</div> </div> </a> </div><!-- /list content --> </s_index_article_rep>


1-2. (비밀글 썸네일) html의 <s_article_protected> ~ </s_article_protected> 안의 <s_index_article_rep> ~ </s_index_article_rep> 부분을 지우고 해당 자리에 하단 html소스를 복사-붙여넣기한다.

<s_index_article_rep> <div class="list_content"> <a href="[##_article_rep_link_##]" class="link_post"> <s_article_rep_thumbnail> <img src="./images/secret_thumb.jpg" class="thumbnail_img"> <!-- 파일 업로드에 비밀글 시 뜰 이미지 업로드 --> </s_article_rep_thumbnail> <div class="list_info"> <div class="list_title">[##_article_rep_title_##]</div> <div class="list_date">[##_article_rep_date_##]</div> </div> </a> </div><!-- /list content --> </s_index_article_rep>





2. html의 </body> 바로 위에 해당 스크립트를 추가한다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> // apricot list-gallery script $(document).ready(function (){ var w_l_p = window.location.pathname; if ( w_l_p == "/category/갤러리형설정할카테고리명1" || w_l_p == "/category/갤러리형설정할카테고리명2" /* ex) 한개일 때 > w_l_p == "/category/diary" 여러개일 때 > w_l_p == "/category/music" || w_l_p == "/category/gallery" || w_l_p == "/category/cheese" */ ){ $("body").addClass("gallery"); //body에 gallery라는 class 추가 <body class="gallery"> }; }); </script>



3. css 하단에 해당 소스를 추가한다.

/* 목록형, 갤러리형 변경 */ // apricot list+gallery css .list_content { } .list_info { border-bottom:1px solid #ddd; padding:6px 0; } .list_title { font-weight:bold; } .thumbnail_img { display:none; } .gallery .list_content { float:left; position:relative; width:33.3%; } /* 썸네일 가로길이 변경하려면 width 값 조절 */ .gallery .list_content:before { content:""; display:block; padding-top:100%; } /* 썸네일 가로세로 비율 변경하려면 padding-top값 0~100% 사이에서 조절, padding-top:100% = 1:1 */ .gallery .thumbnail_img { display:block; position:absolute; width:100%; height:100%; top:0; right:0; bottom:0; left:0; } .gallery .list_title { display:none; } .gallery .list_date { display:none; }

* 스크립트로 특정 카테고리에 gallery라는 class명을 추가함으로써, css 선택자 앞에 부모 선택자 .gallery를 붙혀주면 갤러리형 목록에서만 적용되는 css값이 생긴다.

* %단위를 사용하므로 반응형 적용 가능

이전 블로그에 올려두었던 팁은 옛날 소스 기준이라 새로 업데이트 했습니다.

혹시 모를 오류가 있을 수 있으니 적용 전 백업은 필수입니다.

기타 다른 문의는 받지 않습니다. (특히 커스텀 문의)


다른 사이트 강좌로 올리지 마세요


신고버튼 디자인 변경으로 인한 불이익은 제가 책임지지 않습니다.

이러한 방법은 티스토리 측에서 치환자를 제공하기 전까지만 사용하시기를 권장드립니다.

<이 글은 신고 버튼 삭제하는 법이 아닌 디자인을 바꾸는 법을 안내하는 것임을 알려드립니다. 

신고 버튼을 노출하지 않을 시 티스토리 이용에 제한이 있을 수 있습니다.>


안녕하세요. TISTORY입니다.

신고 기능 제공은 법률에 따른 의무 사항이어서 플러그인 등으로 선택 노출할 수 있도록 지원하기는 어렵습니다. 

신고 기능 제공은 법률에 따른 의무 사항이어서 사용자가 임의로 노출을 제한할 경우 문제가 될 수 있습니다. 

치환자 제공 등을 검토 중이나, 신고 기능은 법적 의무 사항으로 늘 노출하는 게 원칙이라서 다각도로 고려 중입니다. 이점 양해 부탁드립니다.

http://notice.tistory.com/2328 티스토리 측 댓글 발췌



(1) 현재 티스토리 신고버튼 html

여기서 취해야 할 것은 17번째 줄 UrlID 부분이다.

신고버튼 html에서는 각 글의 고유 id가 저장되어 있음

(location 속성을 이용해서 따와도 되겠지만 그냥 html에서 추출하는 걸로..)



(2) 티스토리 글 url

해당 숫자가 해당 블로그의 고유 글 url id다. 글을 작성하는 순서대로 부여됨



http://티스토리주소.tistory.com/toolbar/popup/abuseReport/?entryId=글 url id

(3) 현재 신고하기 버튼의 주소

글 id에 따라서 어떤 글을 신고할 것인지 결정된다.


(2)티스토리 글url에 따르면 (3)신고하기 버튼의 글id값은 112가 되는 것임

ex) http://mellowapricot.tistory.com/toolbar/popup/abuseReport/?entryId=112


티스토리가 제공하는 기본 신고 버튼을 누른다면,

(2)티스토리 글url과 (3)신고하기 버튼에 부여되어 있는 글id가 자동으로 일치되어 있기 때문에 

112번째로 작성한 해당 글을 신고하게 해준다.





본 글에서는 못생긴 신고 버튼의 html(<div class="container_postbtn">~</div>)을 전부 날려버릴 것이므로 

꼭, id의 값을 저장해두어야 한다.


(저장해두어야 신고 버튼 주소가 글 id 주소와 일치함.

값을 저장시키지 않고 display:none과 함께 신고버튼의 주소만 임의로 바꾸는 경우에는 

1번 글의 신고버튼을 눌러도 2번 글의 신고 창이 뜸)


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> //apricot abuse script $(".container_postbtn").each(function () { var postbtnID = $(this).find("label[data-entry-id]").attr("data-entry-id"); // data-entry-id라는 속성 이름을 가진 label을 찾아 해당 data-entry-id 값(글id)을 저장 $(this).html("<div class='a_report'><a href='/toolbar/popup/abuseReport/?entryId=" + postbtnID + "' onclick='window.open(this.href, \"tistoryThisBlogPopup\", \"width=500, height=300, toolbar=no, menubar=no, status=no, scrollbars=no\"); return false;' target='_blank'>신고</a></div>"); // container_postbtn의 html을 초기화하고 <div class="a_report">~</div>를 안에 추가 $(this).removeClass("container_postbtn").addClass("a_postbtn") // container_postbtn에 대한 티스토리 기본 css값이 있으므로 해당 class명을 a_postbtn으로 변경 }); </script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> //apricot abuse script $(".container_postbtn").each(function () { var postbtnID = $(this).find("wrap_btn_etc").attr("data-entry-id"); $(this).html("<div class='a_report'><a href='/toolbar/popup/abuseReport/?entryId=" + postbtnID + "' onclick='window.open(this.href, \"tistoryThisBlogPopup\", \"width=500, height=300, toolbar=no, menubar=no, status=no, scrollbars=no\"); return false;' target='_blank'>신고</a></div>"); // container_postbtn의 html을 초기화하고 <div class="a_report">~</div>를 안에 추가 $(this).removeClass("container_postbtn").addClass("a_postbtn") // container_postbtn에 대한 티스토리 기본 css값이 있으므로 해당 class명을 a_postbtn으로 변경 }); </script>

△ 적용 스크립트 

html의 </body> 바로 위에 넣어주면 좋다.


1. 스크립트의 html 안에(6번째줄) 신고라는 글자 말고 fontawesome, xeicon등 웹아이콘을 넣어서 꾸며도 무방

2. css로 꾸밀 시에는 .a_postbtn { }, .a_report { } 등의 값을 넣어주면 된다



20.02.19 이전에 수정하신 분들은 

간단히

var postbtnID = $(this).find("label[data-entry-id]").attr("data-entry-id");를

Var postbtnID = $(this).find(".wrap_btn_etc").attr("data-entry-id");로 바꿔주면 된다

apricotslide.zip


수정 자유롭게 가능 ㅣ 재배포 불가능 ㅣ 카피라이트 삭제 절대 금지

> LINK 버튼 누르면 나오는 창의 카피라이터는 완전히 제거 가능합니다

> html 하단의 <div class="copyright">~</div>는 제거 불가능합니다


다운로드시 기본적으로는 프로필사진 / ♥ / ARCHIVE / LINK 버튼을 누를 때 슬라이드가 활성화 됩니다.


스킨안내

색상코드 #000000 <포인트색은 #000000. 그 외 기본 검정색은 #000으로 구분했습니다.>

브라우저 익스플로러11 엣지 크롬 파이어폭스

사용방법 압축을 풀어 images 폴더에 담긴 것까지 모두 업로드해주세요.

모바일웹 블로그관리창 [꾸미기]탭의 [모바일]에서 모바일웹 자동연결 "사용하지 않습니다"로 설정해주세요.

사진변경 프로필 사진을 변경하시려면 블로그관리창 [관리]탭의 [블로그]에서 이미지를 변경해주세요.


스킨 수정 안내

티스토리 업데이트에 대하여 다운로더의 스킨을 1:1 수정하는 것은 불가능하여 스크립트를 간소화하였습니다.

ex) 날짜 표시 형식 변경, 신고 버튼 의무화, 글 주소 형식

해당 사항을 변경하고 싶다면 검색을 통하여 직접 수정 부탁드립니다. 














기타 질문은 댓글로 부탁드립니다.

질문 전 중복 질문에 대한 답변 확인 해주세요,


스킨 변경 내역은 스킨 수정 안내에서 확인 부탁드립니다.


다운로드

예제페이지

  1. 이전 댓글 더보기
  2. rp_img
    익명 2020.08.09 02:33 답글수정 삭제
    비밀댓글입니다
    • rp_img
      ..m 2020.09.03 22:22 신고 수정 삭제
      스킨 자체 코딩이 그렇게 되어있구요,
      수정하시려면 이전 댓글 참고해주세요~
  3. rp_img
    익명 2020.09.09 00:45 답글수정 삭제
    비밀댓글입니다
    • rp_img
      ..m 2020.09.13 04:44 신고 수정 삭제
      해결하셔서 다행이에요... 예쁘게 써주셔서 감사합니다. 좋은 하루 보내세요!
  4. rp_img
    익명 2020.09.11 10:52 답글수정 삭제
    비밀댓글입니다
    • rp_img
      ..m 2020.09.13 04:48 신고 수정 삭제
      제가 질문이 잘 이해가 안돼서요, 스크롤을 항상 표시하고 싶으시단 말씀이신가요?

      스크롤이 얇아서 아마 포커스 잡기가 힘드신 부분일텐데
      css에서
      /* 스크롤바 */
      ::-webkit-scrollbar { width:2px; }
      이부분 넓이를 조정해보심 될 거예요~

      혹시 이 질문이 아니라면 다시 설명 부탁드리겠습니다~ 좋은 하루 보내세요!
  5. rp_img
    피씨에서는 프로필 사진과 그라데이션 테두리가 보이는데 모바일에서는 안 보이는 것 같아요 ㅜㅜ
  6. rp_img
    안녕하세요, 살구님! 멋진 스킨을 공유해주셔서 감사합니다. 혹시 질문 하나 해도 괜찮을까요? 제가 해당 스킨을 사용하고 있는데, 댓글+0 을 눌러도 댓글창이 열리거나 닫히지 않더라고요. 원래 없는 기능인가요? 아니면 오류인가요? 혹시 오류라면 어떻게 수정하면 되는지 알려주실 수 있으신가요?
  7. rp_img
    익명 2020.11.08 02:46 답글수정 삭제
    비밀댓글입니다
  8. rp_img
    익명 2020.12.01 01:35 답글수정 삭제
    비밀댓글입니다
  9. rp_img
    익명 2020.12.28 17:41 답글수정 삭제
    비밀댓글입니다
  10. rp_img
    익명 2021.02.19 00:11 답글수정 삭제
    비밀댓글입니다
  11. rp_img
    살구님 혹시 검색창을 더블클릭하면 나오는 amusementpark ... 등을 수정하려면 어떻게 해야 되나요? ㅜㅜ 생초보인데 이걸 뭐라고 부르는지조차도 몰라 구글링을 못하고 있습니다 ㅜㅅㅜ 도와주세요
  12. rp_img
    익명 2021.04.14 19:14 답글수정 삭제
    비밀댓글입니다
  13. rp_img
    익명 2021.05.28 10:07 답글수정 삭제
    비밀댓글입니다
  14. rp_img
    익명 2021.05.30 22:12 답글수정 삭제
    비밀댓글입니다
  15. rp_img
    살구님 안녕하세요! 카테고리 수정을 하는데 하위 카테고리를 표시하는 - (하이픈) 표시와 카테고리 제목 사이에 엔터가 쳐진건 어떻게 해결해야 할까요? 같은 방식의 다른 하위카테고리는 잘 작동하던데 ㅠㅠ
  16. rp_img
    익명 2021.12.23 14:36 답글수정 삭제
    비밀댓글입니다
  17. rp_img
    익명 2022.01.12 19:11 답글수정 삭제
    다운로드가 되지 않는데 확인해주실 수 았나요...‽
  18. rp_img
    익명 2022.02.17 03:57 답글수정 삭제
    비밀댓글입니다
  19. rp_img
    익명 2022.04.08 10:18 답글수정 삭제
    비밀댓글입니다
  20. rp_img
    익명 2022.04.08 10:26 답글수정 삭제
    비밀댓글입니다
  21. rp_img
    다운로드가 되지 않는데 확인해주실 수 있으실까요? ㅜㅜ
Background vector created by freepik - www.freepik.com