펀큐브의 디지털 창작 공간

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

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

티스토리 블로그 검색 노출의 마지막 단계입니다. 구글과 네이버같은 주요 포털 외에도 추가적으로 등록하면 좋을 사이트에 대해 알려드리겠습니다. 티스토리 블로그 검색 노출 방법- 주요 포털사이트인 구글과 네이버에 대한 작업이 완료되었습니다. 이제 마지막으로 빙과 줌 사이트 등록에 대해 설명드리겠습니다.1. 구글 서치 콘솔2. 네이버 서치 어드바이저 3. 빙 웹마스터 도구 ◀ 4. 줌 검색서비스 ◀ 티스토리 블로그 검색 노출 방법3. 빙 웹마스터 도구- 검색창에 "빙 웹마스터 도구"를 입력하고 링크로 들어가줍니다. - 상단의 로그인 버튼을 통해 로그인을 해주시면 됩니다. 유형은 상관없습니다. - 로그인을 하면 새로운 창이 뜨는데 이미 구글 서치 콘솔을 통해 연동이 되어 있는 경우 좌측의 "가져오기"를 ..

티스토리 블로그 검색 노출의 1단계인 구글에 대한 작업이 끝났다면 이어서 네이버 검색 노출을 위한 작업을 진행하겠습니다.  티스토리 블로그 검색 노출 방법- 해당 글에서는 2번 네이버 서치 어드바이저에 관련된 내용을 설명하며 추가로 네이버 애널리틱스에 대한 부분도 설명드리겠습니다.1. 구글 서치 콘솔2. 네이버 서치 어드바이저 ◀3. 빙 웹마스터 도구4. 줌 검색서비스   티스토리 블로그 검색 노출 방법2-1. 네이버 노출방법- 우선 검색창에 "네이버 서치어드바이저"를 검색 후 클릭합니다. - 네이버 로그인 후 상단 웹마스터 도구를 클릭합니다. - 웹마스터 도구에 진입하면 사이트 관리 메뉴가 선택되어 있는데 티스토리 블로그 주소를 입력하여 사이트 등록을 해줍니다. https:// 블로그 주소 양식으로 작..

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

티스토리 블로그 글에서 바로 색상선택도구를 추가할 수 있는 코드입니다.거의 쓸 일은 없겠지만 아래 코드를 활용해 유용하게 사용할 수 있습니다.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

티스토리에 접은글이라는 기능이 있는데 되질 않아서 찾아보니 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..