Skin 10 북클럽 스킨 "포인트 컬러(point-color)" 변경 북클럽 스킨의 "skin.html" 파일의 상단에는 1개의 링크와 2개의 헤더 숫자의 색을 지정하는 CSS 스타일 설정 구문이 있습니다. 1. 글 본문 텍스트 링크(".entry-content a") 2. 글 리스트 제목의 개수(".post-header h2 em") 3. 댓글 제목의 개수(".comments h2 .count") 모두 동일한 색으로 지정하는 것입니다. 위의 이미지에서 사용한 파란색은 "#0150FE"입니다. 북클럽 스킨 skin.html의 색 설정 코드 .entry-content a, .post-header h2 em, .comments h2 .count {color:} .comment-form .submit button:hover, .comment-form .submit button:.. 2022. 8. 30. Flex 컨테이너의 수평 위치 중앙에 배치 flex 컨테이너 스크롤-바를 수평 위치 중앙에 배치하기 위하여 justify-content와 overflow를 동시에 설정할 때 발생하는 호환성 문제를 해결하는 방법입니다. 현재 사용 코드 #header { position: relative; max-width: 1366px; margin: 0 auto; } #gnb { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } ...... #gnb ul { display: -webkit-flex; display: -ms-flexbox; display: flex; flex-wrap: nowrap; .. 2022. 1. 11. Book Club 스킨 NavBar 'current' 표시 형태 수정 $(window).load(function(){ $gnb.find("li").each(function(){ gnbWidth = gnbWidth + $(this).outerWidth() + 1; if ( window.location.pathname.indexOf($(this).find("a").attr("href")) != -1 ){ $(this).addClass("current"); } }); $gnb.find("ul").width(gnbWidth); if ( $gnb.width() < $gnb.find("ul").width() && $gnb.find(".current").length ){ var scrollPos = $gnb.find(".current").prev().length ? $gnb.find(.. 2021. 8. 24. 북클럽 스킨 페이지 검색 버튼 표시 방법 수정 티스토리 북클럽 스킨에서 사용하는 페이지 이동 링크 'pagination'의 이전 'prev'와 다음 'next' 버튼의 보기 형태를 수정하는 코드입니다. - 카테고리의 리스트 페이지들 - 현재 보고 있는 페이지의 이전 혹은 다음 페이지들 - 검색 결과로 제시하는 페이지들의 숫자 모두 '.pagination' 클래스의 하위 클래스인 '.prev'와 '.next'의 구조로 관리합니다. 북클럽 스킨과 오딧세이 스킨의 버튼 표시 모습을 비교하여 설명하고 북클럽 스킨에 필요한 수정 코드를 등록하였습니다. 최근에 제공한 티스토리 오딧세이 스킨의 페이지 이동 버튼의 구현 모습입니다. 현재 1 페이지를 보고 있습니다. 왼쪽 마지막 페이지이기 때문에 이전('prev') 페이지 버튼을 표시하지 않습니다. 현재 19 페이.. 2021. 7. 30. Book Club 스킨 홈 커버 아이템 오류 수정 코드 작성자: openperl@naver.com 블로그: netwaremore, TechWrite, Translation (tistory.com) 2021.08.14 - 더보기 숫자 표시 부분 스크립트 파일 오타 교정 - 수정한 첨부 파일 등록 2021.07.27 - 더보기 버튼에 숨긴 글 숫자 추가 ※ 코드에 오류가 있을 경우 댓글 남겨 주시면 많은 도움이 됩니다. 오류 발생 원인 1. 조건식 오류 if ( $item.length > 4 ){ $item.each(function(){ if ( $(this).index() > 4 ) $(this).hide(); }); $cover.append('more'); $cover.on("click", ".more", function(){ $(this).remove.. 2021. 7. 20. 티스토리 스킨 저장 및 등록 방법 티스토리에서 실행 중인 스킨을 저장하는 방법은? "블로그 관리 홈" → '꾸미기'의 "스킨 변경" → 페이지 오른쪽 '사용 중인 스킨'의 "보관" → '스킨 보관'에 '스킨명' 입력하고 "확인" → "스킨 보관함"을 눌러서 자신이 저장한 스킨 리스트 페이지 → ("스킨 목록"과 "스킨 보관함"은 토글 버튼입니다.) 마우스를 다운로드할 저장된 스킨에 올려서 3가지 옵션 리스트 확인 → "적용", "다운로드", "삭제"에서 "다운로드" 선택 → 나타난 브라우저 팝업창 '다운로드'에서 "다른 이름으로 저장" 선택 → 파일을 저장합니다. 저장된 파일은 ZIP 압축 파일입니다. 현재 티스토리의 사용 중인 스킨의 저장 포맷은 ZIP입니다. 티스토리에 스킨을 등록할 때에는 ZIP과 같은 압축 파일이 아니라 압축을 풀.. 2021. 5. 9. 티스토리 블로그의 웹 폰트 설정 (구글 PSI 속도 측정 결과) 블로그: 티스토리 스킨: 북클럽 ※ 스킨의 종류가 다를 경우 파일의 종류와 구조는 다르지만 설정만 적용 가능합니다. 속도 측정 도구: 구글 PSI (PageSpeed Insights) 편집 대상 파일: "style.css", "skin.html" (CSS와 HTML 파일) 블로그 시작하면서 간간이 속도 측정하면서 설정을 변경하고, 테스트하고 반복하였습니다. 폰트 설정에 관계된 페이지 속도의 등락이 거의 이상 증상으로 받아들일 정도로 괴이한 현상을 보여서 이것을 파악하는 데 대부분의 시간을 보냈습니다. 티스토리 블로거들의 전문적인 글과 구글 페이지 로딩 측정 사이트의 도움말 등을 하나씩 읽어보고 설정에 적용하여 테스트하였습니다. 오늘 변경한 설정이 속도도 안정적이면서 높게 나와서 해결이 된 느낌입니다. 전.. 2021. 4. 15. Tistory 블로그 사이드바에 프로필 정보 창 추가하는 요령 (북클럽 스킨) ※ 20210303 등록 방법의 오류 수정 및 반영 ※ 20210220 "skin.html" 파일에 추가하는 코드 수정 티스토리에서 2020년에 제공한 공식 스킨 "Odyssey"에는 사이드바에 블로그의 정보를 전달하는 작은 창을 달 수 있습니다. skin.html을 검색하면 'box-profile'이라는 'class'를 사용합니다. 프로필 정보 창 이미지입니다. 사이드바의 상단입니다. 알기 쉽게 파란색 박스로 블록 처리하였습니다. Odyssey 스킨을 사용한 문화재청의 블로그를 샘플로 전시하여 사용자에게 정확한 스킨 디자인 포인트를 알려 주고 있습니다. 이 프로필 창을 "Book Club" 스킨에 적용하는 요령을 설명하겠습니다. 다른 스킨 사용자는 코드를 자신이 사용하는 스킨에 맞게 수정을 해야 할 것.. 2020. 12. 27. 티스토리 script.js GNB 오류 수정 ※ 2020.11.27: 블로그 반영 ※ 2024.03.26: 아래 링크한 알릭2님의 블로그에 원본 소스를 수정하는 자세한 이유와 설명이 기재되어 있습니다. 북클럽 스킨 - GNB 메뉴 현위치 버그 (tistory.com) 원본 (오류) $(window).load(function(){ $gnb.find("li").each(function(){ gnbWidth = gnbWidth + $(this).outerWidth() + 1; if ( window.location.pathname.indexOf($(this).find("a").attr("href")) != -1 ){ $(this).addClass("current"); } }); $gnb.find("ul").width(gnbWidth); if ( $gnb... 2020. 11. 18. 티스토리 북클럽 스킨의 포스트 커버 하단 여유 공간 축소 수정: 2020.08.16, 내용 자체에 오류가 많아서 다시 작성했습니다. 티스토리에서 제공하는 무료 스킨 "북클럽(Book Club)"을 사용하고 있습니다. 이 스킨에는 본문 페이지에 첨부된 이미지를 상단에 재배치하여 시각적인 효과를 주는 'post-cover' 영역이 존재합니다. 기본 높이가 340px이며, 영역 내부 하단에 약간의 여유 공간을 제공합니다. 아래 이미지는 모바일(767px 이하)의 post-cover입니다. [출처] 북클럽 데모 페이지 시각적으로는 보기 좋지만 내용이 중복되고 많은 공간을 차지하니까 많은 블로거가 이 영역의 높이를 줄여서 사용합니다. 이 높이를 수정해서 사용하다 보면 포스트 커버의 텍스트가 영역의 지정된 높이를 초과하여 하단의 다른 영역을 침범하여 가리는 오류가 발생합.. 2020. 5. 8.
