728x90

티스토리 5

티스토리 블로그 포스팅 원하는 위치로 이동하는 목차 링크 만들기

블로그 포스팅을 작성하다 보면 글의 길이나 내용, 종류에 따라서 목차를 작성해야 할 때가 있습니다. 단순히 목차를 적는것만으로도 글의 내용이나 흐름을 파악할 수 있지만 거기에 편의성을 추가하는 방법 중 하나가 바로 '목차 링크'를 설정하는 것입니다. 목차에 링크를 설정하면 필요한 정보를 빠르게 찾을 수 있도록 도와줄 뿐만 아니라, 포스팅의 전반적인 가독성을 높여줍니다.티스토리 블로그 포스팅에 목차를 만드는 방법을 단계적으로 설명 드리겠습니다. 목차목차 링크 만들기목차 링크 서식화마무리 목차 링크 만들기 - 위와 같은 형식으로 목차 링크를 만들어 보겠습니다. - 우선 목차링크 생성을 위해서는 html 코드를 편집해야 합니다. - 간단하게 목차 목록에는 코드를 본문 중간으로 이동할 부분에는 id=..

블로그 관리 2024.07.30

티스토리 블로그 인용 색상 및 디자인 변경

티스토리는 솔직히 편의성은 빈말으로도 좋다고는 할 수 없는 편입니다. 블로그 포스팅을 보다보면 아래와 같은 디자인의 제목들이 보이는데 처음에는 기본으로 지원하는 인용기능인줄 알았는데 HTML 코드를 수정해서 직접 디자인 해야된다는 걸 알았습니다. 하지만 간단한 포스팅의 경우 그래도 지원하는 기능을 쓰는게 편한데 인용문의 색상과 기본 디자인을 영구적으로 수정하는 방법을 알려드리겠습니다. - 티스토리 관리 페이지 > 꾸미기 : 스킨편집 > html 편집으로 이동합니다. - html 탭이 아닌 css 탭을 클릭하여 blockquote(블록 쿼드)를 검색합니다.- 여러개가 검색이 될텐데 'style'로 지정된 구역을 찾아 이 부분의 코드를 수정해주면 됩니다. - 스타일 1부터 인용문1,2,3 순서입니다...

블로그 관리 2024.07.29

티스토리 블로그 검색 노출 시키기 - 구글 서치콘솔 (구글,네이버,빙,줌)

티스토리 블로그를 만들고 글을 작성해도 구글이네 네이버 같은 매체에 검색이 되지 않는 경우가 있습니다.물론 글을 작성한다고 100% 노출이 되는 건 아니지만 노출을 위한 기본적인 작업이 필요하다는 걸 알았습니다.아래 내용을 정리해두니 천천히 따라 하시면 되겠습니다. 티스토리 블로그 검색 노출 방법- 티스토리 블로그 노출에 대한 방법은 크게 아래 4가지로 구분되고 각 단계별로 하나씩 알아보겠습니다.1. 구글 서치 콘솔 ◀ 2. 네이버 서치 어드바이저3. 빙 웹마스터 도구4. 줌 검색서비스 1-1. 구글 서치콘솔 (플러그인) 우선 가장 간단한 방법은 티스토리 내에 있는 플러그인을 활용하는 방법입니다. - 티스토리 관리 메뉴에 플러그인을 클릭하고 검색창에 "구글 서치 콘솔"을 입력합니다. - 구글 서..

블로그 관리 2024.07.22

티스토리 블로그 색상 선택도구 추가하기

티스토리 블로그 글에서 바로 색상선택도구를 추가할 수 있는 코드입니다.거의 쓸 일은 없겠지만 아래 코드를 활용해 유용하게 사용할 수 있습니다.RGB코드, HSL코드, HEX코드 값을 바로 확인할 수 있습니다.   [ 적용 코드 예시 ]div h2 색상을 선택하세요 /h2 input type="text" id="colorPicker" script $(document).ready(function() { $("#colorPicker").spectrum({ color: "#f00", change: function(color) { alert("선택한 색상은 " + color.toHexString() + " 입니다."); } }); }); /script /div

블로그 관리 2024.07.21

티스토리 블로그 글접기 펼치기 추가방법

티스토리에 접은글이라는 기능이 있는데 되질 않아서 찾아보니 HTML코드를 추가해야 한다는걸 알게되었습니다.티스토리 접기,펼치기,더보기,닫기에 관한 내용을 정리해 둡니다. [ 접은글 적용 방법 ]1. 상단 메뉴를 통해 접은글을 생성한다. 더보기이곳에 본문 내용을 적으면 된다.2. 접은글 생성 후 내용을 작성한다. 3. 다시 상단메뉴 중 기본모드를 HTML로 변경한다. 3-1. 이런창이 뜨는메 확인을 누른다. 4. Ctrl+F로 moreLess 또는 더보기 검색 후 10번줄에 있는 코드를 아래 변경코드로 바꾸면된다. 더보기margin: 20px 0px; caret-color: auto; background-color: #fafafa; padding: 15px 15px 15px; border: 1px da..

블로그 관리 2024.07.20
728x90