티스토리용 반응형 무료 스킨 | Cynical Dark | Bootstrap, jQuery, html5

@Eruis's Skin Project #04

Cynical Dark



소개

Cynical Dark(이하 "씨닭")은 부트스트랩(Bootstrap)과 jQuery(제이쿼리)기반의 티스토리용 반응형 스킨입니다.


여기서 반응형 웹이란? 별도의 전용 레이아웃 제작 없이 그 페이지의 컨텐츠를 각각 다른 크기의 화면을 가진 기기에서도 동일하게 이용할 수 있게끔 제작된 웹을 일컫습니다.


이번 씨닭은 스킨 제작 프로젝트의 네번째 프로젝트로써, 기존의 다른 스킨을 수정해서 사용했던 1~3번째와는 달리 직접 A부터 (.. 는 부트스트랩 예제를 썼으니 양심상) 는 아니고 한... C쯤부터 Z까지 직접 제작한 점이 차별화되었습니다.


미리보기

... 미리보기를 넘어서 체험을 손수 하시고 계십니다.

예, 맞습니다. 지금 보고 계신 스킨이 씨닭입니다.

* 예제 사이트와 상이한 부분이 있을 수 있습니다.


내려받기

Cynical Dark.zip


* 버그 및 문의사항 문의처

[ 개발포럼 ] or [ Reply ]


스킨 연혁

The Begins at 2014.09.26 ~  

- 0.0.1 ~ 0.9.9

프로젝트 개시 (Project #4)

부트스트랩 예제를 이용한 스타일링.

스킨 명칭 변경 "Cynical Dark"

기본 스타일링 및 레이아웃 구성 완료

Section.G에서 오픈베타 테스트 시작


- 1.0.0

검색창에 음성 검색 기능 추가.

시스템 안정화 및 버그 수정.


- 1.0.2

부분 디자인 변경.

프린트용 스타일 정의 구문 추가.

버그 수정.


- 1.0.3

사이드바에 카테고리 영역 추가


- 1.0.5

사이드바 요소 추가 / 제거 기능 추가. 

* 블로그 관리 > 꾸미기 > 사이드바에서 조절 가능

덧글 · 방명록 쓰기 영역 편의성 강화.

일부 디자인 수정.


- 1.0.6

스킨 설치가 안되던 오류 수정.

하단 푸터 부분 사이즈 조절 (최대 가로값 1280px으로 하향 조정)

비밀글 해제가 안되던 문제 수정.

플러그인 관련 스타일 구문 추가.

가. '파비콘 표시'와 '덧글 프로필' 관련 이미지 위치 소폭 조정.


- 1.0.7

좌·우 외곽선 사이즈를 반영한 최대 가로폭 사이즈 수정 (1280px ▶ 1282px)

사이드바 스타일 변경

가. 관리자 메뉴와 태그 리스티 스타일 변경

나. 사이드바 기본 서체 크기 변경 (13px ▶ 12px)

다. 상 · 하위 카테고리 별로 스타일 차등화

티스토리 제공 기본 플러그인 관련 스타일 구문 추가

가. '카테고리의 다른 글' 플러그인 관련 스타일 정의

나. '프로필' 플러그인 관련 스타일 정의 


- 1.0.9

상단 슬라이더 추가 (Nivo Slider)

사이드바 구글 반응형 애드센스란 추가

비밀글 체크박스 스타일 개선 _ 관련 글

이미지 맵

@Eruis

당신이 찾는 게임의 모든 것! 각종 게임정보 · 게임 패치 · 게임 플러그인 · 게임 팁 등이 담긴 게임로그. We Makes Your Fun! Section.G

    '라이프다이어리/잡담' 카테고리의 다른 글

    글에 남긴 여러분의 의견은 14개 입니다.

      • http://testskinblog.tistory.com/

        여기에 다운을 받아서 적용했더니 사이드바가 아래로 내려가고 상단 메뉴가 기본적으로
        Menu
        SubMenu 01
        SubMenu 02
        이런식으로 보이더라구요. 접혀있어야 할텐데. 스킨파일이 씹혀서 그런가 해서 다시 스킨 등록해도 동일한 문제가 생깁니다.
        윈도7, 크롬에서 테스트 했습니다.

      • images 폴더 내에 Bootstap.css 파일이 없어서 생기는 현상입니다.
        압축을 풀면 바로 보이는 파일 외에도 images 폴더로 들어가셔서 남은 파일을 전부 업로드 해주셔야 됩니다.

      • 밀랍없이도 저에요. ^^

        덧글 입력창의 구분이 좀 헷갈릴 수 있다는 생각이랑
        css 파일은 분명히 업로드가 되었는데도 불구하고 - images 폴더 파일도 전부 업로드 완료 - 계속 동일 현상이 생기네요. 집에가서 (아직도 회사) ie로 업로드 후 다시 테스트 해봐야겠습니다.

      • PC가 매일 초기화되는 곳이라, 구글 드라이브에 올려놓은 걸(다운로드 링크와 동일한 파일)로 수정하고 있는데 ... 저는 변함없이 잘되네요.
        사이트 링크보면 화면이 75대 25로 나뉘어야 되는데, 전체 너비는 가로 1280으로 이 곳과 동일한 반면 .. 글과 사이드바가 지멋대로 사이즈가 정해지네요.
        흠 .. 실례가 안된다면 링크 주신 곳의 스킨 파일을 내려받아주셔서 메일로 보내주시면 한 번 연구해봐야겠습니다 ㄷㄷ

        ikarus_night@naver.com

      • 제가 받았던 것을 다시 보내드렸습니다.

        윈도7, 구글크롬에서 다운받아서 업로드 했었습니다. 저도 왜 그런 현상이 일어나는지 모르겠네요. ㅠㅠ

      • 하아 .. 찾았습니다 ㅜㅜ
        너무 원인이 허망해서 잠깐 벙~ 쪄있었습니다.

        관리 > HTML/CSS 편집을 들어가신 후,
        <link href="./images/Bootstrap.css" rel="stylesheet">를
        <link href="./images/bootstrap.css" rel="stylesheet">로 바꿔주시면 됩니다.

        로컬 환경에서는 무난하게 돌아가는데, 웹에서는 씹망이었네요.
        일전에 알려주신 블로그 주소 페이지를 HTML 파일로 저장해서 해당 부분 수정하니, 제대로 작동되는 것도 확인했습니다.

        단순히 대·소문자 차이라니 너무 허무하네요 ㅠㅠ
        해당 부분 수정해서 구글 드라이브에도 올렸습니다.

      • 헐............대소문자가 영향을 주는군요. -_-;;; 저도 틈틈이 css 수정해보고 했는데 도저히 못찾아서 그냥 포기했었는데;;;
        가..감사합니다. 일하면서 틈틈이 스킨 수정을 해봐야겠어요. 실력이 없어서 그냥 마구잡이 수정이라. ㅠㅠ 힘들겠지만.

      • 아, 그리고 저 혼자 생각인데 본문의 폰트크기가 너무 작은 것 같습니다. 반응형이라 모바일에서도 보이는데..
        "현재 신규 사이트 디자인을 적용하여 테스트 중입니다." 여기 있는 폰트 크기가 모바일에서 읽기 좋네요. (순전히 저 개인적인 생각이..ㅎㅎ)
        모바일에서 상단 메뉴창은 어썸하네요. ^^

      • http://finalfantasygame.tistory.com

        위 블로그에 스킨 적용하고 제 나름대로 수정했어요. 배경도 넣어보고 사이드바는 모바일에서 어자피 메뉴가 있어서 다 안보이게 해놨네요.

        카테고리 더 보기 위치도 애드센스 아래로 들어갈 수 있도록 수정해놓고. 아직 애드센스 광고 코드는 넣지 않았지만.

        아직까지 특별한 이상은 보이지 않고 있습니다. ^^

    *

    *