얌체 블로거? 좀 격한 표현을 사용하고자 했지만 이정도로 해둡니다. 많은 블로거들이 볼 수 있도록 매일 발행일자를 변경하겠습니다. 이 글의 목적은 다른 블로그에서 글을 전체를 복사해서 자신의 블로그에 붙여넣고 사용하는 많은 블로그들에게 경고를 하기 위한 것입니다. 앞으로 발견되면 이런 식으로 공개할 것이며 이런 블로거들이 사라질 때까지 이 글을 내리지도 않겠습니다. 이런 블로거에게 명예라는 것이 있을 수 없기에 캡쳐한 이미지를 그대로 공개합니다. 블로그 이름은 #####. 티스토리 도메인은 #####. 블로그 링크는 공개하지 않습니다. 방문을 유도하고 싶지 않기 때문이죠. 우선 이 사람의 가입일자는 2012년 3월 12일로 예상됩니다. 첫 글이 올라온 날짜입니다. 1년도 안돼서 방문자가 97,609,28..
데모 블로그는 http://saaien.tistory.com/ 이전 공개 스킨에 비해서 좋아졌습니다. 그래서 기부 금액을 증액합니다. 이곳의 글을 참고하시고 1만원을 기부한 다음 스크린샷을 첨부해주시면 이메일로 보내드립니다. 저는 포토샵 전문가이니 뽀샵처리하면 다 보입니다. ^^ 이메일--> martian36@naver.com 이 스킨은 트위터 부트스트랩의 Fork 프로젝트인 Fbootstrapp을 기반으로 만든 것으로 초기화면에서 티에디션을 사용할 수 없는 문제로 인해 모바일용으로 만들지 않았습니다. 페이스북의 타임라인 형태입니다. 사용법은 다음과 같습니다. http://martian36.tistory.com/841
저 혼자만 쓰려고 만든 스킨인데 여러 분들이 원하시니 현재 사용중인 티스토리 스킨을 공개합니다. 다만 두가지 조건이 있습니다. 하나는 스킨 하단에 희망나눔 위젯을 설치하는 것이고 두번째는 희망나눔 기부하기에서 원하시는 곳을 선택해서 5,000원을 기부하시고 기부한 내역을 이메일로 보내주시면 메일로 스킨을 보내드리겠습니다. 제가 만든 스킨은 이전에 공개했던 버전을 새롭게 만든 것입니다. 모바일 스킨이며 아직 티스토리가 사용자 정의 모바일 스킨을 허용하지 않지만 조만간 허용하겠죠? 모바일 스킨이란 화면 폭에 따라서 내용이 변하도록 설정한 스킨입니다. 화면폭을 줄이나 이미지 배너가 사라졌죠? 구글 광고도 하나만 나옵니다. 희망나눔 기부 방법은 다음과 같습니다. 희망나눔 사이트에 접속 http://hope.ag..
현재 티스토리 블로그가 커스텀 모바일 스킨을 지원하지 않고 모든 포털 사이트의 블로그가 그렇지만 모바일로 접속하면 일방적인 디자인으로 나타나고 있습니다. 저는 워드프레스 책을 쓰고 있는데 9월에 워드프레스 책이 쏟아져 나온다고 합니다. 제 책도 그 즈음에 나올 것이고 자유로운 디자인이 가능한 워드프레스 블로그가 많이 출현할 듯 합니다. 티스토리도 하루 빨리 커스텀 모바일 스킨이 가능한 제도 변경을 바라면서 워드프레스에 적용할 디자인을 공개합니다. 물론 워드프레스는 페이지도 만들 수 있기 때문에 블로그가 아닌 일반 웹사이트도 만들 수 있어서 디자인이 아주 달라질 것입니다. 티스토리는 제한이 있기에 위와같은 모양으로 밖에 나오지 못합니다. 이 스킨에 사용된 트위터 부트스트랩은 하나의 플랫폼입니다. 웹디자인에..
방명록, 태그, 공지사항, 사이드바 제목 부분에 리본을 추가한 버전입니다. 글자의 색상과 배경색상을 변경하려면 #sidebar h3를 검색하여 색상코드를 바꿔주면 됩니다. 1은 글자색상이고 2는 배경색상입니다. 위와 같이 변경했을때 아래처럼 나오게 됩니다. 글자의 색상이 짙으면 배경 색상은 옅은 색으로 해야하고 서로 대비되는 정도가 높아야합니다. 사이드바가 양쪽에 배치된 버전입니다. 글자와 배경색상을 변경하려면 #sidebar-one #category로 검색하여 1에서 글자색상, 2에서 배경색상을 변경하면 됩니다.
소셜네트워크 아이콘 재배치 오늘 보니 티스토리 소셜네트워크 아이콘들이 작아지면서 글자도 생기고 다음뷰온 버튼과 간격이 많이 떨어져서 보기가 좋지 않네요. 이것은 티스토리 센터에서 보내진 것이라서 수정하기가 힘들죠. 하지만 CSS에서 !important를 사용하면 간단히 해결됩니다. 1부분을 요소검사하면 tt-sns-wrap이라는 클래스 선택자로 CSS에서 관리되는데 높이가 72픽셀입니다. 이것을 수정해줘야죠. 관리센터의 CSS편집창에서 적당한 곳에 위처럼 .tt-sns-wrap { height:20px !important; }를 입력해주고 저장하면 됩니다. !important가 들어가면 티스토리에서 지정한 설정값이라도 내가 설정한 값이 우선 적용됩니다. 재배치되었습니다. 헤더 타이틀 배경이미지에 링크걸기..
티스토리 블로그 스킨을 설치하고나면 잘 안쓰이는 메뉴가 있는데 이를 제거하고 카테고리의 다른 항목을 메뉴에 추가하고 싶을 때가 있습니다. 그런데 어떤 스킨은 메뉴수정이 쉽지가 않습니다. 티스토리 블로그 스킨 메뉴의 일부는 이미지를 사용하여 현재 보여지는 페이지를 표시하고 있습니다. 즉 현재 선택된 메뉴는 다른 색의 이미지로 표시되고 해당 페이지가 열려있죠. 그래서 예를들어 아래처럼 방명록메뉴를 클릭했다면 그에 해당하는 배경이미지가 메뉴에 나타납니다. 이러한 메뉴에 카테고리의 항목을 추가하거나 특정한 포스팅 글이 나오도록 메뉴를 추가할 수가 있습니다. 이것은 자바스크립트를 사용하여 현재 선택된 메뉴에 아이디 선택자를 추가하고 CSS에서 해당 아이디 선택자에 배경이미지 삽입하는 방식입니다. 그래서 기존에 있..
사이드바를 컨텐트 영역의 양쪽에 배치한 버전입니다. 이곳 을 클릭하면 테스트 블로그로 이동합니다. 사이드바가 좌측에 있더라도 html 코드상에는 컨텐트 다음에 나오고 검색엔진이 중요시하는 컨텐트가 앞서 나오므로 검색엔진 최적화시킨 스킨입니다. 이곳 의 글을 참고하세요 . 이 스킨은 사이드바에 넓은 사이즈의 광고를 배치할 수 없고 스카이스크래퍼형태의 세로로 긴 광고를 삽입할 수 있습니다. 물론 이전 버전들도 스카이스크래퍼는 배치할 수 있습니다. body 태그의 배경 색상을 변경하고자 하는 경우는 배경이미지 파일을 변경해야하므로 이전 글을 참고하세요. 스카이스크래퍼 형태의 광고를 삽입하려면 다음과 같이 설정합니다. 관리센터에서 사이드바 메뉴를 선택하면 사이드바가 두개밖에 없습니다. 처음 설치하고나면 사이드바..
이전 글 의 3단 스킨 기본에서 컨테이너의 배경 이미지 박스를 제거했습니다. 메뉴를 헤더 아래로 이동했으며 서치박스도 메뉴와 나란히 배치했습니다. 사용방법은 이전글을 참고하세요. 컨테이너의 둥근 모서리의 배경이미지를 만드는 8개의 작은 이미지는 투명이 가능해서 body의 배경색을 변경하거나 이미지를 삽입해도 문제가 없었지만 위 스킨의 둥근 모서리는 하나의 이미지 파일을 사용해서 만든 것이기 때문에 투명은 안되므로 body의 배경색을 변경할때는 이미지파일의 배경색도 변경해줘야합니다. 첨부파일의 images폴더에 corner.psd파일을 포토샵에서 수정해주면 됩니다. 1의 배경레이어를 선택하고 색상도구의 전경색을 클릭하여 컬러피커가 나오면 색상코드를 body의 배경색으로 사용할 색상코드로 입력하고 OK클릭합..
이전글에서 마무리한 2단형 스킨을 3단형으로 변경하였습니다. 이 3단 스킨을 토대로 여러가지 형태로 변경하여 사용할 수 있습니다. 2단형은 물론 1단형으로도 변경이 가능하며 컨테이너 영역의 배경이미지를 클래스 선택자로 변경하였으므로 컨테이너 영역의 배경이미지를 제거하고 사용하거나 해더영역과 푸터(footer)을 컨테이너영역에서 분리하여 별도의 배경이미지를 추가할 수도 있습니다. 메뉴도 원하는 곳에 배치할 수도 있어서 헤더와 컨테이너가 분리된 경우 그 사이에 배치할 수도 있습니다. 이 하나의 스킨으로 여러가지 형태로 변경할 수 있으나 스킨만 사용하시려는 분을 위해서 여러가지 형태로 변형하여 올리겠습니다. footer 부분의 크레딧은 가능한한 지우지 말고 사용해주시길 부탁드립니다. Redesigned by ..
그동안 CSS 기초부분에서 진행한 내용을 기반으로 티스토리 블로그 스킨 만들기를 진행하였는데 사실 블로그 스킨 만들기는 대단한 CSS 기술이 사용되는 것은 아닙니다. 기초적인 레이아웃에 관한 지식만 있으면 누구나 스킨을 만들 수 있습니다. 가장 많이 사용하는 것이 div 태그를 이용하여 요소를 배치하고 마진과 패딩을 이용하여 세부 조정을 하는 것입니다. 인터넷 익스플로러가 CSS3의 둥근 모서리와 그림자 효과를 지원하지 않는 관계로 글 내용이 많이 길어졌지만 둥근 모서리 이미지를 만들어 웹페이지의 배경을 삽입하는 것은 아주 많이 사용하는 방법입니다. 인터넷 익스플로러 10버전이 나온다해도 다른 웹브라우저에서처럼 반강제적으로 업그레이드를 하도록 하지 않는 이상 구버전의 인터넷 익스플로러는 계속 사용될 것이..
최종 마무리 단계이므로 아이콘을 삽입하고 폰트 사이즈를 변경하였습니다. 이곳 을 클릭하면 진행되고 있는 테스트 블로그로 갑니다. 메뉴의 애니메이션 되는 배경이미지의 사이즈가 커서 헤더 영역에 배치하기는 부담이 될 것 같아 좌측 상단에 배치하였습니다. 이번 글에서는 상단에 배경이미지 삽입하고 메뉴를 이동 배치하는 방법과 폰트 사이즈 변경을 알아봅니다. 특히 중요한 것은 티스토리의 CSS는 스킨 자체에 포함된 CSS로 통제되기도 하지만 일부 CSS는 티스토리(다음)센터에서 통제를 하기 때문에 수정이 안되는 것도 있습니다. 하지만 CSS는 금지되지 않는 이상 !important라는 값을 이용하여 센터에서 통제되는 CSS도 스킨에서 통제할 수가 있습니다. 센터에서 통제하는 대표적인 CSS가 다음뷰 애드박스인데 ..
티스토리 블로그 스킨 만들기이지만 구글 광고를 두개 삽입하였으니 나머지 하나 마저 삽입하는 방법을 알아봅니다. 이전 글에서 1의 리본 끝부분이 너무 튀어나온 것 같아서 3픽셀 줄였습니다. 구글광고는 디스플레이 광고를 3개까지 달 수 있고 링크단위광고는 3개를 더 추가할 수 있습니다. 다음 뷰 애드박스를 설치할 경우 2처럼 고정되어 수정할 수 없게 되어있습니다. 구글광고를 설치하기 좋은 자리는 컨텐트영역 상단이므로 3의 자리가 적당합니다. 다음뷰 애드박스를 사용하지 않더라도 구글광고를 삽입하자면 2나 3의 위치가 되고 그러자면 글의 일부가 2나 3의 위치로 올라가게 됩니다. 글이 공간을 다 채우게 되면 다행이지만 이미지부터 올린다든가 글이 짧고 그다음에 이미지가 올라온다면 공간이 비게 되죠. 그래서 애드박..
이번 글에서 만들게 될 제목 타이틀의 리본입니다. 평범한 제목부분과 위처럼 리본이 있는 것과는 블로그 전체적인 이미지가 아주 다르게 보입니다. 이 리본은 포토샵으로 만든 하나의 이미지를 사용합니다. 제목의 배경은 이미지가 아니라 background 컬러 속성을 사용합니다. 그래야 제목이 길어져서 두줄로 되면 모든 글자에 배경색이 적용됩니다. 그리고 bottom-border 속성을 사용하여 1픽셀의 빨간색이 추가됐습니다. 사용한 이미지는 2부분의 삼각형과 그림자입니다. 이 스킨은 스킨위자드를 사용할 수 있어서 컨텐트의 게시글 영역을 변동 시킬 수 있기 때문에 이 제목 리본의 배경과 그림자부분도 같이 변동되어야합니다. 이전 글에서 스킨위자드를 설정하는 방법을 알아보았으니 전 과정을 거치셨다면 쉬운 작업이 됩..
이번 글에서 만들게 될 메뉴바입니다. 이곳 을 클릭하면 테스트 블로그로 이동합니다. 메뉴에 마우스 오버하면 서브 메뉴가 애니메이션 되면서 나옵니다. 구글 광고에 가려지는 드랍다운 메뉴는 금지이므로 메뉴를 위로 나오게 하는 방법도 있습니다. 웹사이트에서 메뉴의 배치를 주로 헤더영역에 하는 것은 검색엔진이 내 웹사이트를 검색할때 최우선 접하는 곳이기 때문입니다. 대부분의 블로그는 카테고리라고 하여 메뉴역할을 하는데 사이드바에 배치합니다. 내 글에서 중요한 부분은 헤더영역에 메뉴를 두는 것이 검색엔진 최적화(SEO; Search Engine Optimization)에 도움이 됩니다. 메뉴는 웹사이트에서 아주 중요한 역할을 합니다. 방문자가 사이트를 방문하면 가장 먼저 찾는 것이 메뉴입니다. 그래서 웹디자이너들..
이번 글에서 만들 메뉴바입니다. 이미지로 보면 단순하지만 이곳 을 클릭하여 위 테스트 블로그로 이동하고 메뉴에 마우스오버하면 홈에 있던 회색의 박스가 애니메이션 되면서 해당메뉴로 이동합니다. 이것은 제이쿼리 플러그인을 사용한 것입니다. 이러한 제이쿼리 플러그인을 Lava Lamp 라고 합니다. 이것은 메뉴의 글자의 크기에 따라서 사각형이 변하기 때문에 이름이 붙여진 것입니다. Lava Lamp란 용암이 물흐르듯 움직이는 램프인데 이것에서 이름을 붙인듯합니다. 제 블로그에 사용한 것도 제이쿼리 플러그인을 사용한 것인데 이것을 설치하려면 메뉴를 html 편집창에서 편집을 할 수 있도록 되어있어야 하는데 지금 수정하고 있는 스킨은 메뉴 편집이 안되고 관리자 메뉴의 화면설정으로 들어가서 메뉴를 삽입하거나 제거하..