nanabornwhy9 스킨 수정

배포 원문

티스토리 스킨9 (종료)

nanabornwhy 9 (23.04.28 UPDATE) : 포스타입 포스트

＊230428 업데이트 버전 기준　(최종수정 250204)
본인의 편의를 위한 수정사항 백업이며 스킨 파일 자체를 공유하지는 않습니다.

 

 

기본 설정
글 목록 글 수 : 4개 → 30개
기본 목록 스타일 : 갤러리형2 → 갤러리형

 

 

 

메인 색상 변경

 스킨편집  -  html 편집  -  css  - --main-color: #ffbece → #baebf8

 

 

카피라이트 삭제

 

 

리스트 앞 여백 (들여쓰기)

➊  스킨편집  -  html 편집  -  css  - 맨아래에 코드 추가

/* 리스트 여백조절 */
ul[data-ke-list-type='disc'], ul[data-ke-list-type='circle'], ol[data-ke-list-type='decimal'] {
    padding-left: 1.4em !important;}

➋  스킨편집  -  html 편집  -  css  에서

@media (max-width: 600px) {
  .article_content { (두줄)서치 후 첫째줄 중괄호 내에 아래 코드 추가

  /*(수정)리스트 여백조절*/
  ul[data-ke-list-type='disc'], ul[data-ke-list-type='circle'], ol[data-ke-list-type='decimal'] {
    margin: 0 20px !important;}
  li>ul[data-ke-list-type='disc'], li>ul[data-ke-list-type='circle'], li>ol[data-ke-list-type='decimal'] {
    margin-left: 0px !important;}

 

 

반응형) 갤러리형 썸네일 정사각형 비율 유지 및 2열로 표시

➊  스킨편집  -  html 편집  -  css  에서 @media (max-width: 836px) { 서치

　해당 코드(12줄)를 아래로 대치

@media (max-width: 836px) {/* (수정)갤러리형 썸네일 2열 */
  .list.thumbnail-type ol {
    grid-template-columns: repeat(auto-fit, minmax(/*100%, 1fr*/40%, auto));
    gap: 20px;
  }
  .list.thumbnail-type ol li {
    aspect-ratio: /*16 / 9*/1/1;
  }
  .list.thumbnail-type img {
    aspect-ratio: /*16 / 9*/1/1;
  }
}

　※ 주석부분(/* */ 사이) 이 원래 설정값. 주석부분 살리고 나머지 지우면 원래대로 돌릴 수 있음.

➋  스킨편집  -  html 편집  -  css   - .protectThumb { 서치

　aspect-ratio: 16 / 9; → 1/1;

➌  스킨편집  -  html 편집  -  css   -  .thumbnail-type .protectThumb { 서치

　 aspect-ratio: 16 / 9; → 1/1;

 

 

각 카테고리 한 페이지 안넘어가면 1(페이지) 표시 않기

 스킨편집  -  html 편집  -  html  - </body> 바로 위에 아래 코드 추가

<script>
   $( document ).ready(function() {
      if($(".numbox").children().length<2) {
         $(".numbox").attr("style", "display:none;");
      } else {
         $(".numbox").attr("style", "display:block;");
      }
   });
</script>

 

 

갤러리형2) 게시날짜 숨기기 (게시글 제목만 표시하기)

➊  스킨편집  -  html 편집  -  css  에서 .thumbnail-type2 .listDate { 서치

➋ { 뒤에 display: none; 추가

 

 

본문 밖으로 내용 안삐져나가게

➊ 스킨편집 - html 편집 - css 에서 * { 서치

➋ 중괄호 안에 아래 코드 추가

  max-width: 100%;  /*(수정)화면안삐져나가게*/
  height: auto;

 

 

본문 상단 뒤로가기 버튼→메뉴 버튼으로 대체 반응형에서만 바뀌어서 수정해야함..

➊  스킨편집  -  html 편집  -  css  - #tt-body-page .openMenu { 검색

display: none; → flex;

➋  스킨편집  -  html 편집  -  css  - #tt-body-page .prev{ 검색

display: flex; → none;

➌  스킨편집  -  html 편집  -  css  -  .open { 검색

display: block; → block !important;