본문 바로가기

Works/Tistory Skin

Strada - 스킨위자드 되는 티스토리 반응형 스킨

Strada - 스킨위자드 되는 반응형 스킨


이 스킨을 만들었느냐... 라는 질문을 받았다는 가정하에서 이실직고 하자면 단지 ‘스킨위자드가 되는 반응형 스킨을 한번 만들어보고 싶었다’고 밖에 말씀을 못 드리겠습니다. ㅋㅋ 어짜피 스킨 위자드 적용할꺼 Hare에다가 스킨위자드 기능만 끼워넣어볼까... 라는 생각도 했지만, 이미 만들어 놓은 구조 수정하기도 여러모로 귀찮아서 그냥 새로 스킨을 하나 만들었습니다. -_-a 


요즘 사진이나 영상 위에 흰색으로 글씨 쓰는게 대세라서 그 대세에 발맞추어 심플하게 뽑아보았습니다. 진짜 별기능없고 초간단이기 때문에 제작시간도 약 4시간? 쯤 걸린 것 같네요. 막상 만들고보니 계획 했던것보단 이쁘게 나와서 나름 흡족합니다. 


특징1

반응형 스킨 주제에 무려 구닥다리 티스토리 스킨위자드[각주:1]가 됩니다!


특징2

글씨가 흰색입니다.


특징3

특징이 2개나 있습니다…는 뻥이고 2단형 스킨인데 사이드바는 아니고 게시글 정보가 옆에서 졸졸 따라다닙니다. 


보너스

sidebar


접이식 사이드바를 제공해서 매우 깔끔한 화면을 연출해줍니다. 화면 오른쪽 상단의 Menu 버튼을 누르면 됩니다.


스크린 샷


Strada - 스킨위자드 되는 반응형 스킨


테스트 블로그


스킨 설치 방법


Strada 1.0.1.zip



첨부파일을 다운로드 받습니다.


스킨 등록


환경설정 → 스킨에서 스킨 등록


새 스킨 등록


추가 버튼 클릭


파인더


파일 업로드 → images 폴더 안까지 싹다 업로드 해줍니다. 


업로드


스킨 저장명 지정하고 해당된 이름의 스킨을 스킨 보관함에서 선택 후 적용 완료 하면 됩니다.


모바일 웹 스킨 끄기


반응형 스킨이기 때문에 모바일웹 스킨은 반드시 꺼주셔야 합니다.


스킨위자드 사용법


티스토리 관리 스킨


스킨 → 스킨위자드 버튼을 누릅니다.


티스토리 스킨위자드


화면이 바뀌면서 에디터 창이 뜹니다. 수정 할 수 있는 항목은 여러개이나 본 스킨에서 적용되는 부분은 배경 밖에 없습니다. 


티스토리 스킨위자드 직접올리기


티스토리 기본 이미지[각주:2]를 선택하거나, 직접올리기 기능을 사용 할 수 있습니다.


유의사항

베이스 css는 strada.css이며 기본 티스토리 스타일은 이것 보다 우선순위가 높기 때문에 이 위에 덮어쓰는 방식으로 수정을 하시면 됩니다. 베이스 css는 무분별한 수정으로 인하여 오류가 나는 것을 막기 위해 압축 처리되어 있습니다. 굳이 이 파일을 건드릴 필요 없이 Style.css만 수정하시면 됩니다. 참고로 Style.css에는 스킨위자드용 치환자가 들어가 있으며 이 부분을 수정하게 되면 더 이상 스킨위자드를 쓸 수 없으니 유의하시기 바랍니다. 


IE9 이하 지원 안 합니다. 계획도 없으니 요청금지.

개인 별 커스텀 수정 역시 요청 받지 않습니다. 수정 요청 금지.

하단 부 저작권 표시 지우지 마세요.

모든 기능은 jQuery 위주로 돌아갑니다. jQuery 빼지 마세요.


티에디션은 반응형으로 지원하지 않습니다. (티에디션을 사용하지 않는 것을 권장합니다.)

티에디션 기본 베이스 프레임 웍인 블루프린트와의 충돌 문제 때문에 티에디션을 반응형으로 만들기 매우 귀찮고 까다롭기에 별도로 반응형 지원을 하지 않습니다. 능력 되시는 분은 직접 수정해서 쓰시기 바랍니다.


스킨관련 문의/버그신고

댓글 난에 해주시되, 답변은 첫 휴가 나오면 일괄로 해드리겠습니다. 방명록이나 메일로 요청시에는 가차없이 삭제합니다.


※ 기본 배경은 Unsplash에서 제공하는 무료 이미지 입니다.


16.9.11 - 폰트 엘리어싱 hack 제거

   - 백그라운드 커버가 전체화면 크기로 씌워지도록 코드 변경 (이전에는 게시글 길이 기준)



  1. 배경화면 교체만 됩니다. [본문으로]
  2. 패턴 배경은 원활하게 적용되지 않습니다. [본문으로]