안녕하세요 :)
제가 이번에는 스킨을 하나 만들어 봤습니다.
스킨이라기 보다는 코드이지만 앞으로 꾸준히 개발해서 스킨까지 만들어 보도록 하겠습니다!!
소개
이 스킨은 원래 사용하던 스킨에 그대로 적용할 수 있습니다.
별다른 수정 없이 그저 ctrl+c / crtl+v로 쉽게 적용할 수 있죠 :ㅇ
이 스킨을 적용하면 블로그 홈에 들어갔을 때, 포스팅에 들어갔을 때,
새로고침을 했을 때 약 15초간 눈꽃이 내리는 효과가 보여집니다.
배경이나 컨셉 컬러를 흰색 또는 밝은 색으로 했을 때 눈꽃도 하얀색이기 때문에
눈에 크게 거슬리지 않고 은은하게 눈이 내리는 느낌을 줄 수 있다는 것이 장점입니다.
또한 눈꽃이 이미지가 아닌 텍스트로 작성되어 그 부분을 원하는 대로 얼마든지
바꿀 수 있고 눈꽃 코드를 이미지로 바꿔서 내가 원하는 이미지가 떨어지도록 할 수 있습니다.
기능
기능은 아직 많이 없습니다. 기본 스킨에 코드만 추가해서 눈꽃 효과를 주는 방식이기 때문에
기능은 많이 만들지 못했습니다. 눈꽃 코드 추가하는 위치와 눈꽃을 바꾸는 법,
지속시간 설정하는 법까지 html 초보도 알아들을 수 있게 설명해 드리겠습니다.
적용된 효과가 궁금하시면, 제 블로그 홈에 들어가 보시거나, F5를 눌러 페이지를
새로고침 해 보세요, 약 15초동안 눈꽃이 흩날립니다**
장점
가장 큰 장점이라 하면, 기존에 사용하던 스킨에 바로 적용할 수 있다는 것입니다.
스킨을 교체하면 헤더나 사이드바 및 다른 설정들이 다 날아가지만 이번 스킨은
코드만 추가하면 바로 사용할 수 있도록 제작했습니다.
또한 눈꽃을 텍스트나 이미지로 교체하여 커스텀 할 수 있다는 것도 장점입니다.
단점
장점이 있으면 단점도 있겠죠?^^
일단 제가 생각하는 단점은 "거슬릴 수 있다" 입니다. 저는 제 블로그에 자주 안들어가서
잘 모르겠지만 제 블로그에서 글을 보시는 분들 입장에서는 충분히 거슬릴 수도 있다고 생각했습니다.
그래서 현재 ON/OFF 스위치도 개발하고 있으니 곧 있으면 더 쾌적한 블로그가 될 수 있다고 생각합니다.
스위치는 제 블로그에서 1~2일 정도 시험 운영 해 보고, 바로 스킨에 적용해 업데이트 해서 게시글
올려드리도록 하겠습니다. 조금만 더 기다려주세요~ 혼자 독학으로 남는 시간에 틈틈히 하는거라
개발 속도가 그렇게 빠르지 않아요 :(
적용
이제 이 스킨에 대한 소개가 다 끝났으니 스킨을 다운로드 받고
티스토리에 적용해 보도록 하겠습니다.
우선 아래의 html 파일을 다운로드 받아주세요. 단일 코드만으로 이루어져 있기 때문에
이미지 폴더나 자바스크립트 같은건 없습니다 :) (이것도 장점인가요?)
스킨의 이름은 눈꽃빙수입니다. 눈꽃이라고만 했을때는 겨울 느낌이었는데
눈꽃빙수라 하니 여름 느낌이 확 나네요~^^
일단 저 파일을 다운로드하셔서 메모장으로 열어주세요. 메모장은 윈도우 기본 프로그램이니
별도의 설치 없이 html을 수정할 수 있어요.
제가 html을 여러군데 작성해서 복사해 불러온 거라 줄이 심하게 안맞아요 :(
하지만 코드 적용에는 아무 문제가 없으니 참고하세요. 메모장으로 html 파일을 열면
이런 알 수 없는 코드들이 한가득하죠?
우리는 겁먹지 말고 2가지만 수정해 주면 된답니다!!
지속시간 / 눈꽃
이렇게 2가지는 마음대로 수정해서 사용하시면 됩니다^^
그림자나 눈꽃 색상, 기타 스타일 등 다양한 요소들은 html에 대해 잘 알고 계시는 분들은
수정해 사용하셔도 됩니다. 수정은 가능하지만 재배포는 안되는거 아시죠? 스킨을 공유하고 싶으시다면
이 포스팅의 링크를 복사해서 공유해주세요.
지속시간
메모장에서 ctrl+f를 눌러 검색을 켜 주시고
animation-iteration-count:
을 찾아주세요.
이렇게 찾았으면
그 뒤에 있는 숫자 1,1 을 원하시는 대로 바꿔주세요.
1이 대략 15초동안 눈꽃이 내린다고 생각하시면 됩니다.
끝없이 내리게 하고 싶으시면 infinity를 넣어주세요 :)
눈꽃 바꾸기
코드를 보시면
이렇게 눈꽃 모양이 텍스트로 입력되어 있는 것을 볼 수 있습니다.
그래서 이 눈꽃을 몇 개 지워서 양을 조절하거나, 눈꽃 부분에 다른 텍스트를 넣는다거나,
이미지를 대신 넣는다던가 하는 수정을 할 수 있습니다.
적용
이제 수정한 파일을 저장하고, 스킨에 적용해 보도록 하겠습니다.
티스토리 관리 화면에서 스킨-스킨 편집-html 편집에 들어가주세요.
여기서 html 코드를 아래쪽으로 내려 보면,
<footer> 라는 코드가 있습니다. 저는 여러분들과 스킨이 다르기 때문에
footer가 포함된 태그를 찾아 주시면 됩니다. 제가 이 스킨을 테스트 할 때
그냥 <body>파트 아무 곳이나 집어넣으니까 글 설정이 다 바뀌고 난리가 났었습니다.
그래서 최종적으로 오류가 나지 않는 부분이 바로 이 <footer> 부분 안에 집어 넣는 것입니다.
혹시라도 html코드 수정을 하다가 오류가 나거나 실수하는 부분이 있을 수 있으니
원래 스킨은 다운로드해서 백업해 놓으시는 것을 추천드립니다. 코드를 수정하고
새로고침을 눌러 테스트해야지, 적용을 눌러버리면 되돌릴 수가 없기 때문에 꼭 주의해 주세요.
저도 한번 잘못 했다가 다 날아가서 스킨 다시 적용하고 한참동안 설정했습니다.
백업은 필수입니다!!
적용하는 것은 아주 쉽습니다. 그냥 <footer> 코드 아래에다가 바로 아까 수정한 html 코드를
전체 복사 해서 붙여넣기 하면 됩니다. 수정할 부분이 있으면 꼭 메모장에서 수정해서
다시 티스토리에 불러와 주세요. 티스토리에서는 수정 안하시는걸 추천드립니다.
마무-리
오늘은 티스토리에 눈꽃빙수 스킨을 적용하는 법을 알아보았습니다.
눈꽃이 떨어지는 정도를 너무 과하게 설정하면 오히려 독이 될 수 있으니
적당히, 느낌 있게 사용하세요~ 스킨이나 디자인/html 관련해서 질문이 있으시면
댓글이나 이메일, 채널톡 상담으로 문의주세요. 댓글 / 공감은 로그인이 필요없으니
공감 꾸-욱 눌러주세요 ^^
감사합니다.
'에그디자인' 카테고리의 다른 글
| 티스토리 트위터 연동으로 방문자 늘리기 / twitter / tistory (2) | 2021.08.09 |
|---|---|
| 손 한번 까딱해서 블로그 썸네일 만들기 / 미리캔버스 / 소소한 꿀팁 (0) | 2021.08.09 |
| 프로필 페이지 쉽게 만들기 프로필링크 / SNS 링크 / 포트폴리오 (0) | 2021.08.08 |
| html 이미지 링크 / 이미지에 링크 거는 쉬운 방법 / css / html (12) | 2021.08.08 |
| 6시간 만에 마플샵 셀러 승인 후기 및 팁 / 마플샵 / 디자인 / 상품 (0) | 2021.08.06 |
