티스토리 1단 스킨 본문 가로사이즈 줄였어요 기존에 2단 스킨을 쓰다가 1단으로 바꾸게 되면서 본문의 가로사이즈가 확 늘어났습니다. 사진이 큼직큼직하고 시선이 콘텐츠만 볼 수 있어서 시원시원한 느낌도 있어 참 좋았는데, 넓어도 너무 넓다보니 오히려 가독성이 떨어지는 것을 좀 느꼈습니다. 기존 본문 가로 사이즈는 1170px인데요. bootstrap의 1200px 이상의 화면시 출력되는 기본 사이즈이기도 합니다.어찌할까 고민고민하다가 1170px을 한 단계 내린 970px로 변경하였습니다. 본문 사이즈 조금 줄이는데 시간이 엄청 오래걸렸네요. 반응형 블로그다보니, IE에서 잘 동작하는지도 신경써야하고, 반응형으로 동작하는 구글애드센스를 비롯해서 여러가지 테스트를 거치는 힘든 과정을 거쳤습니다. 기존 블로그..
티스토리 반응형 스킨의 대세 마크쿼리 스킨이 3.0.5로 버전 업되면서 소소한 변화가 있었는데, 업데이트 내역 중 가장 반가운 것은 반응형 티애디션입니다. 반가운 마음으로 반응형 티애디션을 적용하였습니다. 사실 마크쿼리 스킨에서 그동안 한가지 흠이 있던게 바로 티애디션이었습니다. 블로그 메인페이지는 사람으로치면 얼굴이나 첫 인상이라 할 수 있을만큼 중요한 곳인데, 스킨의 모든 부분이 반응형이지만 티애디션 자체에서 반응형을 지원해주지 않앗기 때문에 메인페이지가 반응형이 아니었습니다. 그러나 이제는 티애디션까지 반응형으로 설정할 수 있게 되면서(게다가 깔끔한 디자인!) 거의 완벽에 가까운 반응형 스킨이 된 듯 합니다. 제가 사용하는 버전은 마크쿼리 스킨 스켈레톤 2버전이며, 현재는 3버전까지 릴리즈 되어있는..
티스토리 반응형 스킨 파일 다운로드 버튼 형태로 만들기 블로그에서는 특정 파일을 업로드하여 사용자에게 제공할 수 있습니다. 특정 파일 양식에서부터 링크에 이르기까지 대부분의 것들을 다양한 방법으로 제공할 수 있는데요. 일반적으로 블로그 포스트를 작성할 때 많이들 사용하시는 글쓰기 에디터, 즉 위지윅 에디터에서 파일을 업로드하게 되면 아래처럼 간단한 파일 아이콘과 링크 텍스트가 제공되는 형태로 기본 설정이 되어 있습니다. ▼ 위지윅 에디터에서의 파일 업로드 하지만 이 고전적인 방법의 문제점 중 첫번째는 예쁘지가 않다는 것이며, 클릭을 유도할만큼 직관적이지도 않다는 것입니다. 두번째 문제점은 파일을 꼭 티스토리 서버에 업로드 하여야만 사용자에게 제공해줄 수 있다는 점입니다. 사실 파일을 링크할 수 있는 HT..
티스토리 Skeleton 반응형 스킨 본문 이미지 가운데 정렬하는 법 콘텐츠를 자신이 직접 디자인하여 사용한다는 것은 매우 멋진 일입니다. 마크쿼리 ↩님이 개발 및 배포하고 있는 티스토리 반응형 스킨은 사용자가 콘텐츠를 직접 디자인하여 사용할 수 있는 스킨입니다. 기존에 많이 배포되던 일반적인 스킨이 완성형 스킨이라면 마크쿼리 스킨은 커스텀 디자인 여지가 존재하고, 여러가지 아이디어로 콘텐츠 확장성을 겸비한스킨이라고 볼 수 있는데요. 현재 티스토리에서 큰 인기를 끌고 있는 스킨인만큼 마크쿼리 커뮤니티 ↩와 제 블로그 댓글에도 다양한 문의들이 올라오고 있습니다. 그 중에서도 블로그 UI 중에서 기초적이라 할 수 있는 이미지 가운데 정렬법에 대한 문의가 꽤 있어 별도의 포스트로 안내해드립니다. 앞서 언급한 ..
티스토리 블로그 메뉴바에 SNS 아이콘 추가하기 : Skeleton 반응형웹(모바일 포함) 티스토리 블로그 반응형 스킨인 Skeleton 에서는 티스토리 자체에서 제공하는 상단메뉴바를 사용하지 않고, 자체 HTML로 제작된 메뉴바를 사용합니다(티스토리 제공 상단 메뉴바는 메뉴바로서 심플한 기능을 제공해주지만 사용자가 마음껏 기능 디자인을 할 수 없는 것은 단점입니다). 이에따라 사용자 입맛에 맞도록 자유롭게 무언가를 추가하거나 삭제하고, 수정할 수 있다는 장점이 생기는데요. 많이들 사용하는 SNS 아이콘을 설치하여 블로그 방문자에게 자신의 SNS를 소개하고 링크하여 개인 브랜드화에 약간의 도움이 될 수 있도록 디자인해보겠습니다. Note 반응형 웹을 사용하는 티스토리 스킨에서는 접속자의 화면 사이즈를 추..
티스토리 블로그 카테고리 글보기 혹은 검색시 나오는 날짜 위치 이동하기 블로그를 방문하는 독자의 가독성을 위한 소스코드 일부 수정을 해봅시다. 티스토리 블로그에서는 카테고리 글 보기 또는 검색을 했을 경우 OOO에 해당하는 글이라는 메시지와 함께 리스트가 출력됩니다. 제가 지금 사용하고 있는 Skeleton 반응형 웹 스킨 뿐만 아니라 티스토리에서 기본 제공하는 여러 스킨들 중에서도 나타나는 리스트들의 디자인이 가독성에 약간 영향을 주는 부분이 있습니다. 아래의 이미지는 예시를 들기위해 같은 스킨을 사용 중인 정재복님의 블로그 ↩를 전체 글보기를 하여 스크린샷 한 화면입니다. ▼ 물론 나쁘지 않은 디자인입니다만 포스트의 리스트가 날짜 뒤에 위치하여 조금의 시선을 방해하는 것처럼 느껴집니다. 사용자에게 중..
티스토리 반응형 모바일 애드센스 삽입하기 : 반응형 웹 skeleton 스킨블로그를 운영하는 분들이라면 이제는 모바일을 통한 유입도 신경쓰지 않을 수 없습니다. 스마트폰이나 테블릿 등의 통칭 모바일기기가 엄청나게 보급되어 있을 뿐만 아니라 접근성이 좋다는 이유(지하철이나 버스, 이동 중 등의 상황에서)에서 모바일 웹 검색이 PC로 인터넷을 사용하는 것 만큼 보편화 되었습니다. 모바일 유입이 상승한만큼 모바일에서의 트래픽도 더 이상 간과할 수 없는 수준에 이르렀습니다. 구글 애드센스 등 블로그에 광고 플랫폼을 설치하여 운영 중인 블로거라면 이러한 모바일 트래픽을 어떻게 수익으로 연결할 수 있을지 생각해 볼 필요가 있습니다. 티스토리에서는 여타 다른 블로그 서비스와는 차별화되게 별도로 모바일 스킨을 제공하고..
티스토리 skeleton 반응형 스킨에서 구글 애드센스 본문 상단에 2개를 배치해봅시다. 이번에 Skeleton 반응형 스킨으로 디자인을 바꾸면서 구글 애드센스의 코드도 함께 바뀌었습니다. 애드센스 자체의 코드가 바뀐건 아니고, 애드센스 주변을 구성하는 틀 자체가 바뀌었다고 해야겠군요. Skeleton 스킨은 반응형 스킨이기 때문에, 일반적으로 티스토리에 애드센스 광고를 넣듯이 고정형 애드센스를 배치해버리면 모바일이나 해상도가 낮은 기기에서도 크기가 줄어들지 않은 광고가 나타납니다. 마크쿼리님이 제공해주시는 스킨을 사용하시는 티스토리 블로거분들을 몇 곳 방문해 보았는데, 실제로 고정형 애드센스를 넣어둔 분도 계시더군요. 지금 당장은 큰 문제가 없는 것처럼 보입니다만, 모바일 화면에서 사이즈가 큰 광고가 ..
