본문 바로가기

Tech-tips/Skin how

운영체제 별 시스템 폰트 적용 블로그에서 보이는 폰트 같은 것에 별다른 관심이 없다면 모든 운영체제에서 굴림체로 뜨게 할 수도 있다. 그러나 전 우주의 평화와 번영을 위해서 그런 일은 삼가토록 한다. 요즘은 시스템에서 기본으로 제공하는 폰트도 나쁘지 않은 편이므로 양심이 있다면 시스템 폰트를 불러오도록 설정해주는 것이 좋다. 특히 운영체제에 따라서 지원하는 기본 시스템 폰트가 다르므로 font-family를 지정할 때 신중하게 하여야 한다. - 시스템 별로 기본 지원하는 한글 폰트 목록 - 윈도우xp - 아직도 사용 중이라면 자연사 박물관에 자리 마련 가능윈도우 비스타,7,8 - 맑은 고딕 OS X 라이언 (10.8) - 애플 고딕OS X 마운틴 라이언 (10.9) - 애플 산돌 고딕 네오 우분투 - 나눔고딕 안드로이드 4.4 이전 .. 더보기
티스토리 에디터 클래스 분석 스킨 수정을 하다 보면 다른 부분은 건드리기 싫고 딱 본문에 나오는 이 부분만 바꿔보고 싶다는 생각을 할 때가 있다. 이를 위해서 몇 가지 css 셀랙터가 필요한데 이 기회에 정리를 해보았다. 티스토리 공식 스킨 가이드에는 더 보기 접기 부분만 나와 있기 때문에 좀 불만이 있는 부분이기도 하다. tt_article_useless_p_margin→ 티스토리 글 설정에서 문단 간격 없음을 선택하면 자동으로 감싸지는 div. 의외로 활용도가 많고 스킨 구조에 상관없이 딱 글 부분만 선택해서 css 적용하기 유용한 셀렉터 이므로 왠만하면 이 옵션을 켜는게 좋다. 물론 이걸 안 켜 놓으면 문단 사이 간격이 어마어마하게 넓어지기 때문에 이미 다 사용하고 있는 기능이라고 본다. 참고로 문단 간격 없음을 설정하지 않으.. 더보기
디스커스 코맨트 갯수 표시 api 적용 디스커스에서 기본으로 제공하는 코맨트 갯수 api를 블로그에 적용 하였습니다. 코드는 어이가 없을 정도로 간단합니다. 적당한데 붙여 넣어주시고 여기다가 스타일만 적용 하면됩니다. 코맨트 갯수를 누르면 디스커스 입력창으로 자동으로 이동합니다. 원한다면 자바스크립트를 사용해서 애니매이션 스크롤을 적용할수도 있겠내요. 아마도 티스토리 기본 댓글은 엑션트레일에서 갯수를 나타내어 주는 기능이 있지만 디스커스는 없어서 아쉬운 분들도 계실것 같은데 api만 활용하면 가능합니다.심지어 게시글에서만 되는게 아니라 코드를 올바로 설치하셨다면 블로그 전반에서 다 작동합니다.제 블로그는 티에디션에도 디스커스 코맨트 숫자가 뜹니다. api를 활용했습니다. 코드는 위에서 사용한것과 동일 합니다. 코맨트 카운터에 뜨는 문구는 디스.. 더보기
네이버 블로그에 원형 프로필 사진을 넣어보자 네이버에 프로필 사진을 넣을때는 용량제한이 아주 심합니다. 일반이미지 이면 별 상관없긴 하지만 GIF이미지는 기준 용량에 맞추면 화질열화가 아주 쩔게 됩니다. 이를 어떻게 우회할지 고민을하다가 그냥 기본 프로필 위젯에서 사진을 꺼버리고 별도로 프로필 이미지를 만들어 넣은것이 현재 제 네이버 블로그 스킨의 형태입니다. 그리고 한가지 일반 프로필 넣는 방식과 다른점은 원형 테두리 안에 들어가 있다는 것이죠. (물론 IE8이하에서는 네모 낳게 보이겠지만... 네이버는 IE6쓰는 사람이 잔뜩 오잖아? 아마 안될거야) 원형 테두리는 CSS3 속성인 border-radius를 이용하면 구현이 가능합니다. 사실 원형 이미지를 쓰면 잘리는 부분이 너무 많아서 그다지 좋다는 것은 느끼지 못하겠던데, 이전까지의 웹 환경에.. 더보기
티스토리 스킨 강좌 - 중복사용이 가능한 사이드바 모듈 티스토리 기본 스킨 사이드바를 기준으로 보면 프로필, 공지사항, 카테고리. 관리자 메뉴, 검색, 카테고리, 태그박스, 최신글, 최신댓글, 최신트랙백, 아카이브, 달력, 링크, 방문자수가 있습니다. 이 중에서 프로필, 방문자수, 카테고리는 반복사용이 가능합니다. 그러나 나머지 요소들은 반복사용이 불가능합니다. 하지만 사이드바를 여러개 생성한 뒤에 복제를 하면 중복으로 사용할수 있는 요소도 있습니다. (ex 공지사항) 그러나 검색 모듈은 중복으로 사용이 불가능합니다. 검색모듈을 여러개 생성하면 제일 첫번째 검색 모듈만 작동합니다. 특히 검색 모듈은 s_sidebar 안에 있지 않으면 작동자체를 안 합니다. 카테고리는 테이블로 구성된 ##_category_##와 리스트로 구성된 ##_category_list_.. 더보기
티스토리 스킨 강좌 - 로그인 했을때만 보이는 관리자메뉴 티스토리는 관리자 메뉴는 비로그인한 사용자한테도 보이는 이상한 구조를 가지고 있습니다. 아마도 관리자 메뉴를 통해서 로그인을 하게 되어 있는 구조 때문에 이렇게 만들어 놓은것 같습니다. 하지만 왠만하면 관리자 관련 메뉴는 타 사용자에게 보이지 않았으면 하는게 사람 마음 입니다. (아니면 저만 보기 싫을수도 있고요) 게시글 작성시 관리자에게만 나타나는 메뉴의 치환자로 s_ad_div가 있습니다. 보통 글의 맨 상단에 기본으로 추가가 되는데요, 이 안에 관리자 메뉴를 넣어주면 됩니다. 로그인 시 비 로그인 시 이렇게 하면 게시글 관리자 메뉴는 로그인 한 사용자 한테만 나타나므로 블로그 운영자만 이 메뉴를 볼 수 있습니다. 더보기
Addthis Smart Layer 설치/설정/활용 제 블로그에는 Addthis smartlayer 가 달려있습니다. 블로그의 왼쪽 상단과 오른쪽 하단에 뜨는 것인데요, 왼쪽 상단은 공유버튼, 오른쪽하단은 추천게시글이 뜹니다. 물론 기본제공하는 스마트레이어 같은 경우에는 공유버튼, 팔로우버튼, 추천게시글, 추천 컨텐츠 부분이 뜹니다. 자신이 필요한 부분만 선택해서 적용이 가능하기 때문에 필요한 것만 설치했습니다. 이렇게 스마트 레이어는 잘 적용해두면 활용도가 높습니다. 이제 Addthis smart layer의 설치 방법을 알아보도록 하겠습니다. 1. 설치 일단 설치 방법부터 알아보도록 하겠습니다. 일단 Addthis 사이트에 접속합니다.http://www.addthis.com/스마트레이어를 설치하려면 회원가입부터 해야 합니다. 회원가입을하면 스마트레이어.. 더보기
티스토리 툴바에 스타일 적용하기 티스토리 화면의 오른쪽 상단에는 다음과 같은 툴바가 있습니다. 다음과 티스토리 메인화면으로 바로가는 버튼과 자신의 블로그를 관리할수도 있고 링크를 추가 하는 버튼과 심심하면 누르게 되는 렌덤 버튼이 존재하죠. 스킨에 웹폰트를 적용해도 이 부분은 바뀌지 않습니다. 사실 스킨 치환자에 저것을 설정하는 부분도 없고요. 저것을 보기 싫어서 설정에서 색상을 투명처리 시키거나 아예 CSS 오버라이드로 꺼버리시는 분들이 종종 있습니다. 그렇지만 그렇게하면 저같이 심심할때 랜덤 블로그 룰랫 돌리는 경우에는 굉장히 귀찮아 집니다. (그래서 되도록이면 툴바는 씁시다 -0-) 하지만 툴바는 끼고 살아야겠고 폰트는 못 나서 보기 싫으시다고요? 그래서 제가 삽질을해서 폰트 변경법을 알아냈습니다. 뭐 대단한건 아니지만 모르시는 .. 더보기
블로그 파비콘 쉽게 제작 하는 방법 포토샵은 ico포맷을 지원하지 않아서 파비콘을 만드려면 따로 ico플러그인을 설치 해줘야 합니다. 하지만 이렇게 번거로운 작업을 할 필요없이 요즘은 웹에서도 파비콘 제작이 가능합니다. 간단하게 아이콘으로 쓸 png파일을 만든 뒤에http://www.icoconverter.com/에 업로드 하면 됩니다. 그러면 변환된 ico파일을 다운로드 받을 수 있습니다. 더보기
스킨 만들기 강좌 - 1. HTML 기초 저도 그렇게 웹에 대해서 뛰어난 편은 아닌 초보 웹개발자입니다. 기껏해야 만들줄 아는 것은 위젯같은 간단한 웹앱이나 고작 티스토리 스킨 만드는 것 입니다. 그래서 부족한 부분이 있다면 지적해주시면 겸허히 받아 드리도록 하겠습니다. 티스토리로 이주 해 오신 분들은 여러가지 이유가 있어서 오셨을 겁니다. 무제한 저장 용량일수도 있고, 자신만의 도매인을 쓸수도 있는 자유로운 환경이거나, 수많은 플러그인의 다양한 기능, 여러 포털 블로그와는 차별화된 자유도, 또는 자유로운 스킨 제작일수도 있을겁니다. 저 같은 경우에는 오로지 스킨을 자유롭게 쓰고 싶다는 일념으로 티스토리에 이주 해왔습니다. 그러다 보니 하라는 블로그 관리나 포스팅은 안하고 허구한 날 스킨이나 뜯어 고치고 있습니다. -_-;;;; 어쨌든 서론은 .. 더보기