정보/블로그 운영팁82

• 

  티스토리 스크롤 시 글 위치 표시 프로그레스바 간단하게 만들기 지금부터 본문 글을 위 아래로 이동할 때마다 위치를 표시해 주는 프로그레스바를 만들어 보겠습니다. 인디케이터, 진행바 등으로도 불립니다. 취향에 따라 수평(horizontal) 방향, 수직(vertical) 방향으로 적용할 수 있도록 둘 다 만들어 보았습니다. 제 블로그에는 일단 그냥 둘 다 적용해 놓았습니다. 생각보다 간단합니다. 참고로 북클럽 스킨 기준이오니 다른 스킨에서 정상적으로 작동하지 않을 수 있습니다. 수평 방향은 웬만하면 모든 스킨에서 정상 작동 할 것 같고 수직 방향은 스킨별로 수정을 좀 해야할 가능성이 높습니다. 다른 스킨에서 적용하다가 막히시는 분은 댓글 남겨 주시면 도와 드리도록 할게요. 내용 추가) 스크롤바가 있는데 굳이 프로그레스바가 왜 필요한 지 궁금하신 분이 계실텐데, 보통 .. 정보/블로그 운영팁 2021. 3. 9.

• 

  티스토리 목차 완전 자동으로 생성하기 (서식 저장 불필요) 이번에는 서식에서 목차 태그를 끼워 넣는 것 조차 귀찮은 분들에게 추천드리는 방법입니다. 다만 목차는 항상 글 맨 상단에 위치하도록 해야한다는 제약이 있습니다. 필요에 따라 글 시작 후 중간부터 목차를 넣어야 하는 분이 아니라면 큰 문제는 아니라고 봅니다. 목차 기존 목차 기능 적용하기 필요한 라이브러리 및 자바스크립트, CSS 코드는 아래 글에서 이미 다루었으니 새로 작성하지 않고 링크로 대체 하겠습니다. 티스토리 글에 자동으로 목차 넣기 티스토리 글에 자동으로 목차 넣기 목차를 넣고 싶긴한데 글 쓸 때마다 매번 수작업으로 만든다면 상당히 번거롭겠죠. 그래서 jQuery 플러그인 Table of Contents(TOC)를 이용하여 자동으로 넣는 방법을 소개합니다. 저는 제목1, 제목2로 sangmine.. 정보/블로그 운영팁 2021. 2. 27.

• 

  티스토리 스크롤 자연스럽게 이동하기 목차를 누르면 너무 딱딱하게 이동하는 모습이 그다지 마음에 들지 않아서 수정해 보았습니다. 목차 CSS 수정하는 방법 가장 간단하지만 최신 브라우저가 아니면 적용이 되지 않을 수 있고 브라우저 설정에 따라 액션이 달라질 수 있으므로 아직은 완전한 방법이 될 수 없을 것 같습니다. 그래도 간단히 적용하고 싶으신 분들은 하셔도 괜찮아 보입니다. 참고로 고래스킨은 이 방법을 이용하였습니다. 관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다. html 편집을 클릭합니다. 그럼 다음과 같은 HTML 에디터가 뜨는데 CSS 탭으로 이동하여 작업을 해 보겠습니다. 간단하게 다음과 같이 입력만 하면 됩니다. html { scroll-behavior: smooth; } 다음은 브라우저별 호환성을 나타낸 표입니다. j.. 정보/블로그 운영팁 2021. 2. 24.

• 

  북 클럽 스킨 상단 글 제목 배경 이미지 제거 및 스타일 변경하기 북 클럽 스킨이 인기가 많은데 은근히 글 제목 스타일을 바꾸고 싶어하시는 분이 많으셔서 정리 좀 해 보았습니다. 목차 글 제목 이미지 제거하기 먼저 이미지를 나오지 않게 하기 위한 작업을 진행해 보겠습니다. 관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다. html 편집을 클릭합니다. 그럼 위외 같은 HTML 에디터가 뜨는데 여기에서 작업을 해 보겠습니다. CTRL+F를 눌러 s_permalink_article_rep 태그를 찾고 그 하위에 있는 부분을 삭제하거나 아래와 같이 주석처리 합니다. 그리고 그 밑에 를 새로 작성합니다. 그럼 더 이상 이미지는 나오지 않게 됩니다. CSS 수정도 좀 더 해보겠습니다. 관리 페이지 > 꾸미기 > 스킨 편집 > html 편집 > CSS 탭으로 이동합니다. 마찬.. 정보/블로그 운영팁 2021. 2. 22.

• 

  티스토리 공감 클릭 시 고마움 표시하기 공감을 눌러 주신 분들께 감사한 마음을 전달하고자 생각한 방법입니다. 복잡하지 않은 내용이므로 쉽게 따라 하실 수 있습니다. 목차 토스트 기능 만들기 사실 토스트 기능을 좀 더 전파하고 싶어서 작성한 글입니다. 토스트 기능을 먼저 적용하셔야 이어서 진행이 가능합니다. 아래 포스팅 참고 하시기 바랍니다. 티스토리 토스트 알림 팝업 기능 만들기 티스토리 토스트 알림 팝업 기능 만들기 클립보드 내용 복사 완료 문구를 단순하게 alert 창을 이용하여 띄웠더니 너무 없어 보여서 간단하게 구현하였습니다. 목차 HTML 작성 관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다. html 편집 sangminem.tistory.com 클릭 이벤트 작성하기 관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다. htm.. 정보/블로그 운영팁 2021. 2. 22.

• 

  티스토리 목차 링크 클립보드 복사하기 목차를 클릭하면 해당위치로 바로 가는 기능까지는 지원이 되어 문제가 없는데, 문득 목차 링크를 클릭 한번으로 복사 가능하면 좋을 것 같다는 생각이 들어서 개발하게 되었습니다. 목차 작업 위치 관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다. html 편집을 클릭합니다. 그럼 위외 같은 HTML 에디터가 뜨는데 여기에서 작업을 해 보겠습니다. body 태그 안쪽 제일 하단 script 태그 안에 붙여넣기 하시면 됩니다. 링크 복사 아이콘 생성 제목 오른쪽에 링크 복사 아이콘을 삽입하는 함수입니다. function makeClipboardLink() { var tocLink = $('#toc a'); tocLink.each(function(i, aLink) { var regExp = /[\{\}\[\].. 정보/블로그 운영팁 2021. 2. 20.

• 

  티스토리 토스트 알림 팝업 기능 만들기 클립보드 내용 복사 완료 문구를 단순하게 alert 창을 이용하여 띄웠더니 너무 없어 보여서 간단하게 구현하였습니다. 목차 HTML 작성 관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다. html 편집을 클릭합니다. 그럼 위와 같은 HTML 에디터가 뜨는데 여기에서 작업을 해 보겠습니다. 다음 내용을 body 태그 안쪽 아무데나 작성 하시면 됩니다. 먼저 토스트 메시지를 띄울 영역을 잡았습니다. 최초에는 보이지 않아야 하므로 display 속성에 none을 설정합니다. 자바스크립트 작성 관리 페이지 > 꾸미기 > 스킨 편집 > html 편집 > HTML 에디터 로 이동하여 body 태그 안쪽 제일 하단 붙여넣기 하시면 됩니다. toast는 메시지가 잠깐 보였다가 사라지는 것이 핵심입니다. jQuer.. 정보/블로그 운영팁 2021. 2. 20.

• 

  티스토리 글 열람 즉시 원하는 제목 내용으로 이동하기 https://sangminem.tistory.com/234#jQuery_중복_로딩을_피했습니다 위와 같이 URL이 #뒤에 글 내용의 제목 id가 포함되어 있는 경우 페이지가 로딩된 이후 제목 위치까지 바로 이동해야 될 것 같은데 일부 스킨에서는 제대로 동작하지 않아서 수동으로 옮기는 로직을 개발하였습니다. 잘 되시는 분은 적용하실 필요가 없습니다. 목차 자바스크립트 코드 붙여넣기 위치 관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다. html 편집을 클릭합니다. 그럼 위외 같은 HTML 에디터가 뜨는데 여기에서 작업을 해 보겠습니다. body 태그 안쪽 제일 하단 붙여넣기 하시면 됩니다. 소스 코드 아래 코드를 붙여넣기 해주세요. 주소를 가져와서 # 뒤쪽 id를 분석하여 제목 태그로 사용된 값이 .. 정보/블로그 운영팁 2021. 2. 14.

• 

  고래스킨, 친효스킨 둘러 보고 다시 북 클럽 스킨으로 돌아온 이유 티스토리를 시작한 이후 초반에 기본 제공 스킨을 이것 저것 사용해 보면서 정착한 스킨이 바로 북 클럽 스킨이었습니다. 그런데 너무 오래 사용했나 봅니다. 갑자기 밀려오는 식상함 때문에 신선한 자극이 필요했습니다. 그래서 스킨 검색을 해 본 결과 무료 버전 중에 고래스킨과 친효스킨에 대한 좋은 평이 많아서 좀 더 살펴 보았습니다. ※ 다음 내용은 개인적인 의견이므로 참고만 하시기 바랍니다. 목차 고래스킨 4.0 사용 후기 먼저 고래스킨을 다운 받아 사용해 보았습니다. 그대로 사용하는 것은 제 성격이 아니라서 일단 수정 작업 먼저 들어갔습니다. 글씨체부터 색상들을 차례차례 바꿔 보았습니다. 제가 초록색 계열을 좋아해서 초록색 계열로 싹 수정했습니다. 바꾸고 나니 좀 더 새로운 느낌이 들어 좋네요. 홈 화면도.. 정보/블로그 운영팁 2021. 2. 14.

• 

  티스토리 스킨 jQuery 중복 로딩 피하기 자원 중복 로딩이 발생하면 좋을 이유가 전혀 없기 때문에 생각한 방법입니다. 다만 예기치 못한 문제가 발생할 수 있으므로 어느 정도 코딩 지식이 있으신 분만 참고 하시기 바랍니다. 목차 jQuery 중복 로딩 개선이 필요한 이유 티스토리는 자체적으로 jQuery를 로딩하여 사용합니다. 따라서 스킨에서 jQuery를 이용하려면 보통은 다시 jQuery를 임포트합니다. 지극히 일반적이고 상식적인 이야기 입니다. 그런데 저는 조금 다르게 생각을 해 보았습니다. 이미 jQuery를 로딩하여 사용하고 있는데 굳이 불필요하게 로딩하면 블로그 속도만 느려지게 만드는게 아닌가 한거죠. 실제 체감할 수 있을 정도는 아니겠지만 이런 작은 개선이 모여 큰 차이를 만들게 됩니다. jQuery도 여러 버전이 있기 때문에 꼭 다.. 정보/블로그 운영팁 2021. 2. 14.

• 

  티스토리 이미지 확대, 그림자 강조 효과 적용 마우스를 이미지에 가져다 댈 경우 이미지를 강조해 보려고 합니다. 좀 더 생동감 있는 블로그를 원하신다면 적용해 보세요. 이번 내용은 크게 어렵지 않아서 간단히 설명하고 결과를 보겠습니다. 목차 CSS 작성 관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다. html 편집을 클릭합니다. 그리고 CSS 탭으로 이동하여 작업을 해 보겠습니다. 다음 코드를 작성합니다. 어느 위치든 상관없습니다. img:hover { transform: scale(1.03); box-shadow: 0.2em 0.15em 0.3em #999; transition: all 0.1s linear; } 이미지에 마우스를 가져다 대면 크기를 약간 확대하고 그림자 효과를 적절히 주었습니다. 원하시는 만큼 조절하시면 됩니다. 부드럽게 .. 정보/블로그 운영팁 2021. 1. 16.

• 

  이미지 태그 alt 속성 글 수정 없이 입력하는 방법 (고급 버전) 얼마 전에 글의 제목을 이미지 태그의 alt 속성 값으로 활용을 했었는데요. 이번에는 좀 더 디테일하게 설정을 해 보도록 하겠습니다. alt 속성의 중요성 및 기타 내용은 앞서 작성한 포스팅을 참고 바랍니다. 이미지 태그 alt 속성 글 수정 없이 입력하는 방법 (초급 버전) 이미지 태그 alt 속성 글 수정 없이 입력하는 방법 (초급 버전) 이미지 태그의 alt 속성 값이 검색 사이트 키워드 역할을 한다는 말은 많이 들어 보셨을 겁니다. 하지만 뒤늦게 아셨거나 알고는 있지만 앞으로도 크게 신경쓰고 싶지 않은 분들이 계실텐데 그런 sangminem.tistory.com 목차 아이디어 설명 이전 글에서는 단순히 글 제목만을 이미지 태그 alt 속성 값으로 활용을 하는 방법을 다루었습니다. 그 정도로만 작업.. 정보/블로그 운영팁 2020. 12. 29.