티스토리 스킨 39

티스토리 고래 스킨에서 SNS 공유 아이콘을 사이드에 고정시키는 방법

지난주에 이 티스토리 블로그의 스킨을 북클럽에서 고래 스킨 4.0으로 바꾸었습니다. 고래 스킨에는 글 하단에 SNS 공유 아이콘이 표시됩니다. 그러므로 별도의 SNS 플러그인을 사용할 필요 없이 스킨에 내장된 기능을 사용하면 됩니다. 저는 PC에서 글 하단에 표시되는 SNS 아이콘을 왼쪽에 붙박이로 표시되도록 바꾸었습니다. 티스토리 블로그에 SNS 공유 아이콘을 표시하는 방법 티스토리에 SNS 아이콘을 표시하는 방법으로 크게 두 가지를 생각해볼 수 있습니다. 하나는 티스토리에서 제공하는 플러그인을 사용하는 것이고, 다른 하나는 외부 서비스를 이용하는 것입니다. 티스토리에서는 플러그인 메뉴에서 SNS 글보내기 플러그인을 설치하여 SNS 공유 버튼을 글 하단에 표시할 수 있습니다. 하지만 개인적인 생각에는 ..

티스토리 스킨 고래 스킨 4.0으로 변경

작년 8월 말부터 공식 티스토리 스킨 중 하나인 북클럽 스킨을 사용하다 며칠 전에 티스토리 무료 스킨인 고래 스킨으로 변경했습니다. 이 스킨은 네이버, 구글 검색 엔진에 최적화되어 있고 구글 애드센스 광고에도 최적화되어 있다고 하네요. 티스토리 광고 수익이 증가하지 않을까 기대되네요. 티스토리 스킨 고래 스킨 4.0으로 변경 티스토리에서 가장 최근 공개한 공식 티스토리 스킨 중 하나인 북클럽 (Book Club)을 적용하여 레이아웃과 기능을 조금 고쳐서 10개월 남짓 사용해왔습니다. 기념으로 북클럽 스킨을 적용했을 때의 모양을 스크린샷으로 만들어보았습니다. 며칠 전에 고래 스킨으로 변경한 후에 잠시 시간을 내어 제 입맛에 맞게 일부를 수정했습니다. 아직 손봐야 할 곳이 있지만 당분간 이렇게 사용하면서 필..

티스토리 북클럽 스킨: 커버 아이템 타이틀 (소제목) 스타일 변경하는 방법

티스토리 북클럽 (Book Club) 스킨에서 스킨 편집 시 커버 아이템을 설정하고 각 커버 아이템의 타이틀을 지정할 수 있습니다. 커버 아이템 타이틀 (소제목)의 기본 스타일이 마음에 들지 않는 경우 CSS를 사용하여 커버 아이템 제목 스타일을 변경할 수 있습니다. ☞참고로 티스토리 소제목 스타일을 변경하고 싶은 경우 다음 글의 "티스토리 소제목 (헤딩) 스타일 변경" 부분을 참고해보세요. 티스토리에 목차 표시하는 방법 (북클럽 스킨) 티스토리에는 모든 글에 자동으로 목차를 표시하는 방법은 없지만, 원하는 글에 자동으로 목차를 삽입할 수 있습니다. 헤딩 태그를 인식하여 자동으로 목차를 생성하는 jQuery를 사용할 수 있습�� avada.tistory.com 티스토리 북클럽 스킨의 커버 아이템 타이틀 ..

티스토리 Poster 스킨에서 썸네일 위치를 오른쪽에서 왼쪽으로 변경하는 방법

티스토리 스킨 중 하나인 Poster (포스터)를 적용하고 최신 글을 표시하도록 설정하면 첫 페이지(홈페이지)에서 썸네일이 오른쪽에 표시되고 요약글이 왼쪽에 표시됩니다. 썸네일 위치를 오른쪽에서 왼쪽으로 변경하고 싶은 경우, 꾸미기 > 스킨 변경 > HTML 편집 > CSS 탭에 다음과 같은 CSS 코드를 추가하면 됩니다./* Poster 스킨에서 썸네일 위치 바꾸기 */ .post-item .thum { float: left !important; margin-right: 80px; margin-left: 0 !important; } 위의 코드를 CSS 탭의 맨 아래에 추가하도록 합니다. 저장한 후에 블로그를 살펴보면 썸네일 위치가 오른쪽에서 왼쪽으로 변경되어 있는 것을 확인할 수 있을 것입니다. 이 블..

티스토리 Book Club 스킨 수정: 본문 글자 크기 변경하는 방법

이 블로그에는 현재 최근 공개된 Book Club (북 클럽)이라는 스킨이 적용되어 있습니다. 북 클럽 스킨에서는 본문 글자 크기가 0.9375em으로 설정되어 글자가 다소 작게 느껴질 수 있습니다. 북클럽 스킨에서 본문 글자 크기를 변경하고 싶은 경우 아래 내용을 참고해보세요. 저는 스킨을 변경하면 제일 먼저 본문 글자 크기를 키웁니다. 이제 노안이 들 나이가 되어 글자 크기가 작은 사이트의 글을 잘 안 보게 되네요.ㅠㅠ 아래의 내용은 북클럽 스킨을 예를 들어 본문 글자 크기를 키우는 방법을 설명했지만, 다른 스킨에서도 그대로 응용이 가능합니다. 제대로 적용되지 않을 경우 댓글에 주소를 남겨주시면 CSS 코드를 확인해드리겠습니다. 목차 티스토리 Book Club (북 클럽) 스킨에서 본문 글자 크기 변..

티스토리 Book Club 스킨 수정: 글 제목 아래에 댓글 개수 및 링크를 표시하는 방법

티스토리 북클럽(Book Club) 스킨을 적용하면 그림과 같이 포스트 제목 아래에 글쓴이 이름과 글 발행 날짜가 표시됩니다. 저는 사용자 이름은 삭제하고 글 작성 일자 옆에 댓글 개수를 표시했습니다. 그리고 클릭하면 댓글 섹션으로 이동하도록 수정했습니다. 티스토리 북클럽 (Book Club) 스킨 수정: 글 제목 아래에 댓글 개수 및 링크를 표시하는 방법티스토리 북클럽 스킨에서 글 제목 아래에 댓글 개수 및 링크를 표시하도록 변경하려는 경우 스킨을 약간 수정하면 됩니다. 먼저 티스토리에 로그인한 후에 꾸미기 > 스킨 편집 > html 편집 >HTML으로 이동합니다. 위와 같은 화면이 표시되면 Ctrl + F를 눌러 background-image:url()을 검색합니다. 바로 아래에 보면 다음과 같은 코..

티스토리 블로그의 스킨을 Book Club으로 변경했습니다

이 티스토리 블로그의 스킨을 최근 공개된 북클럽(Book Club)으로 변경했습니다. 티스토리에서 자주 새로운 스킨을 공개하고 있습니다. 새 스킨으로 바꾸기 전까지 Magazine이라는 스킨을 사용했습니다. Magazine 스킨을 약 4개월 정도 이용했습니다. 기록용으로 여기에 스크린샷을 올려봅니다.티스토리 북클럽(Book Club) 스킨으로 변경 Poster, #1, Magazine 스킨을 사용하면서 스킨 소스 파일에 많은 수정을 가했습니다. 이번에 변경한 Book Club에서는 이전 스킨과는 달리 약간의 수정만 했습니다. 이 스킨이 제가 선호하는 스타일과 어느 정도 일치하는 것 같습니다. Book Club 스킨 편집 화면에서 '최신글'로 설정하고 '목록'을 선택하면 첫 화면과 카테고리 페이지에 글 목..

티스토리의 신규 스킨 Magazine으로 변경해보았습니다

티스토리에서 지난 25일에 공개한 Magazine 스킨으로 변경해보았습니다. 레이아웃은 이전과 거의 동일합니다. 댓글 시스템은 티스토리 기본 댓글과 Disqus 댓글을 동시에 표시했었지만 Disqus 댓글 사용 빈도가 거의 제로여서 디스커스 댓글은 적용하지 않았습니다. 홈 설정에서 "커버" 대신 "최신 글"을 선택하면 첫 페이지에 사이드바가 표시되지 않습니다. 억지로 PC에서 사이드바가 표시되도록 설정해보았습니다.ㅎㅎ HTML 소스를 살펴보니 첫 페이지에서 사이드바가 display:none을 사용하여 숨겨져있네요. 즉, 사이드바가 로드는 되지만 표시만 되지 않았던 것입니다. display:none을 display:inline-block으로 지정하고 콘텐츠 섹션과 사이드 섹션의 너비를 적절히 조정했습니다...

티스토리의 새로운 스킨 - Magazine

어제 티스토리에서 Magazine이라는 새로운 스킨을 공개했습니다. 스킨 이름대로 매거진 스타일로 홈페이지를 꾸밀 수 있는 스킨입니다. 6가지 커버 아이템을 지원하며, 하단 푸터 영역에 자유로운 외부 링크 및 SNS 아이콘 노출이 가능하도록 되어 있습니다. 그리고 상단과 하단에 로고 이미지를 삽입할 수 있으며, 스킨 곳곳에 사용되는 포인트 컬러는 레드/블랙/블루입니다. 이 스킨의 경우 전면 페이지에는 사이드바가 표시되지 않지만 개별 글에는 사이드바가 표시됩니다. 비교적 최근에 공개되었던 Poster, Whatever, Letter, Portfolio에 비해 기능이 향상된 것 같은 느낌을 받았습니다. Poster 등의 스킨을 이 블로그에 적용했지만 네이버 웹마스터도구에서 글 수집 요청을 하면 '서버 오류'..

티스토리 스킨을 기본 스킨 중 하나인 #1으로 다시 변경했습니다

이틀 전에 이 블로그의 스킨을 최근 공개된 Poster로 변경했습니다. 레이아웃이 깔끔하고 기능도 괜찮은 것 같아서 비교적 만족스러웠지만 네이버 웹마스터도구에서 글 수집 요청 시 오류가 발생했습니다. 가급적 Poster 스킨으로 정착하고 싶었지만 네이버에서 글 수집에 문제가 있는 것 같아서 기본 스킨 중 하나인 #1으로 바꾸었습니다. Poster 스킨에는 사이드바가 없어서 억지로 사이드바를 추가했습니다. 방금 새로 바꾼 #1 스킨에서도 비슷한 방법으로 사이드바를 추가했습니다. 비슷한 CSS를 적용했기 때문에 레이아웃은 비슷합니다.ㅎㅎ 사이드바는 flexbox를 사용하여 추가했습니다. IE10 이하에서는 레이아웃이 엉망으로 나올 것 같습니다. 하지만 저는 IE10을 사용하지 않기 때문에 확인할 길이 없네요..