BOOKCLUB 7 북클럽 스킨 "포인트 컬러(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. 티스토리 블로그의 웹 폰트 설정 (구글 PSI 속도 측정 결과) 블로그: 티스토리 스킨: 북클럽 ※ 스킨의 종류가 다를 경우 파일의 종류와 구조는 다르지만 설정만 적용 가능합니다. 속도 측정 도구: 구글 PSI (PageSpeed Insights) 편집 대상 파일: "style.css", "skin.html" (CSS와 HTML 파일) 블로그 시작하면서 간간이 속도 측정하면서 설정을 변경하고, 테스트하고 반복하였습니다. 폰트 설정에 관계된 페이지 속도의 등락이 거의 이상 증상으로 받아들일 정도로 괴이한 현상을 보여서 이것을 파악하는 데 대부분의 시간을 보냈습니다. 티스토리 블로거들의 전문적인 글과 구글 페이지 로딩 측정 사이트의 도움말 등을 하나씩 읽어보고 설정에 적용하여 테스트하였습니다. 오늘 변경한 설정이 속도도 안정적이면서 높게 나와서 해결이 된 느낌입니다. 전.. 2021. 4. 15. 티스토리 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.
