안녕하세요, 티스토리 반응형 스킨 Flatinum을 제작한 송지훈입니다. 본 스킨은 트위터 부트스트랩을 기반으로 제작됐으며, 부트스트랩 자체 스타일시트나 자바스크립트를 전혀 수정하지 않았기 때문에 부트스트랩 버전 업 시 큰 무리 없이 사용이 가능합니다.
* 다음 업데이트 시 최신 부트스트랩 적용 예정입니다.
1. 제작에 활용된 소스
본 스킨을 제작하기 위해 활용된 소스는 아래와 같습니다.
- 프레임워크: 트위터 부트스트랩(Bootstrap)
- 폰트: Noto Sans체, Raleway체
Raleway체는 구글 웹폰트 소스를 활용했습니다. 해당 자료는 아래 링크에서 확인 가능합니다.
https://www.google.com/fonts/specimen/Raleway
2. 적용 방법
1. 아래 압축 파일을 다운로드 받으세요. (파일명에 Fullwidth라고 표기된 스킨은 사이드바가 없는 스킨입니다)
flatinum_20150820_fullwidth.zip
2016.08.08 버전 다운로드: http://socialdev.co.kr/flatinum-v3/
2. 압축을 해제하고 skin.html 및 style.css를 제외한 모든 파일을 업로드해주세요.
3. Skin.html 파일은 티스토리 HTML/CSS 부분의 skin.html 부분에, Style.css 파일은 style.css 부분에 그대로 복사해서 붙여 넣어 주세요.
3. 메뉴 수정
카테고리의 경우 부트스트랩 특성상 현재 운영하시는 티스토리 블로그의 카테고리가 자동으로 노출되지 않습니다. 따라서 아래 소스 코드를 수정해야 합니다.
'href'의 카테고리 주소 및 카테고리 명을 현재 사용하시는 카테고리로 변경해주세요.
상단 우측 내비게이션 메뉴의 경우 고정적으로 노출하는 링크와 티스토리 기본 메뉴로 되어 있습니다. 이 역시 원하시는 메뉴로 변경하시기 바랍니다.
4. 슬라이더 이미지 수정
슬라이더 이미지를 수정하기 위해서는 아래 'img src' 부분을 수정하시면 됩니다. 해당 파일을 티스토리 HTML/CSS 편집을 통해 업로드 하시고 파일명만 변경해주세요.
5. 로고 수정
위 압축 파일 내 'logo_shrink.png' 파일을 교체하신 후 업로드하시면 됩니다. 참고로 기본 로고 사이즈는 340 x 100 픽셀이며, PNG 투명 이미지로 되어 있습니다.
수정이력
2015.07.21 Flatinum 1.0 배포2015.07.28 Font Awesome 노출 문제 수정, 로고 경로를 상대 경로로 수정(슬라이더 이미지 및 로고 이미지 포함)
2015.07.30 슬라이더 반응형 적용
2016.08.08 마이너 수정 반영 - 카피라이트 수정, 폰트 수정(Noto Sans KR로 교체), 오탈자 수정 등
개인 별 스킨 커스터마이징은 해드리지 않습니다!!
'카테고리1' 카테고리의 다른 글
| Flatinum 티스토리 반응형 테마 공개 (251) | 2015.07.21 |
|---|---|
| Flatinum 스킨은... (1) | 2015.07.21 |
구리라이트
소셜데브의 첫 번째 티스토리 스킨 데모 사이트입니다. 소셜데브 관련 궁금한 사항은 웹사이트를 방문해주세요.
댓글을 달아 주세요
스킨이 멋있습니다.
적용하고 보니 메뉴에 팝업이 안뜨네요.
Tistory를 눌러도 안뜨고, My를 눌러도 팝업이 안 뜹니다.
고로 글을 작성할 수도 관리자모드에 들어갈 수도 없습니다.
왜 그럴까요?
스킨 티스토리중에 제일 멋진 것 같습니다. 너무 감사합니다!
이번에 이미지를 하나 올려보니 사이즈가 강제로 500으로 밖에 안 보여지네요
너무 작아서 이미지가 깨집니다. 원본이미지가 큰데도 500으로 작게만 보여지는데 해결방법 좀 알려주시면 정말 좋겠습니다.
비밀댓글입니다
감사합니다! 덕분에 티스토리 시작부터 멋지게 하네요 ㅎㅎ
비밀댓글입니다
스킨 너무 예쁘고 쓰기도 편한거 같아서 바로 적용했는데요 ..
저도 이미지를 올렸는데 이미지 사이즈가 저절로 너무 작게로만 올려지는데 이거 어찌 해결해야 할까요?
글씨나 이미지가 들어가는 폭 조절이나 원본 이미지 그대로 올리게 하려면 어떻게 해야할까요?
비밀댓글입니다
너무 예쁜 스킨 마음에 쏙 들어서 열심히 깔고 수정하고 작업했는데..
크롬에선 너무 이쁜데 익스플로러로 들어가보니까 완전 깨져서 보이네요 헉 ㅠ 카테고리도 안보이고..
이거 저만 그런건가요? 제 익스플로러의 문제인가요? ㅠㅠㅠㅠㅠㅠ
wpwsyn.tistory.com
첫화면 이미지 미리보기가 잘리는데..
이유를 알 수 있을까요... ㅠㅠ
잘쓸게요 공부 좀 해야겠네요
스킨 변경했는데 ㅎㅎ 이미지 바꾸는 법은 공부좀 해야겠네요
예전엔 쉬웠는데 ㅠ.ㅠ 왜케 어렵지
좋은 스킨 감사드립니다~
한가지 문의 드릴 것이 있는데요, PC 페이지에서 각각의 포스팅된 글마다 sns공유 아이콘이 있어 편리하고 좋은데
모바일 페이지에 들어가보면 sns공유 아이콘들이 안보이는데 버그인가요? 아니면 의도된 것인가요?
사용자가 모바일 페이지에 sns공유 기능을 추가하려면 어떻게 해야 하고 가능한지도 궁금합니다.
맨 위에 사진부분 공간을 없 앨 수도 있나요?
저는 스킨 적용 어떻게 해야하는 지 몰라서 그냥 기본스킨 원래 만들어 주신걸로 쓰고 있는데, 관리자가 '괸'리자로 오타로 나와서요 ㅎㅎㅎ 언뜻보면 모르겠지만...괴....괸리자 ㅋㅋㅋㅋ
좋은 스킨 만들어 주셔서 감사합니다.
HTML적응되면 저도 배경 넣어서 써봐야 겠어요
구글 애널리틱스로 볼때 모바일 집계가 0인데 스킨에 문제있는거 같은데 도저히 몰라서 글 남겨봅니다.
너무 좋은 스킨 감사합니다 ^^
좋은 스킨 만들어 주셔서 감사합니다
좋은 스킨 만들어 주셔서 감사합니다.
슬라이더 이미지 높이 폭이 몇 픽셀(혹은 인치)인지ㅠㅠ 계속 조정해봐도 잘 안되네요ㅠㅠ 답변 부탁드릴게요~~
슬라이드 되는 사진에 링크를 걸어서 관련 글로 넘어가게 만들고 싶어서
참조를 앞에 넣었는데 이미지 3개가 상하로 일렬로 배치가 되네요. 혹시 정상적으로 링크하는 방법이 있나요?
안녕하세요! 스킨 너무이뻐서 최근에 바꿧는데요! 그 다음에서 제공하는 작은 이모티콘들이 다 큰 이미지로 변하더라구요ㅠㅠ 글 쓸때는 작게 잘 나오는 것 같은데 이 스킨을 사용하면 이모티콘 사용을 못하는건가요..??ㅠㅠ 답변 부탁드릴께요!!ㅎㅎ