티스토리 404 페이지 꾸미기

티스토리 404 페이지 꾸미기

티스토리 글을 삭제하거나 비공개 처리하면 보이는 페이지입니다. 투박한 이미지와 함께잘못된 주소이거나, 비공개 또는 삭제된 글입니다.라는 글을 보여줍니다. 글 내용을 감싸는 컨테이너 안에 들어가는 것도 아니라서, 본래 의도했던 모습과는 많이 다른 페이지가 보이게 됩니다.간단한 스크립트와 css를 통해 이를 수정할 수 있습니다. 123456$(function () { var d = $("article_container"), e = $(".absent_post").length, f = $(".article_container div"); 0
인덱스 페이지에 새 글 표시하기

인덱스 페이지에 새 글 표시하기

만약 인덱스 페이지를 글 목록이 아닌 다른 것으로 꾸민다면, 아마도 블로그에 새 글이 올라왔을 때 글 목록으로 가지 않는다면 확인할 수 없다는 건 아쉬운 점일 수 있다고 생각합니다.티스토리에서 제공하는 간단한 스크립트를 응용해서 새 글이 표시되도록 해봤습니다. 두 가지 경우를 설명해보고자 합니다. 1. 새로운 글이 올라오면 글 목록을 표시하기2. 새로운 글이 올라오면 인덱스 페이지에서 카테고리 목록으로 넘어가기 첫 번째 방법은 인덱스 페이지를 최대한 활용할 수 있고, 두 번째 방법은 간단합니다. 새로운 글이 올라오면 글 목록 표시하기 1234567891011 최근에 올라온 글 . Colored by Color Scriptercs티스토리에서 제공하는 최근 글 치환자입니다. 만약 이미 이 치환자를 사용하셨다..
티스토리 댓글 정렬 버튼 만들기

티스토리 댓글 정렬 버튼 만들기

- 티스토리의 기본적인 댓글 정렬 방식. 먼저 달린 댓글 순으로 정렬됩니다. 아래 작성될 내용은 저의 댓글 형식을 기준으로 설명합니다. 본인의 html과 비교해서 적절히 적용해주세요.1234567891011121314151617181920212223242526272829303132333435363738394041 정렬 : 최신순 오래된순 Colored by Color Scriptercs 댓글을 최신순으로 정렬하고 싶은 경우 댓글 목록들의 부모의 css를 변경합니다.1234.comments-list ol{ display: flex; flex-direction: column-reverse} Colored by Color Scriptercsflex-direction 항목을 보시면 아시겠지만, 내부의 항목들을 ..
180821 티스토리스킨 #5 제작 일지

180821 티스토리스킨 #5 제작 일지

테마 변경http://marshall-ku.tistory.com/104 내년을 기약하며 여름의 색을 벗고 새로운 색을 입혔습니다. 댓글 정렬 버튼 수정더는 댓글이 하나일 때 정렬 버튼이 나타나지 않습니다. 배너 변경이제 배너가 스크롤을 따라 천천히 올라갑니다.고정된 요소를 통해 비교해봤습니다. 모바일에선 좀 부드럽지 않게 작동하는 것 같아 고민 중입니다.근데 모바일에선 그냥 애니메이션들이 거의 부드럽게 표현되질 않더군요..;; 날짜 표시 변경뭐하라님의 글을 참고했습니다. 인덱스 페이지 변경Contact를 제일 아래로 내리고, 이미지들의 높이를 400px에서 100vh로 변경했습니다. 기타 - html 내부의 태그들을 손보고, 귀찮아서 미뤄뒀던 작업인 img들에 alt속성 추가하는 작업을 끝냈습니다.- L..
스킨 테마 변경!

스킨 테마 변경!

인덱스 페이지를 변경하고 싶은데 우째 변경도 힘들고 여름도 간 기분이고 해서 전체적인 테마를 변경해봤습니다. summer nights를 지금 버전으로 업데이트해놓고, lovely skin 업데이트한 뒤에 새롭게 만들든지 인덱스 페이지를 갈아엎든지 할 것 같습니다. 사용된 영상은 언제나 그래 왔듯 트와이스의 what is love mv에서 가져왔습니다.사용한 그래디언트 등은 추후 정리해서 올려볼 예정입니다.
180816 티스토리 스킨 #5 제작 일지

180816 티스토리 스킨 #5 제작 일지

인덱스 페이지 꽤 많은 변화를 줘봤습니다. 먼저, 앞선 인덱스 페이지는 정말 아무 기능도 하지 않았으나, 이제 스크롤을 내리면 이런저런 요소들이 보이도록 했습니다. 아직 시범 단계라 디자인이 아주 엉성하긴 합니다만, 인기 글의 목록을 추가하고 about 페이지를 옮겨왔습니다. 아직 내부에 어떤 요소가 들어갈지는 고민 중이라, 큰 변화가 있을듯합니다. 인기 글 인기 글 리스트를 넣었습니다. 인기 글을 넣으며 최근 글/댓글은 탭으로 분리하는 방식을 선택할까 고민을 잠깐 했으나, 인덱스 페이지의 새로운 글 목록도 같이 손봐야 해서 일단 미뤄뒀습니다.인기 글의 목록은 6개인데, 최근 글/댓글의 목록은 5개라 인기 글을 줄일지, 최근 글을 늘릴지 고민 중입니다. 글에 사용되는 디자인 가장 먼저, h2의 디자인을 ..
180811 티스토리 스킨 #5 제작 일지

180811 티스토리 스킨 #5 제작 일지

원래 익일 내려올 예정이었으나, 이 무더위에 도무지 못 있겠다고 강력하게 주장해서 오늘 부산에 내려왔습니다. 공기부터 다르네요. 공지 목록에도 썸네일이 보이도록 했습니다. 익스플로러, 엣지에서 하단에 지원되지 않는 브라우저라는 문구를 고정해놨습니다.저 브라우저를 쓴다고 글을 읽는데 크게 불편함을 주진 않지만, 하단에 50px 잡아먹는다고 글을 읽는데 크게 불편함을 주는 것도 아니기에 적절하다고 생각합니다. 외에도 몇 개의 작은 문제들을 해결하고, 데모페이지를 만드는 작업을 하는 중입니다.- 가장 큰 문제는 공지사항 글이 안 보인다는 점이었는데, 이때까지 공지를 쓴 적이 없어서 따로 영역을 만들어야 하는 줄 몰랐습니다...ㅋㅋ;; 이하 내용은 스킨에는 적용되지 않고, 제 블로그에만 적용되는 변경사항입니다...
티스토리 스킨 #5 마무리

티스토리 스킨 #5 마무리

들어가며첨부할 사진이 없어, 인덱스 부분 손보면 써야지 하고 열심히 포토샵질했는데 아직 쓸 곳을 찾지 못한 비운의 로고를 썸네일에 삽입했습니다. 뭔가 앞선 lovely skin처럼, '삽질을 시작하는 걸 보니 멈춰야겠다.'가 아니라, '이 정도면 충분한 것 같다.'라서 멈추는 거라 조금 더 기분이 좋네요. 테스트 과정에서 여러 가지 이유로 폐기처분이 된 아이템들이 매우 아깝긴 하지만, 천천히 어떻게 써먹을지 궁리를 해보기로 하고, 일단 마무리를 짓기로 했습니다. 바뀐 점 머리말 디자인을 세 가지 추가했습니다. 스크롤이 되면 상단에 고정되는 h1 -순수 css로만 작업하다 보니 지원이 안 되는 브라우저가 간혹 있을 수 있습니다. can i use 항목 참조 꽤 흔한 디자인의 h3 형광펜으로 그은듯한 h4 ..
180808 티스토리 스킨 #5 제작 일지

180808 티스토리 스킨 #5 제작 일지

배너 영상의 길이를 늘이고, 배너 부분에서 헤더의 색상은 흰색이 되도록 했습니다. 진행 과정에서 땀똔님의 글(티스토리를 동영상 미디어 서버처럼 사용하기..)을 참조했습니다. 노래가 조금 부자연스럽게 잘리긴 했는데, 노래를 살리려고 영상까지 이상해질 순 없는 노릇이라;; 예전 스킨과 마찬가지로 html의 class 변경을 통해 간단하게 1단과 2단 사이 변형이 가능하도록 수정했습니다. 크롬 개발자 도구로 html의 class를 col-2로 변경하시면 확인하실 수 있을 겁니다. 네비바의 스크롤 바를 변경했습니다. 스크립트를 이용해 모든 브라우저에서 똑같은 스크롤 바가 보이도록 하였습니다. 이 작업을 하려면 모든 브라우저에서 스크롤 바를 숨길 수 있는 overflow:hidden을 함께 사용해야 해서 본문에는..
블로그 이사갔습니다 (클릭)