본문 바로가기

티스토리

[티스토리] Gist Github(깃허브)로 소스 코드 추가 Github(깃허브)의 Gist를 통해서 티스토리에 소스 코드를 쉽게 공유할 수 있습니다.Gist를 사용했을 때의 장점은 나중에 코드를 변경했을 때 자동적으로 적용이 된다는 점입니다.Gist 주소는 아래와 같습니다.https://gist.github.com/깃허브 계정이 없는 경우 우측 상단의 Sign up for a Github account 버튼을 누르고 계정을 생성합니다.이메일과 비밀번호 등을 입력하면 간단하게 계정 생성이 가능합니다.로그인을 하면 우측 상단에 New gist라는 메뉴가 생깁니다.New gist를 클릭하고 코드에 대한 설명, 파일명과 함께 코드를 작성하면 됩니다.우측 상단 부분에서는 탭과 공백에 대한 설정을 할 수 있습니다.코드 작성을 완료하고 Add file 버튼을 눌러서 코드를 .. 더보기
[티스토리] SyntaxHighlighter의 물음표(Question Mark) 제거 블로그에 스크립트나 소스코드 등을 깔끔하게 보여주기 위해 SyntaxHighlighter를 사용합니다.각 언어에 맞는 하이라이팅 기능으로 가독성이 좋아집니다.SyntaxHighlighter를 설정하는 방법은 아래 링크에서 확인 가능합니다.2016/12/26 - [IT/컴퓨터/Blog Tip] - [티스토리] 깔끔한 코드 적용을 위한 SyntaxHighlighter 적용우측 상단에 물음표(question mark)가 표시됩니다.코드가 길어지면 물음표가 코드를 가리는 경우가 있습니다.티스토리에 적용된 SyntaxHighlighter의 물음표는 다음과 같이 삭제가 가능합니다.SyntaxHighlighter가 적용된 상태에서 작업을 진행합니다.적용된 코드 부분에 아래 내용을 입력하면 됩니다. 간단하게 물음표가 .. 더보기
[티스토리] 깔끔한 코드 적용을 위한 SyntaxHighlighter 적용 티스토리에 글을 작성할 때 소스 코드를 추가하는 경우가 있습니다. 블로그에 다양한 코드나 쉘 명령어를 추가하는 경우 코드 부분을 강조할 수 있습니다.각 언어에 맞는 하이라이팅 기능을 통해 좀 더 직관적인 코드 설명이 가능합니다.SyntaxHighlighter는 이런 기능을 제공해줍니다. 1. SyntaxHighlighter 준비아래 링크에서 먼저 SyntaxHighlighter를 다운로드 받습니다.http://alexgorbatchev.com/SyntaxHighlighter/download/다운로드 받은 압축 파일은 먼저 압축을 해제합니다. 2. SyntaxHighlighter 적용하기티스토리 관리자 페이지에서 HTML/CSS 편집을 선택합니다.우측의 파일업로드를 누르면 기본적으로 존재하는 파일들을 확인.. 더보기
[티스토리] 네이버 웹마스터 도구 적용하는 방법 사이트의 수집과 노출 현황을 관리하기 위해 네이버 웹마스터 도구를 적용합니다. 네이버를 통한 검색 유입이 주로 발생하기 때문에 네이버 웹마스터 도구를 활용합니다.아래 링크를 클릭하면 네이버 웹마스터 도구 페이지로 이동합니다.http://webmastertool.naver.com/네이버 웹마스터 도구로 이동하면 먼저 로그인을 합니다.기존의 네이버 아이디로 로그인하면 됩니다.로그인을 하면 다음과 같이 연동할 사이트나 앱을 추가할 수 있습니다.티스토리 블로그를 등록하기 위해서 '웹페이지 형태로 구성된 사이트를 연동합니다.'를 선택합니다.다음과 같이 사이트를 입력할 수 있습니다.먼저 http:// 혹은 https://를 선택하는데 일반적으로는 http://를 선택하면 됩니다.그리고 하단에 실제 블로그의 주소를 .. 더보기
[티스토리] 이미지 테두리 제거/추가하기 티스토리 블로그에 글을 작성할 때 이미지에 테두리가 생기게 됩니다.또한 본문보다 큰 이미지를 추가할 경우 오른쪽의 테두리 부분이 제대로 표시되지 않습니다.이미지 테두리에 padding과 margin값이 설정되어 있기 때문에 본문 영역 밖으로 나가는 것입니다.테두리가 별로 필요 없기 때문에 테두리를 제거하도록 하겠습니다.CSS의 속성을 수정하면 간단하게 이미지 테두리를 제거할 수 있습니다.관리자 페이지로 이동해서 HTML/CSS 편집으로 이동합니다.그리고 CSS를 선택해서 다음과 같이 .imageblock이 보이는 곳을 찾습니다.스킨마다 다른데 다른 스킨에서는 .article img이라는 속성이 존재할 수도 있습니다.속성에 border:1px이라고 된 부분이 있습니다.이 부분을 border:0px로 변경하.. 더보기
[티스토리] BASIC 스킨 사용시 글영역 넓이 늘렸을 때 문제점 티스토리 BASIC 스킨을 사용할 때 글영역 넓이를 늘렸을 때 문제가 존재합니다.스킨 위자드를 통해서 다음과 같이 글영역 넓이를 조절할 수 있습니다.글을 많이 작성하기 때문에 기본값인 630에서 700으로 늘려놓은 상태입니다.이렇게 수정한 상태에서 확인하면 다음과 같은 문제점이 표시됩니다.상단의 타이틀바의 끝 부분이 정상적으로 표시되지 않습니다.글 영역의 폭이 늘어났지만 상단 타이틀바의 이미지의 길이가 고정되어 있기 때문에 발생하는 문제입니다.타이틀바는 wrap_menu_bottom.gif, wrap_menu_middle.gif, wrap_menu_top.gif 세 파일로 되어 있습니다.관리자 메뉴의 HTML/CSS 편집을 클릭하고 파일업로드를 선택합니다.images/wrap_menu_bottom.gif.. 더보기
[티스토리] 본문의 링크 글자 색상 변경하기 티스토리의 본문에 있는 링크의 색이 글자 색상과 비슷해서 잘 보이지 않는 문제점이 있습니다.물론 이 부분은 스킨에 따라서 달라질 수 있는 부분입니다.링크의 글자 색상을 변경하기 위해 관리 페이지의 HTML/CCS 편집으로 이동합니다.하단의 style.css가 보이는데 여기에 링크의 스타일을 수정하면 됩니다..article 을 style.css에서 찾으면 다음과 같은 부분을 확인할 수 있습니다.코드에 보면 다음과 같은 부분이 보입니다. .article a:link { color:#666666; text-decoration:none;} .article a:visited { color:#666666; text-decoration:none;} .article a:hover { color:#666666; text.. 더보기
[티스토리] 네이버 이웃 커넥션 추가 네이버 블로그에서는 이웃을 추가할 수 있습니다.이웃의 추가로 관심있는 분야의 블로거의 글이 올라올 때 확인이 가능합니다.RSS를 통해서도 가져올 수 있지만 네이버에서 이웃들의 글을 확인하고 소통할 수 있습니다. 티스토리에도 네이버 블로그 이웃 커넥션을 추가할 수 있습니다.다음 링크로 이동합니다. http://section.blog.naver.com/sub/InstallConnectWidget.nhn다음과 같이 다른 블로그로 퍼가기를 체크합니다.그리고 기본적인 설정을 합니다.위젯을 사용할 블로그 주소에 티스토리 주소를 입력하면 됩니다.설정이 완료되면 하단의 퍼가기 버튼을 누릅니다.다음과 같이 위젯 코드가 생성되면 코드복사를 누릅니다.티스토리에 적용하기 위해서 티스토리 관리 페이지의 사이드바로 이동합니다.좌.. 더보기