고민되는 스킨선택 블로그를 시작할때 기본적으로 어떤 것을 블로깅을 하고 가꿔나갈지 충분히 고민하고 시작하는 것이 좋다. 그냥 아무거나 해보자 라는 식의 블로그는 오래가지도 못하고 스스로 지쳐 금방 접기 마련이다. 그리고 자신의 주제에 맞는 블로그 스킨을 고르는 것 또한 아주 중요하다. 내가 쓴 정보들을 잘 전달해주는 역활을 하는 스킨! 이번에는 많은 분들이 고민하고 있는 스킨 선택에 대해서 웹디자이너가 보는 적절한 선택에 대해서 정리하고자 한다. 블로그를 시작하는 분들에게 조금이나마 참고가 되길 바라며 블로깅을 시작한다. 참고로 이번 블로깅은 온전히 티스토리에서만 제공하는 스킨으로만 추천해드리며 추후 기회가 된다면 유저무료배포, 유료배포 등으로 나눠서도 한번 추천해보도록 하겠다. 브랜드 사이트 & 전문(..

스크롤바를 최상단 고정하기 인디케이터(Indicator)? 인디케이터가 무엇이냐? 하면 사전으로는 이렇다. (일의 현황·사정 변화 등을 나타내는) 지표. 그렇다 지금 필자의 블로그에 적용된 상단에 스크롤을 하면 상단에 게이지가 쌓이며 어느정도 스크롤링이 됬는지 보여지는 것이다.(물론 메뉴에도 쓰이고 다양하게 쓰인다) 스크롤바가 있는데 이게 굳이 왜 필요하느냐? 그렇다 굳이는 필요 없다. 그러나 꾸미기에 관심이 있는 분들에게 혹(?)할만한 아이템이라고 생각해서 블로깅을 하는 것이다. 따지고 보면 꾸미기 상관없이 그냥 블로깅을 해도 된다. 이것은 자기만족이라고 할 수 있다. 좀 깊이 들어가면 UX나 UI적으로는 충분히 쓸만한 아이템이라 생각한다. 과하지만 않는다면 말이다. 최근 사이트들이 많이 사용중이기도(..

게시글 리스트에 NEW 아이콘을 변경하자! 최근 카테고리의 NEW 아이콘은 변경되었지만 리스트에 NEW 아이콘 변경이 안되서 물어보시는 분들이 있어 블로깅을 한다. 필자는 리스트에 NEW 아이콘이 원래 없는 방식이라 생각을 못했는데 Square(반응형) 스킨을 사용하시는 분들에게 도움이 될만한 정보라고 생각한다. 다른 분들도 사실 요청이 있었는데 필자가 확인해볼수 없는 스킨이라 이번 블로깅을 잘 참고하면 충분히 하실 수 있지 않을까(…) 생각한다. 우선 카테고리의 NEW 아이콘이 변경되지 않았다면 링크를 타고 선행작업을 먼저 하시고 오시길 추천한다. 꼭 먼저 보고 오시길! 이쪽으로 카테고리 NEW 아이콘을 보고 왔다면 그렇다면 /body 위에 코드를 그대로 입력하면 끝! 리스트 NEW 아이콘 변경 코드 ..

티스토리에 로딩화면을 만들어보자. 우선 이 로딩화면을 추가 할때 단점부터 이야기 하자면 로딩이 필요 없는 부분(?)에서도 로딩화면이 돌기 때문에 결국 로딩이 더 길어지는 것이 사실이다. 물론 체감상 그리 큰 차이는 아니지만 수치적으로는 그렇다. 즉 바로 보여도 되는 페이지도 로딩화면이 돌기 때문에 그런 단점이 생기는 것인데 로딩 자체 역시 그리 길지 않기 떄문에 체감이 크지 않다고 말할 수 있다. 여하튼 장점과 단점이 확실하기에 이 내용을 포스팅을 할까 말까 하다가 선택은 여러분의 몫으로 남기고 로딩화면이 필요하신분들에겐 좋은 자료가 될 것 같아서 포스팅 한다. 굉장히 간단하니 쉽게 할 수 있을 것이다. HEAD와 /HEAD 사이에 추가 필자가 사용한 로딩화면 CSS 코드다. 여기에서 포인트는 .load..

티스토리 스크롤바를 꾸며보자! 예전부터 종종 스크롤바를 꾸며진 사이트를 볼 수가 있었다. 사실 스크롤바를 잘 보지 않다보니 깜빡 잊기도 하는데 지금 한번 필자의 블로그 스크롤을 보면 바뀌어져 있는 것을 볼 수 있을 것이다. 작은 디테일 부분을 꾸밀수록 사이트의 완성도를 올리는 것이다. 필자는 가급적 적은 시간을 들여 최대한의 효과를 줄 수 있는 Tip들을 소개하려고 하는데 바로 이 방법 역시 간단한 방법으로 최대의 효과를 볼 수 있을 것으로 보인다. 그럼 한번 방법을 알아보도록 하자. 필자의 스크롤 바 CODE 여기서 자신에게 맞게 바꾸기 위해서 하나씩 설명해 보자면 width 부분은 스크롤 바의 너비다. track은 경주 트랙처럼 스크롤바가 지나다니는 길을 말한다. box-shadow 를 통해 트랙의 ..

구글애드센스 광고배너 제가 티스토리를 하면서 느낀건 정말 많은 사람들이 구글애드센스를 달기 위해서 티스토리를 하고 있는 것 같아요. 그것이 나쁘다고는 생각은 하지 않지만 광고배너만을 위해 별 내용없는 블로깅을 위해 애쓰는 건 애드센스에도 본인에게도 아무 도움이 안된다고 말하고 싶습니다. 우선 제목과 같이 애드센스 통과 기준에 대해서 궁금할만한 점을 알려드릴게요 제가 2018년 6월 최근에 걸친 내용을 토대로 하니 많은 참고가 되셨으면 좋겠네요! 이제 궁금증은 애드센스 통과 기준이 무엇인가 일텐데.. 구글애드센스를 달게 된 포스팅 갯수를 말씀드리자면 포스팅은 55개 궁금해 하시는 글자수는 1,000자는 넘는것도 아닌것도 많았습니다. 다만 그 정보에 필요한 이야기를 다 담으려고 노력했습니다! 또 물어보는 이..

티스토리 카테고리 NEW 아이콘 변경 이전에 카테고리 아이콘과 게시물 숫자를 표시하는 방법을 블로깅 했는데 이번에는 NEW 아이콘을 변경하는 방법을 알려드릴려고 한다. 기존의 회색의 NEW아이콘은 디자이너로서는 솔직히 이해할 수 없는 아이콘이긴 했다. 물론 애초에 NEW아이콘이 나오지 않게 설정된 점을 생각해보면 그럴만한 뭔가 이유가 있는 것 같긴 한데 여전히 이해는 안간다. 아무튼 먼저 자신이 원하는 NEW 아이콘을 티스토리 파일업로드를 통해 올려두도록 하자. 파일 업로드는 관리자 모드 - 스킨편집 - HTML편집 - 파일업로드를 통해 올리면 된다. 그럼 이제 아이콘을 변경할 코드를 넣어야 한다. 애초에 카테고리에 아이콘이 없는 분들은 아이콘이 나오게 하는 설정을 해야하므로티스토리 카테고리 아이콘 표시..

드래그 컬러 변경하기 명품의 힘은 디테일에 있다는 말이 있다. 디자인역시 마찬가지고 티스토리 역시 그렇다. 물론 디테일을 챙긴다라는건 힘들고 어렵고 또 귀찮은 일이다. 하지만 힘들지 않고 쉽게 디테일을 챙길 수 있는 방법 중 하나인 바로 마우스 드래그 컬러를 설정해 주는 것이다. 우리는 글을 읽을 때 자연스럽게 드래그를 하게 된다. 기본 설정된 파란색 컬러가 대표적인데 자신의 티스토리 설정에 맞게 컬러를 변경한다면 사용자가 드래그 하면서 글을 편하게 읽을 수 있게 할 수 있다. 지금 드래그 이 사이트의 드래그 컬러를 보면 분명 다를 것이다. 드래그 컬러 변경 CSS ::selection { background:#3db39e; color: #fff; text-shadow: none; } ::-moz-sel..

마우스커서를 변경해보자지금 이 티스토리의 마우스 커서를 보면 "어? 내 시스템 마우스 커서거 아니네?" 라고 할 것이다. 이 마우스 커서는 이 블로그에서만 작동되는 것이고 과한 커서만 아니라면 유저에게 새로운 경험을 하게 해줄 수 있다. 그리고 사이트의 퀄리티도 올릴수 있다. 그것도 아주 간단하게 할 수 있다.우선 다양한 마우스커서를 제공하는 사이트를 방문해 보도록 하자.커서포유 바로가기사이트에 가면 왼쪽에 다양한 카테고리가 있다. 너무 많기 때문에 즐거운 고민을 하며 골라보도록 하자. 참고로 필자는 카테고리 Cursors/Pointers 에서 2번탭에 가면 있는 마우스 커스를 사용해봤다. 나중에 질리게 되면 다른 마우스를 사용할 수도 있다.이제 하단으로 조금 더 내려가다보면 스크린샷과 같이 CSS 코드..