티스토리 반응형 스킨 [Summer Nights] 배포

최신 버전이 업데이트됐습니다!!

최신 버전으로 이동

다운로드

Summer Nights.zip

dtna.mp4

위는 스킨, 아래는 배너 영상입니다. 트와이스의 Dance the night away MV의 일부분이니, 사용하지 않으실 분은 굳이 받지 않으셔도 됩니다.

주의 : 이 스킨에 포함된 인터파크 고딕 폰트는 개인의 비상업적 용도에 한해 무료로 제공되는 폰트입니다.

소개

반응형 스킨이며, 인덱스 페이지를 손봐서 블로그 첫 화면을 꾸몄고, 위치로그 페이지를 손봐서 About 페이지를 만들었습니다.

1단형, 2단형의 전환이나 블로그 테마의 변경 등이 편하도록 노력했습니다.

스크린 샷을 이것저것 올리는 것 보던, 직접 둘러보시는 게 좋을듯하여, 데모페이지를 개설했습니다.

글을 작성할 때 사용하는 이런저런 디자인들은, 들어가면 보이시는 가장 최근 글인 '글 확인'이라는 글에 정리되어 있습니다. 글을 작성할 때 이런저런 효과들을 많이 넣는 편이 아니라 조금 빈약한듯하긴 합니다.

스킨 손보기

블로그 1단 / 2단 변경하기

html의 class를 변경합니다.

col-1 : 1단

col-2 : 2단

색상 변경하기

css 탭에서 /* color */를 검색하시면

위와 같은 내용이 나올 것입니다.

블로그의 색을 바꾸고 싶을 때, 간단하게 이곳에서 색상을 수정하시면 됩니다.

--main-theme-color : 말 그대로 블로그의 메인 색상입니다.

--main-theme-opacity-color : 메인 색상에 투명도를 추가한 색상입니다. 이곳에서 간단하게 색상을 RGB 색상으로 변경할 수 있습니다.

--sub-theme-color: 인덱스 페이지나, a 태그 등에 사용된 색상입니다.

--comment-theme-color: 댓글, 방명록에 사용되는 색상입니다. 아래 사진의 푸른 빛을 띠는 색상이 이 색상입니다.

--comment-theme-color-2: 마찬가지로 댓글, 방명록에 사용되는 색상입니다. 아래 사진의 보랏빛을 띠는 색상이 이 색상입니다.

--selection-color: 텍스트 등을 드래그하면 드래그 영역을 표시해주는 색상입니다.

배너 변경하기

저는 영상을 뒤적거리다 마음에 드는 부분을 After Effects를 이용해 영상을 잘라서 사용합니다.

영상의 길이가 아주 짧다면 스킨 편집 > 파일 업로드에서 영상을 올려서 사용해도 되지만, 조금 애매한 경우는 땀똔님의 글을 참고하셔서 집어넣으시면 됩니다.

로고 꾸미기

이 포스트를 참조해주세요.

아이콘 폰트 편집하기

selection.json

icomoon에서 위 파일을 불러온 후에, 항목들을 편집하고, 우측 하단 Generate Font를 클릭해 폰트를 다운로드합니다.

style.css의 내용을 모두 선택하여 css 압축을 해주신 뒤, fonts/ 라는 문구를 ./images/로 편집하여 스킨의 css에서 /* Custom Fonts */ 아래의 내용을 삭제하고 붙여 넣습니다.

fonts 파일 안에 있는 파일들을 업로드합니다.

팝업 버튼 이용하기

<button class="dialog__trigger"><span>버튼</span></button>
<div class="dialog">
    <span class="dialog__close icon-times"></span>
    <h2 class="dialog__title">제목</h2>
    <div class="dialog__content">
        <p style="text-align: center; clear: none; float: none;"></p>
        <div class="youtubevid"><iframe width="560" height="315" src="https://www.youtube.com/embed/rRzxEiBLQCA?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe></div>
    </div>
</div>

"버튼" 부분에 버튼 안에 들어갈 텍스트를, "제목" 부분에 팝업창의 제목을 입력해주시면 됩니다.

팝업 버튼 내부에 유튜브 비디오를 반응형으로 집어넣고 싶은 경우에는 youtubevid라는 class를 iframe을 감싼 div에 부여해주면 됩니다.

마치며

어느새 두 번째로 스킨을 공유하네요. 아직 개선해야 할 것도 많고, 욕심도 많이 남았습니다. 새로운 변경 점이 어느 정도 쌓일 때마다 지속적인 업데이트를 할 예정입니다.

더위에 맛이 좀 간 상태라 글을 제대로 썼을지 모르겠네요. 정신 차리면 다시 한 번 퇴고해야겠습니다.

기타 궁금하신 사항은 댓글이나 방명록 등으로 남겨주시면 힘이 닿는 데까지 도와드리겠습니다.