워드프레스 일기의 IT & 기타/티스토리 220

AddThis를 사용하여 티스토리에 SNS 공유 아이콘 추가 현재 사용 중인 티스토리 기본 스킨인 #1이 깔끔하고 나름대로 괜찮지만 사이드바가 없어서 조금 허전하네요. 그래서 SNS 공유 아이콘을 추가했습니다. 여러 가지 방법이 있겠지만 저는 AddThis에 가입하여 AddThis를 설치했습니다. AddThis 사이트에 가입하고 공유 아이콘 설정을 하면 사이트에 추가할 수 있는 코드가 생성됩니다. 라인(LINE), 카카오(Kakao)와 카카오톡(Kakao Talk) 공유 아이콘도 제공됩니다.ㅎㅎ 생성된 코드를 바로 앞에 추가하면 지정한 위치(왼쪽 또는 오른쪽 사이드바)에 공유 아이콘이 표시됩니다. 자세한 설치 방법은 다음 글을 참고해보세요. http://rgy0409.tistory.com/2200 코드를..

티스토리에서 jQuery 코드를 추가해야 하는 상황에서 구글 검색을 통해 jQuery 스크립트를 추가하는 방법을 참고하여 추가해보았습니다. 추가한 스크립트는 잘 작동하지만 스킨에서 로드되는 다른 스크립트가 제대로 작동하지 않네요. 여러 방법으로 테스트해보니 다음과 같은 형식으로 태그 바로 위에 추가하니 제대로 작동하네요. 스킨에서 제이쿼리를 로드하는 코드가 이미 적용되어 있어서 별다른 추가 작업 없이 위와 같은 형식으로 코드를 추가해주니 별 문제가 없이 작동하고 있습니다. 참고로 다음과 같은 형식으로 추가해보니 스킨에서 로드되고 있는 스크립트가 제대로 로드되지 않는 현상이 발생하네요. 참고로 가입형 워드프레스(wordpress.com)의 경우 무료 플랜에서는 워드프레스에서 제공하는 테마(무료 혹은 유료)..

티스토리가 네이버와 다음에서 검색이 비교적 잘 되는 것 같습니다. 하지만 이 블로그의 경우 구글에서 검색이 거의 되지 않고 있습니다. 원인은 사이트맵을 생성하여 제출하지 않았기 때문입니다. 약 열흘 전에 이 블로그를 시작하면서 네이버, 구글에 등록할 때 RSS를 제출하는 것이 설명된 글을 참고해서 RSS만 제출한 상태였습니다. 오늘 살펴보니 구글에서 제대로 인덱스가 되지 않고 있네요. 그래서 http://www.web-site-map.com/ 사이트에서 사이트맵을 생성하여 사이트맵 파일을 비공개 글에 첨부한 후에, sitemap.xml 파일의 링크를 구글 웹마스터도구에 등록했습니다. 시간이 지나면 구글에서도 검색이 될 것 같습니다. 다음(Daum)의 경우 검색 품질이 떨어지는 것 같은 느낌이 듭니다. 간..

워드프레스에서는 개별 글에서 제목 아래나 옆에 댓글 개수와 링크가 표시되는 경우가 많습니다. 하지만 티스토리 블로그에서는 글 제목 옆이나 바로 아래에 댓글 개수와 링크를 표시하는 스킨은 거의 없는가 보네요. (어쩌면 제가 찾지 못할 수도 있고요.) 약간의 삽질 끝에 이 티스토리 스킨에 글 제목 옆에 댓글 개수와 링크를 표시했습니다. 티스토리 스킨에 댓글 개수와 링크 표시하기 이 블로그에는 기본 스킨 중 하나인 #1 스킨이 사용되고 있습니다. #1 스킨이 나름대로 깔끔해서 마음에 들지만 조금 부족한 것이 보이네요. 그래서 시간이 날 때마다 조금씩 수정하고 있습니다. 게시글에서 글 제목 옆에 위의 그림과 같이 댓글 개수와 링크를 표시하려면, 먼저 스킨 파일에 다음 링크를 적절한 곳에 추가합니다. 위치는 스킨..

티스토리에서 서드파티 에디터를 사용하여 글을 작성하고 있습니다. 코드 블록 기능을 사용하여 코드를 삽입하니까 긴 라인이 줄바꿈 없이 코드 블록을 벗어나서 어색하게 표시되네요. 저는 다음과 같은 코드를 추가하여 강제로 줄바꿈이 되도록 했습니다./* 강제 줄바꿈 */ .skin_view .area_view pre { white-space: pre-line; } 이제 제대로 줄바꿈이 되어 표시되네요.ㅎㅎ 위의 방법으로 잘 안 되는 경우 "CSS를 사용하여 긴 URL / 긴 문자 강제 줄바꿈"에 제시된 코드를 시도해보시기 바랍니다.

현재 사용 중인 기본 티스토리 스킨인 #1에는 사이드바가 푸터에 표시되고 있습니다. 결과적으로 전체 폭(Full-width)로 글이 표시되어 방문자 입장에서는 글을 읽기가 편하게 되어 있는 것 같습니다.티스토리 사이드바에 HTML 코드 추가하는 방법 사이드바에 배너를 하나 추가하려고 하니 사이드바에서 배너를 추가할 수 있는 모듈을 찾을 수가 없네요. 조금 살펴보니 플러그인에서 배너출력 플러그인을 설정해주면 HTML 코드를 사이드바에 추가할 수 있네요. 설정하기를 클릭하면... 적용을 클릭하면 배너출력 모듈이 사이드바에 추가됩니다. 사이드바에 HTML 배너출력 모듈이 추가된 것을 확인해볼 수 있습니다. 기본적인 내용인데요. 워드프레스를 사용하다가 티스토리를 이용해보니 사이드바를 구성하는 것이 조금 불편하게..

티스토리 스킨 중에서 가장 기본 스킨인 #1을 적용하고 테스트하고 있습니다. 시간이 날 때마다 조금씩 스킨을 수정하고 있습니다. 엊그제 브레드크럼 코드를 스킨에 추가했습니다. 어제 구글에서 확인해보니 브레드크럼(Breadcrumb, 이동 경로)이 제대로 반영되어 검색되는 것을 확인했습니다. 브레드크럼을 추가하면 SEO에 도움이 된다고 합니다. 워드프레스에서는 아바다 등 일부 테마에서 기본적으로 브레드크럼 기능을 제공하고 있으며 Yoast SEO 같은 플러그인을 사용하여 브레드크럼을 추가할 수 있습니다. 사용 중인 티스토리 스킨에 브레드크럼을 넣으려는 경우 다음 글을 참고해보시기 바랍니다. 티스토리에서 브레드크럼(Breadcrumb)을 추가하여 SEO 향상시키기 #1 스킨에는 메뉴를 추가할 수 없습니다. ..

티스토리 블로그를 시작한지 며칠되지 않아서 아직은 완전히 익숙하지 않다. 워드프레스 블로그를 사용하다가 티스토리 블로그를 해보니 우선 글 편집기가 너무 불편하다. 글 편집기는 Estoque님의 추천을 받아서 서드파티 에디터를 하나 설치했다. http://est0que.tistory.com/3219 새로 설치한 에디터에서는 Markdown Editor, Rich Editor (Tinymce), Rich Editor (Quill) 등 세 가지 에디터가 지원된다. 주로 Tinymce 에디터를 사용하다가 그림을 추가할 때에는 Quill 에디터를 사용하고 있다. 기본 티스토리 에디터보다는 편리하지만 그래도 많이 불편하다. 무엇보다 그림을 드래그 앤 드롭 방식으로 끌어다가 놓을 수가 없어서 많이 불편하다. 간단한 ..

티스토리 스킨에 브레드크럼(이동경로; Breadcrumb) 추가 브레드크럼은 SEO(검색엔진최적화)에 도움이 된다고 한다. 티스토리의 경우 URL에 제목을 표시할 수도 있지만 보통 숫자가 URL에 표시된다. 이럴 경우 사용자들은 URL만 보고서 어떤 사이트인지 감을 잡지 못할 수도 있다. 브레드크럼(이동 경로)을 추가해주면 구글에서 알아서 수집하여 검색 시 반영해 준다. 그러면 SEO에 약간은 도움이 될 것 같다. 이와 관련하여 "브레드크럼(Breadcrumb)을 사용하여 SEO 향상시키기"를 참고해볼 수 있다. 워드프레스에서는 Yoast SEO 같은 플러그인을 사용하여 브레드크럼을 추가할 수 있고, 아바다 같은 일부 테마에서는 기본적으로 브레드크럼이 추가되어 있다. 티스토리 스킨을 살펴보니 브레드크럼을..

티스토리 스킨을 기본 스킨 중 하나인 #1으로 변경했습니다. (스킨 목록에서 첫 번째에 위치해 있습니다.) 처음 선택한 스킨의 경우 Masonry 방식으로 블로그 글을 표시하여 선택했지만 IE 11에서 반응형이 제대로 작동하지 않네요.ㅠㅠ 새로 선택한 #1 스킨은 깔끔한 레이아웃이 인상적이네요. 제가 딱 좋아하는 스타일입니다. 이 스킨의 경우 메뉴를 지원하지 않는다는 것이 단점 같습니다. 임시방편으로 소스를 조금 수정하여 Home 링크를 추가했습니다. Tistory를 사용한지 며칠 안 되어 티스토리 기능을 아직 제대로 파악하지 못했지만 티스토리는 조금만 둘러보아도 쉽게 사용이 가능한 블로그 같습니다. 워드프레스의 경우 커스터마이징이 자유롭고 방대한 플러그인과 테마를 이용할 수 있지만, 한편으로는 제대로 ..