티스토리/스킨가이드 검색 결과

해당 글 8건

티스토리 댓글 및 방명록 디자인 유의사항

티스토리의 댓글 및 방명록을 디자인할때 겪을 수 있는 유의사항을 살펴봅니다. 댓글 및 방명록 스크립트 티스토리에서 댓글과 방명록 폼에 입력된 내용을 처리하는 스크립트는 아래와 같다. function addComment(caller, entryId) { var oForm = findFormObject(caller); if (!oForm) return false; var request = new HTTPRequest("POST", oForm.action); request.onSuccess = function () { if(entryId == 0) window.location = blogURL + "/guestbook"; else { document.getElementById("entry" + entryId ..
티스토리/스킨가이드 2016. 1. 5. 11:00

티스토리 카테고리 클래스 추가

티스토리 스킨의 카테고리 목록형 구조에 클래스명이 새로이 추가되었습니다. 카테고리 디자인을 위해 복잡한 CSS 선택자를 이용하거나 스크립트로 클래스를 추가해 사용해왔는데 조금은 수월해질 듯 싶습니다. 카테고리 목록의 구조 아래는 [샆샾_category_list_샾샾] 치환자를 이용할 경우 생성되는 구조이다. 샾샾 부분은 ##으로 교체 분류 전체보기 (글갯수) 카테고리명 (글갯수) 서브 카테고리명 (글갯수) 카테고리 목록의 시작엔 .tt_category 가 추가되었다 - 1행. 카테고리 목록의 최상위 목록엔 .link_tit 가 추가되었다 - 3행 카테고리 목록의 1차 카테고리의 시작엔 .category_list 가 추가되었다. - 4행 카테고리 목록의 1차 카테고리의 링크엔 .link_item 이 추가되..
티스토리/스킨가이드 2016. 1. 4. 11:00

티스토리 첨부 파일 디자인

티스토리의 첨부 파일은 파일형식에 따라 각각의 아이콘 이미지가 함께 제공되는데 아래가 대표적인 예이다. 이대로 사용해도 큰 문제는 없지만 반응형 디자인을 지원하는 경우, 모바일의 뷰포트의 크기에 따라 글자와 아이콘 이미지가 정렬되지 않는 경우가 있을 수 있다. 이 경우 vertical-align: middle 이 지정되어 있는 정렬 값을 변경해보자. .imageblock > a[href*="attachment"] > img { vertical-align: text-bottom !important; } 이 이미지들을 모두 숨기고 하나의 아이콘으로 통일하고 버튼 형식으로 디자인을 변경해 볼 수 있겠다. .imageblock > a[href*="attachment"] { position: relative; d..
티스토리/스킨가이드 2015. 12. 8. 11:00

이미지 캡션(자막) 디자인

이미지 기본형 티스토리 이미지의 기본 형태는 아래와 같으면 자막이 작성되어 있는 경우에만 .cap1 구조가 등장한다. 자막 내용 간단히 스타일을 추가해보자. .cap1 { padding: 10px 5px; font-size: 12px; color: #999; text-align: center; } .cap1:before { display: inline-block; content: "▲"; padding-right: 5px; font-size: 13px; } 안쪽 자막 이미지를 감싸고 있는 태그에 .inner-cap 추가함으로써, 자막을 이미지 안쪽에 배치한다. .inner-cap .imageblock { position: relative; } .inner-cap .cap1 { position: absol..
티스토리/스킨가이드 2015. 12. 7. 11:00

티스토리 최신글, 카테고리 썸네일 추출에 대한 이해

티스토리 스킨에는 갤러리 형태의 카테고리(검색결과) 및 최신글의 이미지를 출력하는 치환자가 공개되지 않았습니다. 물론, 티스토리에서 제공하는 모바일 스킨에는 이를 지원하고 있으나 모바일 스킨은 공개되지 않았기에 일반 스킨 제작자들은 다른 방법을 필요로 합니다. 티스토리 썸네일 치환자 업데이트! 티스토리에서 공식적으로 썸네일 치환자가 업데이트 되었습니다. http://www.tistory.com/guide/skin/step3#2-8-7 Ajax를 이용한 이미지 추출 티스토리 스킨 제작자들은 위와 같은 어려움을 극복하기 위해 Ajax를 사용하여 페이지 전체를 가져오거나 RSS를 이용하여 이미지 추출을 구현하고 있다. 티스토리 Ajax 구현방식은 제작자마다 다를 수 있으나 크게 두가지로 구분된다. dataTy..
티스토리/스킨가이드 2015. 11. 3. 11:00

티스토리 본문 너비와 사진 첨부로 삽입되는 이미지의 상관관계

티스토리 에디터의 사진 첨부 기능으로 이미지를 삽입할때 영향을 주거나 받는, 연관하여 스킨 제작시에 제한 받을 수 있는 점들에 대하여 살펴봅니다. 스킨 제작분들 이외에도 블로그를 시작하기 전에 알아두면 차후 스킨 변경시 이미지로 인해 겪는 문제를 덜 수 있습니다. 티스토리 본문 너비 이해 티스토리의 본문 너비라고 지칭하면 대부분 글쓰기 가로폭을 떠올린다. 이는 TISTORY 관리 → 글설정 → 글쓰기 환경의 글쓰기 가록폭 에서 설정 할 수 있으며, 설정값에 따라 삽입되는 이미지 크기가 결정된다 라고 적혀 있다. 실제로 이와 관련된 부분에서 혼동되는 경우가 많아 이에 대해 자세히 알아보도록 한다. 글쓰기 가로폭과 스킨너비 글쓰기 가로폭을 원하는 값으로 설정하였다 하더라도 실제 스킨의 본문 너비가 변경되진 ..
티스토리/스킨가이드 2015. 11. 2. 11:00

티스토리 반응형 이미지 제공

티스토리는 반응형 스킨을 위해 따로 무엇인가 지원하는 곳은 아니였습니다. 스킨공모전 이후에 새로운 스킨을 준비중이라는 티스토리 측의 말이 있었듯이 하나 둘 기본 시스템을 업데이트해 나가고 있습니다. 얼마전에는 날짜 표현방식이 변경되어 당황스런 일도 있었지만 이번에 발견한 것은 본문에 삽입되는 이미지와 관련된 정보입니다. 반응형 이미지 지원 그 동안 티스토리 스킨제작시에 에디터로 삽입되는 본문 이미지를 반응형 디자인에 맞게 수정하기 위해서 아래와 같이 관련 코드를 직접 작성해야 했다. .img-responsive, .imageblock img { display: block; width: 100% \9; max-width: 100%; height: auto; } .img-responsive 는 부트스트랩에서..
티스토리/스킨가이드 2015. 10. 29. 11:00

티스토리 메타 태그 생성 유의점

티스토리 스킨 제작중에 메타 태그에 대한 의문점이 남아 이에 대한 조사를 해보았습니다. 스킨 제작에 관심있는 분들에게 참고가 되었으면 합니다. meta http-equiv="x-ua-compatible" IE 브라우저 사용자들을 위해 최신의 문서모드로 렌더링 되도록 아래와 같은 코드 사용을 하곤 한다. 이는 X-UA-Compatible, IE=edge, 호환성 보기에서 설명했듯이 웹서버에 지정해 두면 메타 태그에서 따로 언급하지 않아도 이를 최신 문서로 강제한다. 아래는 x-ua-compatible 메타 태그를 삽입하지 않은 상태로 블로그의 header 를 요청한 결과이다. 즉, 티스토리 서버에는 관련사항이 지정되어 있어 이 메타 태그를 삽입하지 않아도 된다. 필자는 과거에 Validate HTML 에서..
티스토리/스킨가이드 2015. 9. 24. 11:00