티스토리 반응형 웹 :: Skeleton 스킨 소개와 적용

 

티스토리 반응형 웹 Skeleton 스킨 소개와 적용

 

 

포토가이드닷컴의 블로그 스킨을 최근 반응형으로 교체하였다. 그동안 워드프레스 스타일이었던 블로그를 새해들어 새롭게 교체할까하여 여러 스킨을 보던중 최근에 티스토리 스킨을 쓰시는 많은 분들이 Skeleton 스킨으로 바꾸는 것 같아 많은 검토와 비교를 거쳐서 새롭게 바꾸었다. Skeleton 스킨은 하얀 바탕의 깔끔한 이미지와 스마트하게 웹에 반응한다는 것이 괜찮아 보였다. 본 블로그는 사진과 함께 하는 사이트이다 보니 아무래도 이것 저것 많은 디자인을 갖춘 스타일 보다는 그냥 심플한 스타일로 보이는 스킨이 좋을 것 같았는데, 교체를 하고보니 생각보다 좋아 이대로 사용하기로 했다.

 

반응형 웹 스킨이란? 말그대로 웹에 그대로 스마트하게 반응한다는 것으로 해석될 수 있다. 이제는 블로그를 인터넷 PC만을 이용하여 본다기 보다는 각종 스마트 기기를 이용하여 보는 편이 많아졌는데, 이렇게 된다면 각각의 화면에 따라 반응하는 웹스킨이 좋을 것 같았다. 자신의 블로그가 각종 스마트 기기에서 어떻게 보여지는지 궁금하다면 직접 스마트폰으로 보는 방법도 있지만, 웹에서 확인하고 싶다면 아래의 사이트를 방문하여 테스트하여도 좋다.

 

스마트 기기 / 모니터별로 자신의 블로그 보기
웹사이즈가 궁금하다면 클릭 Link

  

 

 

 

 

 

1. 마크쿼리님 반응형 웹 스킨 다운로드 받기

 

마크쿼리님의 Skeleton 스킨을 다운받아 자신의 블로그에 적용하려면 다음과 같이 하면 된다.

마크쿼리님의 홈페이지 사이트를 방문하여, 상단 우측의 다운로드를 클릭한다.

 

 

 

다운로드를 클릭하면 다음의 화면이 나오는데, 여기서 타스토리 다운로드를 선택한다.

Tistory 스킨으로는 반응형 웹 스킨이 2가지 종류가 있는데, 본인의 취향에 따라 다운로드 받으면 된다.

 

 

 

 

Spider's Web  또는 Doo Be Doo를 선택하면 되는데, Spider's Web은 가로 사이즈의 폭이 정해져 있는 반면, Doo Be Doo은 넓은 폭을 그대로 사용할 수 있다. 어느 것을 다운로드 받을 것인지는 본인의 블로그 디자인 취향에 따르면 될 것이다. 참고로 본 블로그인 포토가이드닷컴은 Spider's Web 스킨을 적용하였다. 마크쿼리님의 웹반응형 스킨은 비교적 깔끔한 스킨으로 평가할 수 있으며, 사진 등을 위주로 하는 블로그에도 적용하기 편리하다.

 

 

 

 

 

 

 

 

2. 스킨 변경후 해야 할 Skin.html 수정

 

첫번째 수정으로는 Skin.html에서 최근 글 목록(Recent article)의 RSS 피드 주소로 바꾸어주는 것 입니다.

 

 

마크쿼리님의 스킨으로 변경하고 본인의 블로그를 보면 최근글이 본인의 블로그가 아닌 마크쿼리님의 블로그 최근글로 나옵니다. 그러므로, 본인 블로그의 새글이 나오도록 변경해야 하는데 이것은 대략 skin.html 맨 끝부분 쯤에 있는데 잘 보시고 본인의 블로그 주소로 수정하면 됩니다.

 

      $(".widget-feed").rss("http://photoguide.com/feed", {

 

 

 

 

 

 

 

 

두번째는 본인의 블로그 메뉴를 바꾸어 주는 것, Skeleton 스킨의 상단 메뉴 수정하기 입니다.

 

 

관리자모드에서 skin.html 수정에 들어가 Ctrl+F 를 치고 navbar-nav를 입력하면, 수정할 부분이 나옵니다. 아래는 포토가이드닷컴의 블로그 메뉴를 수정한 샘플입니다. 아래와 같이 수정하면 드롭다운 메뉴로 깔끔하게 수정할 수 있습니다.아래와 같게 수정을 하게되면, 메뉴는 All Photo :: 전체보기  이런 식으로 보여집니다.

 

 

 

 skeleton skin drop_menu.txt

 

<ul class="nav navbar-nav">

<li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Gallery<b class="caret"></b></a>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
 <li typeof="sioc:Page" about="https://photoguide.com/category/"><a property="dc:title" href="https://photoguide.com/category">All Photo :: 전체보기 </a></li>
 <li class="divider"></li>
 <li typeof="sioc:Page" about="https://photoguide.com/category/Photography"><a property="dc:title" href="https://photoguide.com/category/Photography">Photography</a></li>
 <li class="divider"></li>
 <li typeof="sioc:Page" about="https://photoguide.com/category/Landscape~"><a property="dc:title" href="https://photoguide.com/category/Landscape">Landscape</a></li>
 <li typeof="sioc:Page" about="https://photoguide.com/category/People~"><a property="dc:title" href="https://photoguide.com/category/People">People</a></li>
 <li typeof="sioc:Page" about="https://photoguide.com/category/Others"><a property="dc:title" href="https://photoguide.com/category/Others">Others</a></li>
 <li class="divider"></li>
 <li typeof="sioc:Page" about="https://photoguide.com/category/Miscellaneous"><a property="dc:title" href="https://photoguide.com/category/Miscellaneous">Miscellaneous</a></li>
 </ul>
</li>

 

기본적으로 스킨을 변경후에  위의 두 가지 수정만 하여도 일단은 블로그가 본인의 것으로 변경되었음을 알 수 있습니다. 그러나 추가적으로 스킨 변경에 따르는 작업이 있으니 꼼꼼하게 하나씩 차근 차근 변경하시면 될 것 입니다.

참고로 마크쿼리님의 티스토리 스킨을 사용하면서 궁금한 것 등은 아래의 커뮤니티 사이트를 방문하는 것도 좋다.

 

 

마크쿼리님의 반응형 웹 티스토리 스킨 
커뮤니티가 궁금하다면 클릭 Link