이번에는 프라치노님의 공간스킨을 사용하는 분들, 그리고 저 자신을 위해 포스팅을 해볼까 합니다.
같은 스킨이라고 하더라도 쓰는 사람에 따라 스타일이 전혀 다를 수 있습니다. 때문에 이 글이 완벽한 정보가 아닌, 하나의 참고 따위 정도로 읽혀졌으면 좋겠습니다.
내용은 제목에서 밝혔듯이 공간스킨을 업데이트할 때 보다 수월하게 작업하기 위한 몇 가지 코드 수정에 대해 다뤄봤습니다.
저 역시 HTML이나 기타 코드에 관해선 젬병이나 마찬가지이기때문에 늘 업데이트때마다 이전과 같게 설정하기 위해 몇 시간이고 애를 먹었던 것이 사실입니다. 그래서 이렇게 정리를 해봤습니다. 그리고 이후에는 업데이트할 때 걸리던 시간이 수 시간에서 수 분으로 단축되었습니다.
'그냥 업데이트를 안하면 되는거 아닌가요?'
이 질문도 맞습니다. 다만, 버그를 수정한 업데이트가 나왔는데도 하지 않다가 낭패를 본다면 그것은 고스란히 본인의 책임이겠죠. 힘들고 귀찮더라도 저는 업데이트를 하는게 좋다고 생각합니다.
더욱이 프라치노님께선 매번 업데이트때마다 획기적인 기능을 적어도 하나씩은 넣어주시니까 그걸 지켜보는 재미도 쏠쏠합니다.
서론이 길었네요.
저는 다음과 같은 순서로 다음의 내용과 같이 업데이트를 작업합니다.
:::: 공간스킨 7.0.6a 기준입니다 ::::
:::: 오류가 나는 경우가 있습니다. 전체 복+붙이 아닌, 참고용도로만 봐주세요! ::::
1. 공간스킨 업데이트 파일을 다운받아 압축을 해제합니다.
스킨폴더 내의 skin.html 파일을 실행합니다.
<html lang="ko-kr" class="bright bright-jacket dark-jacket-mobile bright-sub color-link normal hide-author default-related tistory-comments close sub-close" style="display:none">
를 찾아 다음과 같이 수정합니다.
<html lang="ko-kr" class="bright bright-jacket dark-jacket-mobile bright-sub color-link expand show-author default-related tistory-comments close sub-close" style="display:none">
빨간색은 수정사항에서 삭제된 부분이고, 파란색은 추가 혹은 변경된 부분입니다.
normal에서 expand로 변경한 까닭은 기본화면보다 콘텐츠영역을 넓게 사용하게 위함입니다.
hide를 show로 변경한 것은 팀블로그로 사용중이기 때문에 각자의 닉네임으로 작성자를 표시하기 위해서입니다.
<head> 아래에 다음의 코드를 삽입합니다.
<script>
/* Main Page Redirect by Readiz */
var urlAddr = decodeURIComponent(location.href);urlAddr = urlAddr.replace('http://','').replace('https://','');urlAddr = urlAddr.split('#')[0]; urlAddr = urlAddr.split('?')[0];
var url = urlAddr.split('/');
if(url[1] == '') { location.href = '/category' }
</script>
블로그에 접속하면 기본적으로 최신글의 내용이 보여지게 됩니다. 위 코드를 삽입하면 글목록이 우선으로 보여집니다.
var url = "http://[username].tistory.com", /* 본인의 블로그 URL */
cdn = "./images/",
disqus_shortname = "[shortname]", /* DISQUS 단축 이름 */
를 찾아 다음과 같이 수정합니다.
var url = "http://likecoke.com", /* 본인의 블로그 URL */
cdn = "./images/",
disqus_shortname = "iomusic", /* DISQUS 단축 이름 */
파란색 부분에 자신의 블로그 주소와 DISQUS ID를 각 입력합니다.
<div class="cover no-trademark-kit">
트레이드마크킷(블로그 로고)을 사용하는 분들은 위 코드를 찾아 삭제합니다.
<aside id="side-nav" class="show-menu hide-total show-category close-sub-category show-guestbook normal-jacket-mobile parallax">
를 찾아 다음과 같이 수정합니다.
<aside id="side-nav" class="hide-menu hide-total show-category close-sub-category show-guestbook normal-jacket-mobile parallax">
위 코드 수정은 사이드바의 기본 메뉴를 안보이게 해줍니다.
<div id="side-nav-wrap">
<div id="side-cover" class="mobile"><div id="jacket-mobile" class="jacket-cover mobile top"></div></div>
<nav id="menu">
</nav>
<nav id="category">
</nav>
<nav class="sub">
<ul>
<li><a class="event" data-event="search" href="javascript:;">검색</a></li>
<li><a class="event" data-event="info" href="javascript:;">Gilee에 관하여</a></li>
<li class="guestbook-list"><a href="https://likecoke.tistory.com/guestbook">안부 남기기</a></li>
</ul>
</nav>
<ul id="site-func">
<li><a class="no-text depth pseudo tistory" href="http://tistory.com" target="_blank" title="TISTORY로 이동">TISTORY</a></li>
<li><a class="no-text depth pseudo add event" data-event="add" href="javascript:;" title="코카콜라마시따 블로그 추가하기…">코카콜라마시따 블로그 추가하기</a></li>
<li><a class="no-text depth pseudo feed" href="https://likecoke.tistory.com/rss" target="_blank" title="Feed 구독하기">Feed 구독하기</a></li>
</ul>
</div>
를 찾아 다음과 같이 수정합니다.
<div id="side-nav-wrap">
<div id="side-cover" class="mobile"><div id="jacket-mobile" class="jacket-cover mobile top"></div></div>
<nav id="menu">
</nav>
<nav id="category">
</nav>
<nav class="sub">
<ul>
<li><a class="event" data-event="search" href="javascript:;">검색</a></li>
<li><a class="event" data-event="info" href="javascript:;">이웃</a></li>
<li class="guestbook-list"><a href="https://likecoke.tistory.com/guestbook">안부</a></li>
</ul>
</nav>
<ul id="site-func">
<li><a class="no-text depth pseudo tistory" href="http://tistory.com" target="_blank" title="티스토리">TISTORY</a></li>
<li><a class="no-text depth pseudo add event" data-event="add" href="javascript:;" title="이웃추가">코카콜라마시따 블로그 추가하기</a></li>
<li><a class="no-text depth pseudo feed" href="https://likecoke.tistory.com/rss" target="_blank" title="구독">Feed 구독하기</a></li>
</ul>
</div>
*제 블로그에 맞게 수정한 것이므로 참고만 하시기 바랍니다,
좌측의 사이드바에 나타난 메뉴 및 기능들의 순서 및 단어를 바꿔준 것입니다.
<h2 id="headline" class="headline"> 카테고리</h2>
<span class="subcopy">개 발견</span>
를 찾아 다음과 같이 수정합니다.
<h2 id="headline" class="headline"></h2>
<span class="subcopy">개</span>
저는 블로그의 디테일한 부분도 깔끔하게 표현하기 위해 '카테고리'와 '발견'이란 단어를 삭제했습니다.
ex) 끄적카테고리, 7개 발견 -> 끄적, 7개
<ol id="result" class="gallery various blind show-text bright-text no-text-shadow show-thumbnail">
를 찾아 다음과 같이 수정합니다.
<ol id="result" class="text-only various blind show-text bright-text no-text-shadow show-thumbnail">
글 목록 스타일을 썸네일 위주가 아닌 텍스트 위주로 바꿔줍니다.
<script async src="./images/core_typekit_[버전].js"></script>
와 비슷한 코드를 찾아서 삭제합니다.
웹서체 비활성화 - 다른 폰트를 사용하실 분들에게만 해당합니다.
2. 스킨폴더 내의 style.css 파일을 실행합니다.
/* 데스크탑 모드의 Jacket 커버 */
.jacket-cover.desktop {
display: none
}
/* 모바일 모드의 Jacket 커버 (메뉴) */
.jacket-cover.mobile.top {
display: none
}
/* 모바일 모드의 Jacket 커버 (하단) */
.jacket-cover.mobile.bottom {
display: none
}
를 찾아 다음과 같이 수정합니다.
/* 데스크탑 모드의 Jacket 커버 */
.jacket-cover.desktop {
background-color: #FFFFFF
}
/* 모바일 모드의 Jacket 커버 (메뉴) */
.jacket-cover.mobile.top {
background-color: #e8e8e8
}
/* 모바일 모드의 Jacket 커버 (하단) */
.jacket-cover.mobile.bottom {
background-color: #FFFFFF
}
*마찬가지로 제 블로그에 맞게 수정한 것이므로 참고만 하시기 바랍니다,
스킨의 여러 배경색을 취향에 맞게 바꿀 수 있습니다.
/* 아래에는 사용자화 선택자를 추가할 수 있습니다 */
를 찾아 아래에 다음 코드를 삽입합니다.
@font-face {
font-family: loraregular;
src: url('./images/lora-regular-webfont.eot');
src: url('./images/lora-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('./images/lora-regular-webfont.woff') format('woff'),
url('./images/lora-regular-webfont.ttf') format('truetype'),
url('./images/lora-regular-webfont.svg') format('svg');
}
@font-face {
font-family: ls;
src: url('./images/LexiSaebomR.eot');
src: url('./images/LexiSaebomR.eot?#iefix') format('embedded-opentype'),
url('./images/LexiSaebomR.woff') format('woff'),
url('./images/LexiSaebomR.ttf') format('truetype'),
url('./images/LexiSaebomR.svg') format('svg');
}
body {font-family: loraregular, ls;}
블로그의 웹폰트 변경에 관한 코드입니다.
보고 계시는 블로그와 같은 폰트를 사용하고 싶다면 그대로 복사+붙여넣기 해주세요.
#result.text-only .list-button:before,#result.text-only .list-thumbnail,#result.text-only .list-button-wrapper:before,#result.text-only a:after{border-radius:30px!important}
썸네일이 사각형으로 되어있는데, 원형으로 보이도록 해주는 코드입니다.
3. 저와 같은 폰트를 사용하고 싶은 분들만 읽어주세요.
앞서 웹서체 비활성화와 웹폰트 변경에 관한 코드수정은 잘 해주셨나요? 그렇다면 두 가지 작업만 더 해주시면 됩니다.
먼저 아래의 파일을 다운로드 후, 압축을 풀어서 스킨폴더 내에 넣어주세요.
폰트.zip그리고 스킨폴더 내의 images 폴더에 들어가 두 개의 파일에 약간의 코드수정을 할겁니다.
"loraregular","ls",
위 코드를 먼저 복사해주세요.
- style_core_ver_[버전].css 이라는 파일을 찾아서 실행하고, 첫째줄에 1.75라고 적힌 부분 옆에 붙여넣어줍니다.
- style_webfonts_ver_[버전].css 파일을 찾아 실행, button{font-family: 옆에 붙여넣어줍니다.
4. 블로그의 관리자 페이지로 들어갑니다.
스킨폴더의 모든 파일들을 블로그 관리자페이지의 스킨 - 스킨 등록으로 가서 업로드합니다.
(스킨 저장명은 알아보기 쉽도록 아무렇게나 적어도 상관없습니다.)
글 설정 - 글 환경에서 글쓰기 가로폭을 970px로 설정합니다.
화면 설정 - 화면출력에서 기본화면 글 '1개', '목록만'으로 설정합니다.
(이 작업을 하지 않으면 '문제발생' 오류가 뜹니다.)
이상으로 프라치노 공간스킨 업데이트 수월하게 작업하는 방법에 대해 끄적여봤습니다.
서론에서 밝혔듯이 스킨이라는 것이 서로 다른 개인의 사용자화에 따라 스타일이 천차만별로 바뀌기 때문에 이 글은 정보라기보다 참고만 하시기를 당부드린다는 점 다시 한 번 말씀드립니다.
'나는 항상 이렇게 설정하고 싶어' 하는 부분들이 있다면 따로 정리해서 포스팅하세요. 그리고 업데이트가 있을 때마다 참고해가면서 작업한다면 보다 편리한 방법으로 작업시간을 대폭 줄일 수 있을 것이라 확신합니다.
본문의 내용과 직접적인 관련이 있는 부분만 댓글 혹은 방명록에 질문해주세요. 본문에 언급되지 않은 공간스킨에 대한 문의는 프라치노님께 직접 해주시기 바랍니다. 문의서비스는 유료구입자 한해 이뤄지기 때문에 제가 답변드리기 어렵다는 점 양해바랍니다. 긴 글 읽어주셔서 감사합니다.
▶▶ 프라치노님께 문의메일 보내기 ( spaceskin+discuss@icloud.com )
'정보' 카테고리의 다른 글
| 인천지하철 2호선 개통일과 노선도 (13) | 2016.05.28 |
|---|---|
| 네이버웹마스터도구 사이트맵 RSS 등록하기 (10) | 2016.05.15 |
| 16진수 컬러코드 - 색상코드표 생성하기 (0) | 2016.04.20 |
| 구글, 사진소프트웨어 닉컬렉션 무료 배포 (2) | 2016.04.19 |
| 주소창에서 네이버,구글,다음 검색을 쉽게 하는 방법 (0) | 2016.04.18 |