수정 21 티스토리 스킨의 네임카드 CSS 코드 수정 티스토리 블로그의 글 페이지의 댓글 입력 칸 위에 위치하는 네임카드 이미지입니다.※ 이미 아래의 수정 코드를 반영한 이미지를 캡처한 것입니다.)※ 주황색 선은 정확한 테두리 범위를 보여 주기 위하여 색칠한 것입니다. 티스토리 본사에서 삽입한 코드를 그대로 두면 로그인 전과 후의 이미지 하단 여백이 지나치게 넓게 차지하여 보기에 좋지 않습니다. 현재 상태를 유지하려면 할 필요가 없고, 눈에 거슬리면 본사에서 수정할 때까지 아래 코드를 임시로 적용해도 됩니다."style.css" 파일의 적당한 위치에 끼워 넣습니다. PC와 모바일에 모두 적용해야 하니까, PC 관련 코드가 끝나는 부분에 넣으면 될 것입니다.북클럽 스킨의 경우 "/* ETC */"나 "/* Overwrite */".. 2024. 4. 25. 티스토리 카테고리의 새로운 글 아이콘 변경하는 방법 티스토리에 (댓글 아니고) 새로운 글을 등록하면 카테고리에 글이 등록되었다는 "N"자 아이콘이 새롭게 표시됩니다. 위 이미지를 기준으로 하여, 전체 글("글 모음"), 메인 카테고리("IT"), 서브 카테고리("티스토리") 3군데 아이콘이 나타납니다. 만약에 메인 카테고리만 사용한다면 2군데 표시가 되겠죠. 자신이 원하는 다른 이미지가 표시되도록 변경하는 방법 설명합니다. 1. 사용할 아이콘을 업로드합니다. 티스토리에서는 업로드한 이미지는 자동으로 "images" 폴더로 이동합니다. 2. style.css에 필요한 코드를 추가하고 업로드합니다. 사용하는 코드는 아래와 같습니다. 개인 사용 환경에 맞게 수정하면 됩니다. /* style.css에 추가하는 코드 */ #category li a img { bo.. 2023. 3. 16. 북클럽 스킨 "관련글(related-articles)" flex box로 변경 등록한 글의 하단에 배치되어 현재 글과 관련 있는 글들을 보여 주는 메뉴입니다. PC 화면에서는 가로로 4개, 모바일 화면에서는 가로 2개씩 2줄로 역시 4개의 글 링크가 있습니다. 그대로 사용해도 괜찮은 기능입니다. 단지 자신이 원하는 형태로 수정하려면 거의 불가능할 정도로 코드가 복잡합니다. CPU 연산을 필요로 하는 CSS 코드로 짜여 있습니다. width: 101.621621621621622%; margin-left: -1.621621621621622%; padding-left: 1.621621621621622%; padding-bottom: 68.181818181818182%; width: 103.571428571428571%; margin-left: -3.571428571428571%; pad.. 2022. 6. 12. 북클럽 스킨 팝업창 최근 댓글 링크 관련 오류 정정 Book Club (tistory.com) 김영사 콘텐츠로 제작한 티스토리 북클럽 스킨 데모 페이지입니다. 북클럽 스킨은 모바일 화면에서 팝업 윈도를 띄웁니다. 화면이 작기 때문에 PC 화면의 사이드바(aside)를 모바일 화면의 팝업창으로 이동한 형태입니다. 모바일 기기에서 왼쪽과 같은 메뉴 버튼을 누르면 본문 위에 팝업 윈도가 뜨면서 사이드바의 내용을 나열하게 됩니다. 팝업창의 댓글 리스트에서 하나의 링크를 마우스로 클릭하면, 1. 해당 페이지를 웹브라우저의 메인 창에 펼치고 2. 클릭한 댓글의 위치로 화면이 이동합니다. https://skin-demo-0053.tistory.com/27#comment17308450 페이지 주소 + 글 번호(27) + 댓글 번호(#comment17308450) 댓글 .. 2022. 5. 26. 티스토리 Odyssey 스킨의 "관련 사이트" 메뉴 오류 수정 Odyssey는 가장 최근에 티스토리에서 배포한 스킨입니다. 데모 사이트는 명칭이 문화재청으로 등록되어 있습니다. https://skin-demo-5zif0.tistory.com/ 이곳에 들어가면 티스토리에서 데모 사이트로 제공하는 스킨의 특징을 점검할 수 있습니다. 블로그 관리 홈으로 들어가면 "나의 링크" 메뉴가 있습니다. 자주 찾는 사이트를 추가하면 드롭 다운 메뉴로 페이지 오른쪽 하단에 "관련사이트"에 등록된 것이 보입니다. 겉 보기에는 멀쩡하지만 X 버튼을 눌러서 리스트를 접어도 그 위치를 마우스로 클릭하면 해당 링크로 연결되는 오류를 발견할 수 있습니다. 위의 이미지를 예로 설명하면, 일단 관련 사이트 메뉴를 접고 현재 보이지 않는 "티스토리"와 "다음"의 위치를 마우스로 찍으면 링크가 살아 .. 2022. 4. 30. 북클럽 스킨 main-slider 설정 변경 홈페이지를 제외한 사용자 지정 특정 페이지에만 main-slider를 실행시켜 블로그 첫페이지 로딩 속도뿐만 아니라 PageSpeed Insights의 측정 점수도 높이는 방법입니다. 북클럽 스킨 main-slider 위치에 따른 구글 PageSpeed Insights 점수 변동 1. 블로그 첫 페이지에 main-slider 배치 ※ 북클럽 스킨의 기본 값은 main-slider를 첫 페이지에서만 보여 줍니다. #tt-body-index .main-slider { display: block; } 2. 카테고리 페이지에 main-slider 배치 ※ 하나의 블로그에는 일반적으로 여러 페이지의 카테고리가 존재합니다. 그 페이지들에 모두 main-slider를 보여 주는 것입니다. 첫 페이지 하나에만 main.. 2022. 4. 29. 티스토리 북클럽 스킨의 홈프로모션 슬라이더 실행 구문 단순화 티스토리 스킨 "BookClub" skin.html main-slider 실행 조건 수정 원본 코드를 수정하게 되면, - 일부 구간에서 실행 조건이 2개에서 1개로 줄어듭니다. - 사진 전체의 URL 링크에서 "바로가기" 버튼에 한정된 링크로 변경됩니다. - 불필요한 코드를 삭제했으므로 skin.html 파일의 크기도 약간 줄어듭니다. ※ 슬라이더 관련 코드 원본 91행에서 수정 58행으로 축소 - 초기 페이지 로딩 속도가 아주 조~금 빨라질 것입니다. skin.html 원본의 조건문 구조 ...... promotion-1-url이 있으면 inner 컨테이너 만들고 박스 만들고 promotion-1-text가 있으면 등록하고 promotion-1-color가 있으면 등록하고 바로가기 버튼 등록 promo.. 2022. 4. 11. GNB navigation 코드 수정 코드를 머리로 짜는 것이 아니라 필요한 코드를 인터넷 검색하여 수정 작업을 진행하고 있습니다. 모르니까! 티스토리의 블로거들이 북클럽 스킨의 내비게이션 메뉴 GNB의 코드를 별다르게 유용한 목적으로 사용하지 않는 듯하여 새로운 기능을 추가하여 본래의 기능을 개선하고 있습니다. 이 페이지는 새로 만든 코드를 분실하면 처음부터 맨발로 다시 만들어야 하므로 그 변경 과정을 기록하는 것입니다. ※ 아무것도 모르는 상태에서 코드를 발로 작성하기 때문에 티스토리 블로그 서버에 악영향을 미칠 수도 있습니다. 클라이언트 처리 코드이므로 괜찮을 수도 있겠네요. 그래도 계속해서 개선해 나가야 합니다. 잘못된 코드 발견하시면 조언 부탁드립니다. 1. GNB NavBar의 현재 페이지 표시 코드 수정 // script.js .. 2022. 4. 6. 티스토리 블로그 글의 HTML 태그 입력 방법 이 블로그에 200개 가까이 글을 등록하면서 모든 글의 "태그"를 잘못 입력하여 그것 수정하느라 3일 동안 단순 노동에 시달렸습니다. 혼자만 알고 있기에는 아까워서, 흔적도 남기고 다른 블로거들은 그처럼 어처구니없는 실수를 저지르지 말라고 태그 입력하는 정확한 방법을 설명합니다. 티스토리 블로그에서 태그를 접하는 위치는 3군데입니다. 태그 접근 위치 1. 블로그 글의 "카테고리의 다른 글"과 "댓글" 사이 2. 사이드바의 "태그" 정보 블로그 관리자의 설정에 따라 감출 수도 있고 위치 변경이 가능합니다. "관리", "블로그 관리 홈", "사이드바" 순서로 접근하여 설정할 수 있습니다. 3. 블로그의 원하는 위치에 "태그" 정보를 담은 페이지로 안내하는 링크를 붙일 수 있습니다. 아래 "태그" 버튼은 블로.. 2022. 1. 15. 북클럽 스킨 커버 아이템 추가 및 오류 수정 / 커버 갤러리2 북클럽 스킨 "커버 갤러리2" 아이템의 오류 수정 방법 - 'skin.html' 코드 수정 - 'cover-thumbnail-4' - class="title" "커버 갤러리2" 아이템의 HMTL 코드 소스는 'skin.html' 파일의 "cover-thumbnail-4"에서 관리합니다. "커버 갤러리2" 아이템을 활성화시키면 글의 제목이 중복 표시되는 오류가 발생합니다. 위 캡처 이미지의 "" 코드가 1, 2 겹쳐서 반복되고 있습니다. 한 개의 코드 라인을 삭제하면 간단하게 문제는 해결됩니다. 1번을 삭제하면 이 글 상단에 등록한 캡처 이미지처럼 그림과 글에 약간의 여백이 설정되어 안정감 있는 모습을 보입니다. 그리고 티스토리 치환자 태그 사이에 위치하는 것이 정상적인 코드입니다. 2번을 삭제하면 그림과.. 2021. 10. 10.
