댓글 탭 보기를 업그레이드해봤습니다. 아래 포스팅을 먼저 보시면 이해가 쉽습니다. - Disqus 댓글과 티스토리 댓글 탭으로 보기 디자인도 더 깔끔하게 수정되었고, 무엇보다도 이제 jQuery 스크립트 없이 CSS만으로 동작합니다! (약간의 속도 향상을 기대할 수 있습니다.) 원리는 간단히 탭으로 를 사용하고, CSS선택자로 :checked를 사용하는 것입니다. 미리보기 See the Pen tab only CSS by Kim young wook (@nubiz) on CodePen. codepen에서 작업한 결과물입니다. 적용하기 적용 방법은 이전과 크게 다르지 않습니다. 1.HTML/CSS수정 - skin.html에서 부터 까지를 잘라내어 메모장같은데 붙여둡니다.(댓글 출력 부분) 부터 까지를 잘라내..
물론 티스토리의 공식 실험실은 아닙니다. 저의 개인적인 티스토리와 관련해서 실험적 기능에 대해 소개하거나 적용해 볼 블로그입니다. http://tistory-lab.tistory.com/ 현재는 애드센스 코드삽입에 대한 도구가 2개 올라와 있습니다. 지금은 바빠서 못 하고 있지만, 9월달에는 이 블로그에 포스팅했던 티스토리 관련 팁들을 점차 정리해서 올릴 예정이니 많은 이용 부탁드립니다 ^^
다음뷰가 서비스 종료되면서 그 자리를 '공감'이 차지하게 되었습니다. 이제 슬슬 다음뷰 버튼들도 공감버튼으로 대체가 될텐데요, 손가락은 구걸했었는데 공감이라고 못할 것 없습니다! - 티스토리 다음뷰 손가락 버튼 자리 옮기는 방법 (손가락 구걸 방법이 소개되어있습니다.) 초기에는 공감버튼에 선택자를 부여해주지 않아서 CSS로 공감버튼 구걸을 하기에 조금 어려움이 있었는데, 언제부턴가 선택자가 부여가되어서 편하게 적용할 수 있게 되었습니다. 다만 블로그 분위기를 위해 손가락 구걸보다는 점잖은 스타일로 해봤습니다. 반응형 스킨 모바일에서는 아래와 같이 나타납니다. . 공감 구걸하기간단히 HTML/CSS편집에서 CSS아래쪽에 아래 내용을 붙여넣으시면 됩니다..daum_like_wrapper {float: rig..
티스토리 실험실 테마 티스토리 실험실 블로그에 적용 예정인 테마입니다. (아직 계획단계에 있는 블로그입니다.) Fastboot의 상단바를 스크린샷에 보이는 것 처럼 상단바를 구현해줍니다.-로케이터와 카테고리가 최상단으로 이동.-상단바 배경이 투명했다가 스크롤시 배경이 나타남 다운로드 -(7/31)모바일에서 여백 오류를 수정했습니다. -(8/2)모바일 여백오류 다시 수정했습니다. 애니메이션 효과를 수정했습니다. IE8호환을 위해 상단바 고정시 border-bottom이 추가되었습니다. 적용 방법 HTML/CSS 수정 - 파일 업로드 탭에서 다운받은 css 파일을 업로드합니다. HTML/CSS 수정 - skin.html에서 를 찾아 위줄을 한칸 띄운 뒤 다음 코드를 붙여넣고 저장합니다. 추가로 적용하기 추천..
티스토리 관리페이지에서 확인할 수 있는 알림 영역이 업데이트되었습니다.관련 공지 링크:http://notice.tistory.com/2188 티스토리 간담회 이후로 티스토리 개발진들이 열심히 일하시는게 눈에 띄는 것 같네요^^ 기존의 알림은 거의 대댓글(답글) 알림만 표시되었습니다.알림과 별개로 댓글, 방명록, 트랙백이 따로따로 새 소식을 전해주었는데, 이것이 알림으로 통합된 것입니다. 그럼 이제 관리페이지에서 댓글과 방명록, 트랙백은 빼도 되겠죠? . 티스토리 관리 페이지 편집 사실 티스토리 관리페이지가 편집이 되는지 모르셨던 분이 많을겁니다.그러나 관리페이지도 편집이 됩니다! 관리 페이지 오른쪽 위에 톱니바퀴 모양을 누르면 관리센터 설정화면이 나옵니다! 여기서 이제는 필요없는 댓글, 방명록, 트랙백모..
당연한 소리지만, 블로그 속도는 왜 빠를수록 좋을까요? 방문자가 내 블로그를 방문했는데 이것저것 로딩하느라 버벅거리고 느리면 블로그 내에서 다음 페이지를 탐색할까요? 그렇습니다. 블로그 속도 개선은 이탈률을 조금이라도 줄이는데 목적이 있습니다. 지난번에는 disqus플러그인 로딩시점을 조절하는 방식으로 속도개선을 해봤는데요, - 블로그 속도 개선- Disqus탭 클릭했을 때 로딩되게 하기 이번 포스트에서는 블로그 로딩속도 개선을 위해서 방문자가 내려받는 소스의 크기를 줄이는 방법을 알아보겠습니다. 티스토리에서 관리자가 압축할 수 있는 부분은HTMLCSS이미지등이 있습니다. 압축을 통해 조금이나마 다운받아야하는 소스의 크기를 줄일 수 있고, 로딩속도의 향상으로 이어집니다. 그러나 압축을 하게되면, 수정의 ..
이 글은 티스토리 앱으로 작성되었습니다.글쓰기에 모바일 웹보다 훨씬 편리하네요. 간단한 소감을 말씀드리자면. -앱 디자인은 전체적으로 플랫한 디자인으로 만족스럽습니다. -모바일에서 사진 업로드하며 글쓰기 정말 편해졌습니다. -글씨 크기나 색깔등을 변경할 수 있는점이 마음에 듭니다. -그런데 이건 티스토리 관리자를 위한 앱인거겠죠? -스킨이 적용되지 않다보니 광고도, 각종 서식도 보이질 않네요. - 댓글 푸시알림용 앱? -글쓰기 에디터만 앱으로 넣어주고 화면 출력은 그냥 웹뷰가 나을것같아요. -엔터가 여러번이 안먹혀요! 빈 줄은 공백하나 넣어주지 않으면 줄바꿈이 사라져요! -통계화면은 모바일 웹이랑 완전 똑같네요. 좀더 기능을 추가해줬으면..
Fastboot 1.6 버전에는 태블릿 크기 이상 화면에서 역동적인 상단바가 추가되었습니다. 스크롤을 하기 전에는 넓게 있다가 아래로 스크롤을 하면 좁아지는 애니메이션이 있습니다. 그런데 속도를 중요시하는 Fastboot스킨인 만큼 로딩속도에 집중하다보니 스크롤 중간에 약간의 튐현상이 있습니다. 이번 포스트에서는 간단히 튐현상을 없애고 애니메이션을 좀더 부드럽게 해보겠습니다. 간단 수정 방법 HTML/CSS수정에서 style.css 맨 아래에 다음을 추가 후 저장합니다.body{padding-top:160px}#desktopNav{top: 0px}#secondNavWrap {top: 130px}#desktopNav,#secondNavWrap { position: fixed; width: 100%; z-i..
이 글은 아래 링크에서 언급된 커스텀스킨 제작 가이드입니다. [iTIPs/Web] - Fastboot스킨을 개성있게! - 커스텀 스킨 테마 2종 (베타버전) 표준 css 파일 위 파일은 커스텀테마 베타버전에 있던 css파일을 수정하기 쉽도록 정리해놓은 파일입니다. CSS에 대해서 잘 아시는 분들은 이것만으로도 추가/수정하셔서 커스텀 테마를 만드실 수 있습니다. CSS에 대해 잘 모르시는 분들은 아래 링크에서 각 속성이 어떻게 쓰이는지 배울 수 있습니다.http://www.w3schools.com/cssref/default.asp 또한 포털사이트에 css + 속성이름으로 검색하면 한글로된 설명이 많으니 참조하시면 됩니다. 대표적으로 커스텀 할 수 있는 것들:배경background (색상, 이미지, 그래디언..
티스토리에 글을 쓸때 표를 삽입하게되면 모바일웹 화면에서 표가 가로길이가 너무 길어서 오른쪽이 잘리는 경우가 많습니다. 표가 모바일에서도 잘리지 않게 하려면 HTML편집에서 width항목을 모두 %수치로 바꿔주시면 되는데.. 그 과정이 매우 귀찮고 번거로울뿐더러 가로폭이 좁은 모바일 화면에서는 각 칸의 너비가 너무 좁아서 컨텐츠를 잘 표현하지 못하게됩니다. 표가 잘린다고 컨텐츠를 볼 방법이 없는 것은 아닙니다. 티스토리 모바일웹 스킨은 페이지의 최하단에 PC화면보기를 지원합니다. 그러나 방문자가 표를 보기위해 페이지를 끝까지 스크롤해야하고, 화면이 새로고침되게 됩니다. 사용자 경험에 안좋은 영향을 끼치게 됩니다. 블로그 관리자는 이용자들이 컨텐츠를 더 쉽게 볼 수 있도록 해야합니다. 어떻게하면 사용자경험..